【卡片】卡片用於定義一塊帶圓角的區域。
.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} | 定義卡片的背景色,定義在卡片容器上 |
卡片層次關係:
<div class="card bg-success">
<div class="card-header">123</div>
<div class="card-body">
<div class="card-title">456</div>
<div class="card-text">
<a href="#" class="card-link">測試</a>
<img class="card-img-{top|bottom|overlay}" src="https://www.hanost.com/wp-content/uploads/2020/03/comment-autolink.jpg" width="" height=""/>
</div>
</div>
<div class="card-footer">測試...</div>
</div>
…
…
來源: