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

.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>