Bootstrap - 卡片

上一頁
下一頁

本章將討論 Bootstrap 卡片。Bootstrap 卡片提供靈活且可擴充套件的內容容器，具有多種風格和選項。卡片是一個靈活且可擴充套件的內容容器。它包括標題和頁尾選項、不同的內容、上下文背景顏色和有效的顯示選項。

基本卡片

  • 要建立基本卡片，請使用類 .card。在需要時使用 間距實用工具，因為卡片不帶邊距。

  • 此處演示了具有混合內容和固定寬度的基本卡片。卡片自然會覆蓋其父元素的整個寬度，因為它們沒有固定寬度。透過許多大小選項，這很容易自定義。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Card</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="card" style="width: 15rem;">
        <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          <a href="#" class="btn btn-primary">Get More information</a>
        </div>
      </div>
    </body>
    </html>

內容型別

卡片支援各種型別的內容，包括影像、文字、列表組和連結。以下是支援內容的示例。

主體

當您需要在卡片內新增填充部分時，請新增類 .card-body。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Card</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="card">
        <div class="card-body">
          Card body section.
        </div>
      </div>
    </body>
    </html>

標題、文字和連結

  • 透過將類 .card-title 新增到 <h*> 標記中來使用卡片標題。您可以類似地新增和標題連結，方法是將 .card-link 新增到 <a> 標記中。

  • 將 .card-title 和 .card-subtitle 元素放置在 .card-body 元素中，可以確保卡片標題和副標題很好地對齊。透過將 .card-subtitle 新增到 <h*> 標記中來使用副標題。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">Mr. Jhon</h5>
        <h6 class="card-subtitle mb-2 text-body-secondary">HR</h6>
        <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
        <a href="#" class="card-link">More info</a>
      </div>
    </div>
  </body>
  </html>

圖片

  • 類 .card-img-top 將影像放置在卡片上方。

  • 您可以使用 .card-text 向卡片新增文字。.card-text 中的文字也可以使用標準 HTML 標記進行樣式設定。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Card</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="card" style="width: 18rem;">
        <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
        <div class="card-body">
          <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
        </div>
      </div>
    </body>
    </html>

列表組

使用無邊距列表組在卡片上建立內容列表。新增類 .list-group-flush。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Card</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="card" style="width: 18rem;">
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Item 1</li>
          <li class="list-group-item">Item 2</li>
          <li class="list-group-item">Item 3</li>
        </ul>
      </div>
    </body>
    </html>

使用無邊距列表組在卡片上建立標題內容列表。透過將類 .card-header 新增到卡片的列表組中，將標題新增到列表組。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
    <div class="card" style="width: 18rem;">
      <div class="card-header">
          Header
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">Item 1</li>
        <li class="list-group-item">Item 2</li>
        <li class="list-group-item">Item 3</li>
      </ul>
    </div>
    </body>
    </html>

使用無邊距列表組在卡片上建立頁尾內容列表。透過將類 .card-footer 新增到卡片的列表組中，將頁尾新增到列表組。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card" style="width: 18rem;">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">Item 1</li>
        <li class="list-group-item">Item 2</li>
        <li class="list-group-item">Item 3</li>
      </ul>
      <div class="card-footer">
        Card Footer
      </div>
    </div>
  </body>
  </html>

綜合示例

組合多種內容型別以建立所需的卡片，或填充所有內容。以下是在固定寬度卡片中分組的影像樣式、塊、文字樣式和列表組。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card" style="width: 18rem;">
      <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">Item 1</li>
        <li class="list-group-item">Item 2</li>
        <li class="list-group-item">Item 3</li>
      </ul>
      <div class="card-body">
        <a href="#" class="card-link">Link  1</a>
        <a href="#" class="card-link">Link 2</a>
      </div>
    </div>
  </body>
  </html>

標題和頁尾

在卡片內包含可選的標題和/或頁尾。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card">
      <div class="card-header">
        Card Header
      </div>
      <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
        <a href="#" class="btn btn-primary">Get more info</a>
      </div>
      <div class="card-footer">
         Card Footer
      </div>
    </div>
  </body>
  </html>

您可以透過將 .card-header 新增到 <h*> 元素中來設定卡片標題的樣式。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Card</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <div class="card">
    <h5 class="card-header">Card Header</h5>
    <div class="card-body">
      <h5 class="card-title">Card Title</h5>
      <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
      <a href="#" class="btn btn-primary">Get more info</a>
    </div>
  </div>
</body>
</html>

