卡片

卡片

Bootstrap 5 中的卡片是帶邊框的框，其內(nèi)容周?chē)幸恍﹥?nèi)邊距。它包括頁(yè)眉、頁(yè)腳、內(nèi)容、顏色等選項(xiàng)。

基礎(chǔ)的卡片

一張基礎(chǔ)卡片是用 .card 類(lèi)創(chuàng)建的，卡片中的內(nèi)容有一個(gè) .card-body 類(lèi)：

實(shí)例

<div class="card">
  <div class="card-body">基礎(chǔ)的卡片</div>
</div>

頁(yè)眉和頁(yè)腳

.card-header 類(lèi)為卡片添加標(biāo)題，.card-footer 類(lèi)為卡片添加頁(yè)腳：

實(shí)例

<div class="card">
  <div class="card-header">頁(yè)眉</div>
  <div class="card-body">內(nèi)容</div>
  <div class="card-footer">頁(yè)腳</div>
</div>

上下文卡片

如需為卡片添加背景顏色，請(qǐng)使用上下文類(lèi)：

• .bg-primary
• .bg-success
• .bg-info
• .bg-warning
• .bg-danger
• .bg-secondary
• .bg-dark
• .bg-light

實(shí)例

標(biāo)題、文本和鏈接

請(qǐng)使用 .card-title 將卡片標(biāo)題添加到任意標(biāo)題元素。如果 <p> 元素是 .card-body 中的最后一個(gè)子元素（或唯一一個(gè)子元素），則 .card-text 類(lèi)用于移除 <p> 元素的底部邊距。.card-link 類(lèi)為任意鏈接添加藍(lán)色和懸停效果。

實(shí)例

<div class="card">
  <div class="card-body">
    <h4 class="card-title">卡片標(biāo)題</h4>
    <p class="card-text">一些實(shí)例文本。一些實(shí)例文本。</p>
    <a href="#" class="card-link">卡片鏈接</a>
    <a href="#" class="card-link">另一個(gè)鏈接</a>
  </div>
</div>

卡片圖像

將 .card-img-top 或 .card-img-bottom 添加到 <img>，可將圖像放置在卡片的頂部或底部。

請(qǐng)注意，我們?cè)?.card-body 之外添加了圖像以跨越整個(gè)寬度：

實(shí)例

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Bill Gates 是一位程序員和工程師。一些示例文本。一些示例文本。</p>
    <a href="#" class="btn btn-primary">查看個(gè)人資料</a>
  </div>
</div>

卡片圖像疊加

將圖像轉(zhuǎn)換為卡片背景并使用 .card-img-overlay 在圖像頂部添加文本：

實(shí)例

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">一些示例文本。一些示例文本。</p>
    <a href="#" class="btn btn-primary">查看個(gè)人資料</a>
  </div>
</div>