【卡片】卡片用於定義一塊帶圓角的區域。
| .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>