要突出顯示，請將類 .blockquote mb-0 新增到 .blockquote。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Card</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <div class="card">
    <div class="card-header">
      Quote
    </div>
    <div class="card-body">
      <blockquote class="blockquote mb-0">
        <p>blockquote element</p>
        <footer class="blockquote-footer">Blockquote footer <cite title="Source Title">Source Title</cite></footer>
      </blockquote>
    </div>
  </div>
</body>
</html>

使用類 .text-center 將整個卡片的文字對齊到中心。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card text-center">
      <div class="card-header">
        Rose
      </div>
      <div class="card-body">
        <h5 class="card-title">A rose is a flower that people in love give each other.</h5>
        <p class="card-text">Roses have multi-layered petals and smell wonderfully sweet. They come in a wide variety of colors that can convey various meanings.</p>
        <a href="#" class="btn btn-primary">More info</a>
      </div>
    </div>
  </body>
  </html>

尺寸

除非另有說明，否則卡片寬度為 100%。這可以使用自定義 CSS、網格類、網格 Sass 混合或實用工具進行自定義。

使用網格標記

使用網格將您的卡片包裝到所需的列和行中。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="row">
      <div class="col-sm-6 mb-3 mb-sm-0">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
            <a href="#" class="btn btn-primary">Get more info</a>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
            <a href="#" class="btn btn-primary">Get more info</a>
          </div>
        </div>
      </div>
    </div>
  </body>
  </html>

使用實用工具

使用一些可用的調整大小 實用工具 快速設定卡片的寬度。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card w-75 mb-3">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content..</p>
        <a href="#" class="btn btn-primary">Card Button</a>
      </div>
    </div>

    <div class="card w-50">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
        <a href="#" class="btn btn-primary">Card Button</a>
      </div>
    </div>
  </body>
  </html>

使用自定義 CSS

在樣式表中或作為內聯樣式使用自定義 CSS 來設定寬度。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
        <a href="#" class="btn btn-primary">Get more info</a>
      </div>
    </div>
  </body>
  </html>

文字對齊

文字對齊類 允許您快速更改整個卡片或特定部分的文字對齊方式。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card mb-3" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">The text alignment of the card at the left.</p>
        <a href="#" class="btn btn-primary">Get more info</a>
      </div>
    </div>
    <div class="card text-center mb-3" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">The text alignment of the card at the center.</p>
        <a href="#" class="btn btn-primary">Get more info</a>
      </div>
    </div>
    <div class="card text-end" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">The text alignment of the card at the right.</p>
        <a href="#" class="btn btn-primary">Get more info</a>
      </div>
    </div>
  </body>
  </html>

導航

使用 Bootstrap 導航元件 將導航新增到卡片的標題（或塊）中。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card text-center">
      <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs">
          <li class="nav-item">
            <a class="nav-link active" aria-current="true" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled">About us</a>
          </li>
        </ul>
      </div>
      <div class="card-body">
        <h5 class="card-title">Rose</h5>
        <p class="card-text">Roses have multi-layered petals and smell wonderfully sweet. They come in a wide variety of colors that can convey various meanings.</p>
        <a href="#" class="btn btn-primary">Get more info</a>
      </div>
    </div>
  </body>
  </html>

透過新增類 .nav-pills 獲取 Bootstrap 導航元件。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card text-center">
      <div class="card-header">
        <ul class="nav nav-pills card-header-pills">
          <li class="nav-item">
            <a class="nav-link active" href="#" >Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled">About us</a>
          </li>
        </ul>
      </div>
      <div class="card-body">
        <h5 class="card-title">Rose</h5>
        <p class="card-text">Roses have multi-layered petals and smell wonderfully sweet. They come in a wide variety of colors that can convey various meanings.</p>
        <a href="#" class="btn btn-primary">Get more info</a>
      </div>
    </div>
  </body>
  </html>

圖片

卡片包含多個用於處理影像的選項。選擇在卡片的每一側都有“影像標題”，將影像覆蓋在卡片的內容上，或者只是將影像嵌入到卡片中。

影像標題

卡片可以在頂部和底部具有“影像標題”（卡片頂部或底部的影像），類似於標題和頁尾，如下所示。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card mb-3">
      <img src="\bootstrap\images\tutimg2.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
        <p class="card-text"><small class="text-body-secondary">2 mins ago</small></p>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
        <p class="card-text"><small class="text-body-secondary">5 mins ago</small></p>
      </div>
      <img src="\bootstrap\images\tutimg2.jpg" class="card-img-bottom" alt="...">
    </div>
  </body>
  </html>

影像疊加

