【卡片】卡片用于定义一块带圆角的区域。
| .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>