Bootstrap 5 卡片
卡片
Bootstrap 5 中的卡片是一個帶邊框的盒子，內容四周有內邊距。它包括標題、頁尾、內容、顏色等選項。
基本卡片
基本卡片使用 .card 類建立，卡片內的內容具有 .card-body 類
基本卡片
標題和頁尾
Header
內容
使用 .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 為任何標題元素新增卡片標題。如果 .card-text 類是 .card-body 中的最後一個（或唯一一個）子元素，它將用於刪除底部的外邊距。 .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="img_avatar1.png" alt="卡片影像">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">一些示例文字。</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="img_avatar1.png" alt="卡片影像">
<div class="card-img-overlay">
<h4 class="card-title">John Doe</h4>
<p class="card-text">一些示例文字。</p>
<a href="#" class="btn btn-primary">檢視個人資料</a>
</div>
</div>
自己動手試一試 »