將影像變成卡片背景並覆蓋卡片文字。某些影像可能需要額外的樣式或實用工具。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card text-bg-dark">
      <img src="\bootstrap\images\tutimg2.jpg" class="card-img" alt="...">
      <div class="card-img-overlay">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
        <p class="card-text"><small>2 mins ago</small></p>
      </div>
    </div>
  </body>
  </html>
注意：重要的是要注意文字/內容不應超過影像的高度，因為這會導致它顯示在框架外部。

水平排列

透過結合使用網格和實用工具類，您可以以移動友好和響應式的方式水平建立卡片。在下面的示例中，.g-0 刪除了網格線，並使用 .col-md-* 類在 md 斷點處對齊卡片。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card mb-3" style="max-width: 540px;">
      <div class="row g-0">
        <div class="col-md-4">
          <img src="\bootstrap\images\tutimg.png" class="img-fluid rounded-start" alt="...">
        </div>
        <div class="col-md-8">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
            <p class="card-text"><small class="text-body-secondary">1 mins ago</small></p>
          </div>
        </div>
      </div>
    </div>
  </body>
  </html>

卡片樣式

卡片提供了廣泛的背景、邊框和顏色自定義選項。

背景和顏色

在 v5.2.0 中新增

  • 使用 .text-bg-{color} 輔助工具，您可以設定具有對比前景顏色的背景顏色。

  • 以前，需要手動配對 .text-color 和 .bg-color 實用工具來設定樣式，如果您願意，您仍然可以這樣做。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card text-bg-primary mb-3" style="max-width: 18rem;">
      <div class="card-header">Primary</div>
      <div class="card-body">
        <p class="card-text">A card with primary background-color.</p>
      </div>
    </div>
    <div class="card text-bg-secondary mb-3" style="max-width: 18rem;">
      <div class="card-header">Secondary</div>
      <div class="card-body">
        <p class="card-text">A card with secondary background-color.</p>
      </div>
    </div>
    <div class="card text-bg-success mb-3" style="max-width: 18rem;">
      <div class="card-header">Success</div>
      <div class="card-body">
        <p class="card-text">A card with success background-color.</p>
      </div>
    </div>
    <div class="card text-bg-danger mb-3" style="max-width: 18rem;">
      <div class="card-header">Danger</div>
      <div class="card-body">
        <p class="card-text">A card with danger background-color.</p>
      </div>
    </div>
    <div class="card text-bg-warning mb-3" style="max-width: 18rem;">
      <div class="card-header">Warning</div>
      <div class="card-body">
        <p class="card-text">A card with warning background-color.</p>
      </div>
    </div>
    <div class="card text-bg-info mb-3" style="max-width: 18rem;">
      <div class="card-header">Info</div>
      <div class="card-body">
        <p class="card-text">A card with info background-color.</p>
      </div>
    </div>
    <div class="card text-bg-light mb-3" style="max-width: 18rem;">
      <div class="card-header">light</div>
      <div class="card-body">
        <p class="card-text">A card with light background-color.</p>
      </div>
    </div>
    <div class="card text-bg-dark mb-3" style="max-width: 18rem;">
      <div class="card-header">Dark</div>
      <div class="card-body">
        <p class="card-text">A card with dark background-color.</p>
      </div>
    </div>
  </body>
  </html>

邊框

透過使用 邊框實用工具，您可以更改卡片 border-color。請注意，.text-{color} 類可以放置在父 .card 或卡片內容的子集上，如下所示。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card border-primary mb-3" style="max-width: 18rem;">
      <div class="card-header">Primary</div>
      <div class="card-body text-primary">
        <p class="card-text">A card with primary border-color.</p>    
      </div>
    </div>
    <div class="card border-dark mb-3" style="max-width: 18rem;">
      <div class="card-header">Dark</div>
      <div class="card-body">
        <p class="card-text">A card with dark border-color.</p>
      </div>
    </div>
    <div class="card border-secondary mb-3" style="max-width: 18rem;">
      <div class="card-header">Secondary</div>
      <div class="card-body text-secondary">
        <p class="card-text">A card with secondary border-color.</p>    
      </div>
    </div>
    <div class="card border-light mb-3" style="max-width: 18rem;">
      <div class="card-header">Light</div>
      <div class="card-body">
        <p class="card-text">A card with light border-color.</p>
      </div>
    </div>
    <div class="card border-danger mb-3" style="max-width: 18rem;">
      <div class="card-header">Danger</div>
      <div class="card-body text-danger">
        <p class="card-text">A card with light border-color.</p>    
      </div>
    </div>
    <div class="card border-warning mb-3" style="max-width: 18rem;">
      <div class="card-header">Warning</div>
      <div class="card-body">
        <p class="card-text">A card with warning border-color.</p>    
      </div>
    </div>
    <div class="card border-success mb-3" style="max-width: 18rem;">
      <div class="card-header">Success</div>
      <div class="card-body text-success">
        <p class="card-text">A card with success  border-color.</p>    
      </div>
    </div>
    <div class="card border-info mb-3" style="max-width: 18rem;">
      <div class="card-header">Info</div>
      <div class="card-body">
        <p class="card-text">A card with info border-color.</p>
      </div>
    </div>
  </body>
  </html>

