Bootstrap 5 卡片

卡片

Bootstrap 5 中的卡片是帶邊框的框，其內容周圍有一些內邊距。它包括頁眉、頁腳、內容、顏色等選項。

基礎的卡片

一張基礎卡片是用 .card 類創建的，卡片中的內容有一個 .card-body 類：

實例

<div class="card">
  <div class="card-body">基礎的卡片</div>
</div>

親自試一試

頁眉和頁腳

.card-header 類為卡片添加標題，.card-footer 類為卡片添加頁腳：

實例

<div class="card">
  <div class="card-header">頁眉</div>
  <div class="card-body">內容</div>
  <div class="card-footer">頁腳</div>
</div>

親自試一試

上下文卡片

如需為卡片添加背景顏色，請使用上下文類：

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

實例

親自試一試

標題、文本和鏈接

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

實例

<div class="card">
  <div class="card-body">
    <h4 class="card-title">卡片標題</h4>
    <p class="card-text">一些實例文本。一些實例文本。</p>
    <a href="#" class="card-link">卡片鏈接</a>
    <a href="#" class="card-link">另一個鏈接</a>
  </div>
</div>

親自試一試

卡片圖像

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

請注意，我們在 .card-body 之外添加了圖像以跨越整個寬度：

實例

<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">查看個人資料</a>
  </div>
</div>

親自試一試

卡片圖像疊加

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

實例

<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">查看個人資料</a>
  </div>
</div>

親自試一試