Bootstrap 4 Cards
卡片
Bootstrap 4 中的卡片是一個帶有邊框的框，其內容周圍有一些內邊距。它包括頁首、頁尾、內容、顏色等的選項。
基本卡片
基本卡片是透過 .card 類建立的，卡片內的內容具有 .card-body 類
如果您熟悉 Bootstrap 3，卡片將取代舊的面板、井和縮圖。
頁首和頁尾
.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-body 中的 <p> 元素是最後一個子元素（或唯一子元素），則使用 .card-text 類來移除底部的邊距。 .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="Card image">
<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>
自己動手試一試 »
拉伸連結
在卡片內的連結中新增 .stretched-link 類，它將使整個卡片可點選且可懸停（卡片將充當連結）
卡片圖片疊加
將圖片變成卡片背景，並使用 .card-img-overlay 在圖片上新增文字
示例
<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png" alt="Card image">
<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>
自己動手試一試 »
卡片列
第一個卡片中的一些文字
第二個卡片中的一些文字
第三個卡片中的一些文字
第四個卡片中的一些文字
第五個卡片中的一些文字
第六個卡片中的一些文字
.card-columns 類建立一個類似拼貼畫的卡片網格（類似於 Pinterest）。插入更多卡片時，佈局會自動調整。
注意：卡片在小螢幕（小於 576px）上垂直顯示
示例
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">第一個卡片中的一些文字</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">第二個卡片中的一些文字</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">第三個卡片中的一些文字</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">第四個卡片中的一些文字</p>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<p class="card-text">第五個卡片中的一些文字</p>
</div>
</div>
<div class="card bg-info">
<div class="card-body text-center">
<p class="card-text">第六個卡片中的一些文字</p>
</div>
</div>
</div>
自己動手試一試 »
卡片組
第一個卡片中的一些文字
更多文字以增加高度
更多文字以增加高度
更多文字以增加高度
第二個卡片中的一些文字
第三個卡片中的一些文字
第四個卡片中的一些文字
.card-deck 類建立一個**高度和寬度相等**的卡片網格。插入更多卡片時，佈局會自動調整。
注意：卡片在小螢幕（小於 576px）上垂直顯示
示例
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">第一個卡片中的一些文字</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">第二個卡片中的一些文字</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">第三個卡片中的一些文字</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">第四個卡片中的一些文字</p>
</div>
</div>
</div>
自己動手試一試 »
卡片分組
第一個卡片中的一些文字
更多文字以增加高度
更多文字以增加高度
更多文字以增加高度
第二個卡片中的一些文字
第三個卡片中的一些文字
第四個卡片中的一些文字
.card-group 類類似於 .card-deck。唯一的區別是 .card-group 類消除了每張卡片之間的左右邊距。
注意：卡片在小螢幕（小於 576px）上垂直顯示，**帶有**上下邊距
示例
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">第一個卡片中的一些文字</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">第二個卡片中的一些文字</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">第三個卡片中的一些文字</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">第四個卡片中的一些文字</p>
</div>
</div>
</div>
自己動手試一試 »