混合實用工具

您還可以更改卡片標題和頁尾邊框，如果您願意，可以使用 .bg-transparent 刪除背景顏色。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card border-info mb-3" style="max-width: 18rem;">
      <div class="card-header bg-transparent border-info">Card Header</div>
      <div class="card-body text-info">
        <h5 class="card-title">Info card title</h5>
        <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
      </div>
      <div class="card-footer bg-transparent border-info">Card Footer</div>
    </div>
  </body>
  </html>

卡片佈局

除了設定和自定義卡片中的內容外，Bootstrap 還提供了多種在系列中排列卡片的選項。目前，這些佈局選項沒有響應性。以下部分演示了這一點。

卡片組

卡片組將卡片呈現為單個附加元素，具有相同寬度和高度的列。卡片組是堆疊的。它們使用 display: flex; 從 sm 斷點開始以統一的尺寸附加。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card-group">
      <div class="card">
        <img src="\bootstrap\images\tutimg2.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          <p class="card-text"><small class="text-body-secondary">1 mins ago</small></p>
        </div>
      </div>
      <div class="card">
        <img src="\bootstrap\images\tutimg2.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          <p class="card-text"><small class="text-body-secondary">2 mins ago</small></p>
        </div>
      </div>
      <div class="card">
        <img src="\bootstrap\images\tutimg2.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          <p class="card-text"><small class="text-body-secondary">3 mins ago</small></p>
        </div>
      </div>
    </div>
  </body>
  </html>

使用帶有頁尾的卡片組，其內容會自動排列。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
   <title>Bootstrap - Card</title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
   <div class="card-group">
     <div class="card">
       <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
       </div>
       <div class="card-footer">
         <small class="text-body-secondary">1 mins ago</small>
       </div>
     </div>
     <div class="card">
       <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
       </div>
       <div class="card-footer">
         <small class="text-body-secondary">2 mins ago</small>
       </div>
     </div>
     <div class="card">
       <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
       </div>
       <div class="card-footer">
         <small class="text-body-secondary">3 mins ago</small>
       </div>
     </div>
   </div>
  </body>
  </html>

網格卡片

  • 使用 Bootstrap 網格 系統及其 .row-cols 類來控制每行顯示的網格列（圍繞卡片）的數量。

  • 例如，以下是 .row-cols-1 用於將卡片放在列中，以及 .row-cols-md-2 用於從中間斷點向上跨多行擴充套件 4 個相同寬度的卡片。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="row row-cols-1 row-cols-md-2 g-4">
      <div class="col">
        <div class="card">
          <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          </div>
        </div>
      </div>
    </div>
  </body>
  </html>

如果將其更改為 .row-cols-3，您將看到第 4 張卡片斷開。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="row row-cols-1 row-cols-sm-3 g-5">
      <div class="col">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content.A card is a flexible and extensible container for content</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          </div>
        </div>
      </div>
    </div>
  </body>
  </html>

當您希望卡片具有相同的高度時，請新增.h-100。如果您希望預設情況下卡片具有相同的高度，可以在 Sass 中設定$card-height: 100%。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="row row-cols-1 row-cols-sm-3 g-5">
      <div class="col">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content.A card is a flexible and extensible container for content</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          </div>
        </div>
      </div>
    </div>
  </body>
  </html>

與卡片組類似，卡片頁尾會自動排列。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="row row-cols-1 row-cols-sm-3 g-4">
      <div class="col">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          </div>
          <div class="card-footer">
            <small class="text-body-secondary">1 mins ago</small>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          </div>
          <div class="card-footer">
            <small class="text-body-secondary">2 mins ago</small>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          </div>
          <div class="card-footer">
            <small class="text-body-secondary">3 mins ago</small>
          </div>
        </div>
      </div>
    </div>
  </body>
  </html>
列印頁面
上一頁
下一頁
廣告