Bootstrap5卡片組件：打造簡潔美觀的內容展示單元

在網頁設計中，我們經常需要將信息以整齊、美觀的方式呈現，比如產品列表、文章預覽、用戶資料等。Bootstrap5的卡片（Card）組件正是爲解決這類需求而生的——它就像一個個“信息盒子”，能把零散的內容（圖片、文字、按鈕等）有序地組織起來，同時支持響應式佈局，讓頁面在不同設備上都能完美展示。

一、卡片組件的基礎結構¶

卡片的核心是通過 .card 類創建的容器，內部可根據需求添加標題、文本、圖片、按鈕等內容。基礎結構如下：

<div class="card" style="width: 18rem;"> <!-- 外層卡片容器 -->
  <img src="..." class="card-img-top" alt="卡片圖片"> <!-- 頂部圖片 -->
  <div class="card-body"> <!-- 卡片主體內容區域 -->
    <h5 class="card-title">卡片標題</h5> <!-- 標題 -->
    <p class="card-text">這是一段卡片內的文本描述...</p> <!-- 正文文本 -->
    <a href="#" class="btn btn-primary">查看詳情</a> <!-- 按鈕 -->
  </div>
</div>

.card：卡片的“外殼”，所有內容都包裹在這個類中。
.card-img-top：讓圖片顯示在卡片頂部（也可用 .card-img-bottom 放底部，或 .card-img-overlay 疊加文字）。
.card-body：卡片的核心內容容器，用於放置標題、文本、按鈕等。
.card-title：卡片標題（字體較大，加粗）。
.card-text：卡片正文（自動調整行高，避免文本擁擠）。

二、卡片的核心組件與用法¶

卡片不僅能放簡單內容，還支持多種組件組合，讓內容更豐富。以下是常用組件及其用法：

1. 圖片與文字組合¶

圖片可通過 .card-img-top 直接放在頂部，或用 .card-img-overlay 讓文字疊加在圖片上（需配合絕對定位）：

<!-- 圖片在頂部 -->
<div class="card" style="width: 20rem;">
  <img src="product.jpg" class="card-img-top" alt="產品圖">
  <div class="card-body">
    <h5 class="card-title">無線耳機</h5>
    <p class="card-text">續航10小時，防水設計，支持快充...</p>
    <span class="badge bg-success">熱銷</span> <!-- 標籤 -->
  </div>
</div>

<!-- 文字疊加在圖片上 -->
<div class="card" style="width: 20rem; height: 250px;">
  <img src="bg.jpg" class="card-img-top" alt="背景圖">
  <div class="card-img-overlay d-flex flex-column justify-content-end">
    <h5 class="card-title text-white">旅行相冊</h5>
    <p class="card-text text-white-75">記錄美好瞬間</p>
  </div>
</div>

2. 列表與分隔線¶

若需展示列表（如產品參數、文章標籤），可使用 .list-group 類，並結合 .list-group-flush 去掉默認邊框：

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">產品參數</h5>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">尺寸：15.6英寸</li>
      <li class="list-group-item">分辨率：4K</li>
      <li class="list-group-item">重量：1.2kg</li>
    </ul>
  </div>
</div>

3. 按鈕與操作區¶

在卡片底部添加頁腳（.card-footer）或直接放按鈕，可用於引導用戶交互：

<div class="card" style="width: 18rem;">
  <img src="avatar.jpg" class="card-img-top" alt="用戶頭像">
  <div class="card-body">
    <h5 class="card-title">用戶信息</h5>
    <p class="card-text">姓名：張三 | 職位：前端開發</p>
  </div>
  <div class="card-footer bg-transparent">
    <a href="#" class="btn btn-outline-primary me-2">關注</a>
    <a href="#" class="btn btn-outline-secondary">私信</a>
  </div>
</div>

三、卡片的樣式與佈局¶

通過工具類可快速調整卡片的外觀和排列方式：

1. 控制卡片大小¶

用 width 或 max-width 自定義寬度，或直接使用Bootstrap尺寸類（如 .card-sm、.card-lg，需注意：Bootstrap5中尺寸類爲 .card-sm 等，但需結合自定義寬度，或通過工具類 col-* 控制）：

<div class="card col-md-4 mb-3"> <!-- 中等屏幕佔4列，底部留間距 -->
  <div class="card-body text-center">
    <h5 class="card-title">小卡片</h5>
    <p class="card-text">內容簡短，適合移動端展示</p>
  </div>
</div>

2. 對齊與陰影¶

陰影：通過 .shadow-sm（淺陰影）、.shadow（默認陰影）、.shadow-lg（深陰影）控制。
居中對齊：用 .text-center 讓卡片內文本居中，或 .d-flex justify-content-center 讓內容整體居中。

<div class="card shadow mb-4" style="max-width: 300px;">
  <div class="card-body text-center">
    <h5 class="card-title">居中卡片</h5>
    <p class="card-text">這是一段居中的文本內容...</p>
  </div>
</div>

3. 響應式排列卡片¶

使用 .row + .col-* 可實現多卡片的響應式佈局（小屏幕單列，中等屏幕多列）：

<div class="row row-cols-1 row-cols-md-3 g-4"> <!-- 小屏幕1列，中等屏幕3列，間距4 -->
  <div class="col">
    <div class="card h-100"> <!-- h-100佔滿父容器高度 -->
      <div class="card-body">
        <h5 class="card-title">卡片1</h5>
        <p class="card-text">內容1</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">卡片2</h5>
        <p class="card-text">內容2</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">卡片3</h5>
        <p class="card-text">內容3</p>
      </div>
    </div>
  </div>
</div>

四、綜合示例：打造產品展示卡片¶

以下是一個包含圖片、標題、價格、參數、按鈕的完整卡片示例：

<div class="card" style="max-width: 250px;">
  <img src="phone.jpg" class="card-img-top" alt="智能手機">
  <div class="card-body">
    <h5 class="card-title">XPhone 14</h5>
    <p class="card-subtitle mb-2 text-muted">2023年旗艦機型</p>
    <p class="card-text h4 text-primary fw-bold">¥4999</p> <!-- 突出價格 -->
    <p class="card-text small text-muted">6.7英寸全面屏 · 128GB存儲</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">芯片：驍龍8 Gen2</li>
    <li class="list-group-item">攝像頭：5000萬像素</li>
    <li class="list-group-item">電池：4500mAh</li>
  </ul>
  <div class="card-footer bg-transparent">
    <a href="#" class="btn btn-primary w-100">立即購買</a>
  </div>
</div>

五、注意事項¶

圖片處理：所有圖片需添加 alt 屬性（描述性文字），提升可訪問性；圖片用 img-fluid 類可自適應卡片寬度。
避免衝突：不要重複設置與Bootstrap工具類衝突的樣式（如不要給 .card 額外設置 border-radius，除非必須）。
佈局嵌套：卡片內可嵌套列表、按鈕組等，但需合理使用間距工具類（如 .mb-2、.mt-3）避免擁擠。

通過以上內容，你已掌握了Bootstrap5卡片組件的基礎用法。卡片的靈活性使其能適應各種場景，從簡單的信息展示到複雜的內容組合。接下來可嘗試自定義樣式，或結合JavaScript實現卡片的動態交互（如點擊展開詳情），進一步提升頁面體驗。