卡片（Card）

Bootstrap的卡片提供了一個靈活且可擴展的內容容器，其中包含多種變體和選項。

一、Example

卡片盡可能少地使用標記和樣式構建，但仍然能夠提供大量的控制和定制。它們采用flexbox構建，易于對齊，并與其他Bootstrap組件很好地混合。默認情況下，它們沒有邊距，因此根據需要使用間距實用程序。

下面是一個具有混合內容和固定寬度的基本卡的示例。卡片開始時沒有固定的寬度，因此它們自然會填充其父元素的整個寬度。這很容易通過我們的各種尺寸選項進行定制。

<!--Example-->
<div class="card" style="width: 18rem;"><img src="../images/a1.jpg" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="#" class="btn btn-primary">Go somewhere</a></div>
</div>

頁面展示效果：

二、Content types 內容類型

卡片支持各種各樣的內容，包括圖像、文本、列表組、鏈接等。下面是支持的示例。

2.1 Body 主體

卡片的構建塊是.card-body。每當你需要卡片中的填充部分時，都可以使用它。

<div class="card"><div class="card-body">This is some text within a card body.</div>
</div>

頁面展示效果：

2.2 Titles, text, and links 標題、文本和鏈接

卡片標題是通過在<h*>標簽中添加.card-title來使用的。同樣，通過在<a>標簽中添加.card-link，可以添加鏈接并將其放置在彼此旁邊。

字幕是通過在<h*>標簽中添加.card-subtitle字幕來使用的。如果.card-title和.card-subtitle副標題項放置在.card-body正文項中，則卡標題和副標題會很好地對齊。

<div class="card" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Card title</h5><h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="#" class="card-link">Card link</a><a href="#" class="card-link">Another link</a></div>
</div>

頁面展示效果：

2.3 Images 圖片

.card-img-top 將圖像放置在卡的頂部。使用.card-text文本，可以將文本添加到卡中。.card-text中的文本也可以使用標準HTML標簽進行樣式設置。

<div class="card" style="width: 18rem;"><img src="..." class="card-img-top" alt="..."><div class="card-body"><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div>
</div>

頁面展示效果：

2.4 List groups 列表組

使用刷新列表組在卡片中創建內容列表。

<div class="card" style="width: 18rem;"><div class="card-header">Featured</div><ul class="list-group list-group-flush"><li class="list-group-item">An item</li><li class="list-group-item">A second item</li><li class="list-group-item">A third item</li></ul>
</div>

頁面展示效果：

<div class="card" style="width: 18rem;"><ul class="list-group list-group-flush"><li class="list-group-item">An item</li><li class="list-group-item">A second item</li><li class="list-group-item">A third item</li></ul><div class="card-footer">Card footer</div>
</div>

頁面展示效果：

2.5 Kitchen sink 洗滌槽

混合和匹配多種內容類型以創建所需的卡片，或將所有內容都放在其中。下面顯示的是圖像樣式、塊、文本樣式和列表組，所有這些都包裝在固定寬度的卡片中。

<div class="card" style="width: 18rem;"><img src="..." class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div><ul class="list-group list-group-flush"><li class="list-group-item">An item</li><li class="list-group-item">A second item</li><li class="list-group-item">A third item</li></ul><div class="card-body"><a href="#" class="card-link">Card link</a><a href="#" class="card-link">Another link</a></div>
</div>

頁面展示效果：

2.6 Header and footer 頁眉和頁腳

在卡片中添加可選的頁眉和/或頁腳。

<div class="card"><div class="card-header">Featured</div><div class="card-body"><h5 class="card-title">Special title treatment</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary">Go somewhere</a></div>
</div>

頁面展示效果：

可以通過在<h*>元素中添加.card-header來設置卡頭樣式。

<div class="card"><h5 class="card-header">Featured</h5><div class="card-body"><h5 class="card-title">Special title treatment</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary">Go somewhere</a></div>
</div>

頁面展示效果：

設置頁眉，卡片內容是塊引用

<div class="card"><div class="card-header">Quote</div><div class="card-body"><blockquote class="blockquote mb-0"><p>A well-known quote, contained in a blockquote element.</p><footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote></div>
</div>

頁面展示效果：

設置頁眉和頁腳，卡片內容文本居中

<div class="card text-center"><div class="card-header">Featured</div><div class="card-body"><h5 class="card-title">Special title treatment</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary">Go somewhere</a></div><div class="card-footer text-muted">2 days ago</div>
</div>

頁面展示效果：