建立 2024-01-01 更新 2026-09-15

卡片

卡片（card）是一塊帶邊框的內容容器，適合產品、文章摘要、個人介紹。對應官方 Card。

<div class="card" style="max-width: 18rem;">
  <img src="cover.jpg" 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／bottom：滿寬圖片
card-body：內距與文字
card-title、card-text、card-header、card-footer

多張卡片並排時，外包 row + col-*，或用 row-cols-md-3 讓同一列固定欄數。語意色可加在整張卡：text-bg-primary。

卡片

效果展示

推薦影音