卡片 - bootStrap4常用CSS笔记

【卡片】卡片用于定义一块带圆角的区域。

.card 定义卡片容器
.card-body 卡片主体内容部份
.card-header 卡片头
.card-footer 卡片尾
.card-title 卡片标题
.card-text 卡片文本区域
.card-link 卡片链接
.card-img-top 卡片中图片位于文字顶部
.card-img-bottom 卡片中图片位于文字底部
.card-img-overlay 卡片中图片做为背景
.bg-{primary、secondary、success、warning、danger、info、dark、light} 定义卡片的背景色,定义在卡片容器上

 

卡片层次关系:

 1     <div class="card bg-success">
 2       <div class="card-header">...</div>
 3       <div class="card-body">
 4           <div class="card-title">...</div>
 5         <div class="card-text">
 6           <a href="#" class="card-link">链接</a>
 7           <img class="card-img-{top|bottom|overlay}" src="..." width="" height=""/>
 8         </div>
 9       </div>
10       <div class="card-footer">...</div>
11     </div>

 

posted @ 2019-05-13 15:44  1024记忆  阅读(1097)  评论(0编辑  收藏  举报