21.1 bootstrap 卡片介紹
Bootstrap的卡提供了一個靈活的、可擴展的內容容器，其中包含多種變體和選項?？ㄆ辉O計成盡可能的少用一些標記和樣式，它們可以更方便的對齊，并與其它的Bootstrap元件良好混合。預設中它并沒有margin，所以可以依需求加入spacing通用類別。
以下是一個具有混合內容和固定寬度的基本卡片示例?？ㄆ绻麤]有固定的寬度，那么它們將自然填充其父元素的全部寬度。這可以透過我們的各種縮放選項輕松調整。下面是一個簡單的例子。
<div class="card" style="width: 18rem;">
<img src="../pic/5.jpg" class="card-img-top" alt="卡片的圖片寬度會自動設置">
<div class="card-body">
<h5 class="card-title">卡片標題</h5>
<p class="card-text">卡片的內容可以使用文本、列表、表格、表單、圖片等各種html元素</p>
<a href="#" class="btn btn-primary">這是一個按鈕</a>
</div>
</div>
復制代碼21.2 卡片的結構
21.2.1 完整的卡片結構示例
一般情況下，我們無須完整的卡片結構就可以很好的使用一個卡片組件，如上例所示，一個完整的卡片包括頁眉、頁腳、圖片（此處指的是頁眉下面的圖片，與卡片同寬度）、主體、列表群組五部分，其中主體可包含標題和文本。 下面是一個內容俱全的示例，事實上，一般情況下我們根據需要使用卡片的一兩個元素就夠用了，下面示例僅是演示，后面我們會逐一講解各個部分功能。
<div class="card" style="width: 18rem;">
<div class="card-header">
卡片頁眉
</div>
<img src="../pic/5.jpg" class="card-img-top" alt="卡片的圖片寬度會自動設置">
<div class="card-body">
<h5 class="card-title">卡片標題</h5>
<p class="card-text">卡片的內容可以使用文本、列表、表格、表單、圖片等各種html元素
<img src="../pic/7.jpg" class="card-img-top" alt="卡片主體內的圖片">
</p>
<a href="#" class="btn btn-primary">這是一個按鈕</a>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">列表元素</li>
<li class="list-group-item">列表元素</li>
<li class="list-group-item">列表元素</li>
</ul>
<div class="card-footer text-muted">
卡片頁腳
</div>
</div>
復制代碼21.2.1 卡片的頁眉和頁腳
頁眉和頁腳不是必要的，與其他內容相比，頁眉和頁腳文字顏色較淺，字體略小。另外還可以通過通用類來調整其對齊方式，靈活使用可以達到很多特殊的效果。
21.2.1.1 簡單卡片
<div class="card">
<h5 class="card-header">通知</h5>
<div class="card-body">
<h5 class="card-title">中秋節放假通知</h5>
<p class="card-text">下周中秋節放假7天，給大家樂活以下.........</p>
<a href="#" class="btn btn-primary">了解詳情</a>
</div>
</div>
復制代碼21.2.1.2 使用引用用于名人名言
<div class="card">
<div class="card-header">
名言
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>只有詩人同圣徒才會堅信，在瀝青路面上辛勤澆水會培植出百合花來。</p>
<footer class="blockquote-footer">威廉· 薩默賽特·毛姆的 <cite title="Source Title">《月亮和六便士》</cite></footer>
</blockquote>
</div>
</div>
復制代碼21.2.1.3 頁眉頁腳一起使用
<div class="card text-center">
<div class="card-header">
名著推薦
</div>
<div class="card-body">
<h5 class="card-title">《紅樓夢》</h5>
<p class="card-text">
《紅樓夢》是一部具有世界影響力的人情小說作品，舉世公認的中國古典小說巔峰之作，
中國封建社會的百科全書，傳統文化的集大成者。小說以賈、史、王、薛四大家族的興衰為背景，
以賈府的家庭瑣事、閨閣閑情為脈絡，以賈寶玉、林黛玉、薛寶釵的愛情婚姻故事為主線，
刻畫了以賈寶玉和金陵十二釵為中心的正邪兩賦有情人的人性美和悲劇美。
通過家族悲劇、女兒悲劇及主人公的人生悲劇，揭示出封建末世危機。
</p>
<a href="#" class="btn btn-primary">馬上閱讀</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
復制代碼21.2.2 圖像的使用
21.2.2.1 圖像在頂部或在底部
圖像通過類card-img-top或card-img-bottom，設置顯示在卡片的頂部還是底部，下面是兩個卡片，一個圖片在上，一個圖片在下。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>卡片</title>
</head>
<body>
<div class="container">
<br><br><br>
<div class="card mb-2">
<img src="../pic/5.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">軟發布 Win11 </h5>
<p class="card-text">T
微軟已宣布將于 6 月 24 日舉行“What's next for Windows”活動，屆時將發布下一代桌面操作系統 Win11 及其應用商店等內容。
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">飛利浦推出4K顯示器</h5>
<p class="card-text">飛利浦推出 Momentum 4K 電競顯示器：專為 Xbox 設計，售價過萬
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img src="../pic/7.jpg" class="card-img-bottom" alt="...">
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復制代碼21.2.2.2 圖像作為卡片背景
將圖片轉換為卡片背景，并疊加卡片的文字。根據圖片，你可以選擇是否需要額外的樣式或通用類別。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>卡片</title>
</head>
<body>
<div class="container">
<br><br><br>
<div class="card card bg-dark text-white">
<img src="../pic/7.jpg" class="card-img" alt="...">
<div class="card-body card-img-overlay">
<h5 class="card-title">微軟發布 Win11 </h5>
<p class="card-text">
微軟已宣布將于 6 月 24 日舉行“What's next for Windows”活動，屆時將發布下一代桌面操作系統 Win11 及其應用商店等內容。
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復制代碼注意，我們通過bg-dark給卡片添加了一個黑色背景，text-white設置字體為白色，在card-body中設置card-img-overlay為背景色。也可以不要card-body，直接用card-img-overlay"如上。
21.2.2.3 圖像在左側
結合使用網格以及通用類，可以讓卡片以響應式的方法呈現水平狀態。在下面的示例中，我們使用g-0移除網格的間隙，并使用col-md-*類別讓卡片在md斷點之后呈現水平。根據卡片內容，將可能會需要一些額外的調整。
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="../pic/3.jpg" alt="..." class="w-100">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">春夏秋冬皆自然</h5>
<p class="card-text">
春夏秋冬皆自然,明月清風共我閑,有春風拂面的溫柔,也有美好故事的發生,又一個春天如約而至,溫柔的朝陽里布谷鳥聲聲呼喚,愿普天同安康,迎接春天到來的簡...
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
復制代碼當然，你最好設置一下圖片寬度，否則容易發生溢出。
21.2.3 卡片的主體
21.2.3.1 標題和副標題
卡片的構造塊是.card-body。當你需要卡片中的填充部分時就使用它。
- 在
<h*>標簽中添加card-title以使用卡片標題。 - 在
<h*>標簽中加入card-subtitle以使用副標題。
如果card-title以及card-subtitle元件被放在card-body里面，它們將會對齊良好。
21.2.3.2 文本內容和鏈接
文本內容可以放置任何html元素和bootstrap的組件，如按鈕等，在a標簽中加入card-link并使連接彼此相鄰。
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">微軟發布 Win11</h5>
<h6 class="card-subtitle mb-2 text-muted">科技動態</h6>
<p class="card-text">
微軟已宣布將于 6 月 24 日舉行“What's next for Windows”活動，屆時將發布下一代桌面操作系統 Win11 及其應用商店等內容。
</p>
<a href="#" class="card-link">了解詳情</a>
<a href="#" class="card-link">下載試用</a>
</div>
</div>
復制代碼21.2.4 列表群組
列表群組使用非常簡單
<div class="card" style="width: 18rem;">
<div class="card-header text-center">
晚會活動
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">歌舞</li>
<li class="list-group-item">男生獨唱</li>
<li class="list-group-item">小品</li>
</ul>
</div>
復制代碼21.2.5 混合樣式
混合并搭配多個內容形式，用來創建你所需要的卡片。以下示例將圖片樣式、塊、文字樣式以及列表群組全部包裝在一個固定寬度的卡片中。
<div class="card" style="width: 18rem;">
<img src="../pic/cap.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
復制代碼21.3 卡片的排版及寬度
卡片預設沒有特定的起始width，除非另有聲明，否則它們的寬度將是100%。
21.3.1 使用網格
使用網格，根據需要在列和行中包裝卡片。需要注意的是卡片默認是每個卡片一行的，要想一行中顯示多個卡片，必須把幾個卡片放在一個div容器中且每行中的卡片總寬度不能超過屏幕寬度。網格中的row-cols-*同樣適用卡片。另外卡片默認是寬度相同，高度根據內容自動調整的，但是如果卡片擁有頁腳，則高度會自動調整到相同。
下面給出一個完整例子。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>卡片</title>
</head>
<body>
<div class="container">
<br><br><br>
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">微軟發布 Win11</h5>
<p class="card-text">
軟已宣布將于 6 月 24 日舉行“What's next for Windows”活動，屆時將發布下一代桌面操作系統 Win11 及其應用商店等內容。
</p>
<a href="#" class="btn btn-primary">了解詳情</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">飛利浦推出4K顯示器</h5>
<p class="card-text">
飛利浦推出 Momentum 4K 電競顯示器：專為 Xbox 設計，售價過萬
</p>
<a href="#" class="btn btn-primary">了解詳情</a>
</div>
</div>
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復制代碼21.3.2 使用通用類
使用可調整寬度大小的通用類來快速設置卡片的寬度。
使用網格
使用網格，根據需要在列和行中包裝卡片。<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>卡片</title>
</head>
<body>
<div class="container">
<br><br><br>
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">微軟發布 Win11</h5>
<p class="card-text">
軟已宣布將于 6 月 24 日舉行“What's next for Windows”活動，屆時將發布下一代桌面操作系統 Win11 及其應用商店等內容。
</p>
<a href="#" class="btn btn-primary">了解詳情</a>
</div>
</div>
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">飛利浦推出4K顯示器</h5>
<p class="card-text">
飛利浦推出 Momentum 4K 電競顯示器：專為 Xbox 設計，售價過萬
</p>
<a href="#" class="btn btn-primary">了解詳情</a>
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復制代碼需要注意的是，這里的寬度值必須是預定的，預設包含25%，50%，75%，100%和auto，而不是隨意寫的。 詳情見 Bootstrap5中文手冊 通用類 尺寸（Sizing）一節。
21.3.3 使用自定義CSS
在樣式表中使用自定義的CSS或使用行內樣式設置寬度，這種方式比較靈活，可以使用rem、px、百分比。
使用網格
使用網格，根據需要在列和行中包裝卡片。<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>卡片</title>
</head>
<body>
<div class="container">
<br><br><br>
<div class="card" style="width: 30rem;">
<div class="card-body">
<h5 class="card-title">微軟發布 Win11</h5>
<p class="card-text">
軟已宣布將于 6 月 24 日舉行“What's next for Windows”活動，屆時將發布下一代桌面操作系統 Win11 及其應用商店等內容。
</p>
<a href="#" class="btn btn-primary">了解詳情</a>
</div>
</div>
<div class="card" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">飛利浦推出4K顯示器</h5>
<p class="card-text">
飛利浦推出 Momentum 4K 電競顯示器：專為 Xbox 設計，售價過萬
</p>
<a href="#" class="btn btn-primary">了解詳情</a>
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復制代碼21.3.4 卡片中的文本對齊
可以透過文字對齊類別更改任何卡片的整體或特定部分的文本對齊方式。默認全部是局左（text-start）對齊的，可以用card-text、text-end通用類使之居中對齊或居右對齊。通用類可用在card容器，也可以單獨以用在標題、頁眉頁腳、主體等任意部分，如果同時使用，則單獨的覆蓋整體的。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>卡片</title>
</head>
<body>
<div class="container">
<br><br><br>
<div class="row">
<div class="col-sm-4">
<div class="card text-center">
<div class="card-header">
整體居中
</div>
<div class="card-body">
<h5 class="card-title">微軟發布 Win11</h5>
<p class="card-text">
軟已宣布將于 6 月 24 日舉行“What's next for Windows”活動，屆時將發布下一代桌面操作系統 Win11 及其應用商店等內容。
</p>
<a href="#" class="btn btn-primary">了解詳情</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-header text-center"">
頁眉、標題居中
</div>
<div class="card-body">
<h5 class="card-title text-center">微軟發布 Win11</h5>
<p class="card-text">
軟已宣布將于 6 月 24 日舉行“What's next for Windows”活動，屆時將發布下一代桌面操作系統 Win11 及其應用商店等內容。
</p>
<a href="#" class="btn btn-primary">了解詳情</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card text-center">
<div class="card-header">
整體居中中標題居左
</div>
<div class="card-body">
<h5 class="card-title text-start">微軟發布 Win11</h5>
<p class="card-text">
軟已宣布將于 6 月 24 日舉行“What's next for Windows”活動，屆時將發布下一代桌面操作系統 Win11 及其應用商店等內容。
</p>
<a href="#" class="btn btn-primary">了解詳情</a>
</div>
</div>
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復制代碼21.4 帶選項卡的卡片
使用Bootstrap的導航組件在卡片的頁首（或塊）添加一些導航，獲得選項卡效果。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>卡片</title>
</head>
<body>
<div class="container">
<br><br><br>
<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" aria-current="true" href="#" data-bs-toggle="tab" data-bs-target="#nav-hot">熱門新聞</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#" data-bs-toggle="tab" data-bs-target="#nav-home">國內新聞</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">國外新聞</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="card-body tab-pane fade" id="nav-hot">
<h5 class="card-title">熱點新聞</h5>
<p class="card-text">熱點新聞</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-body tab-pane fade show active" id="nav-home">
<h5 class="card-title">國內新聞</h5>
<p class="card-text">國內熱點新聞</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復制代碼對于上面的代碼，只需經過兩處替換，就可以換為膠囊導航
<ul class="nav nav-tabs card-header-tabs">
復制代碼替換為
<ul class="nav nav-pills card-header-pills">
復制代碼所有的
data-bs-toggle="tab"
復制代碼替換為
data-bs-toggle="pill"
復制代碼21.5 卡片樣式
卡片包含許多用來自定義背景、邊框、顏色的選項。
21.5.1 背景和顏色
使用文字和背景通用類別來改變卡片的外觀。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>卡片</title>
</head>
<body>
<div class="container">
<br><br><br>
<div class="d-flex">
<div class="card text-white bg-primary" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary</h5>
<p class="card-text">顏色直接作用于card容器上</p>
</div>
</div>
<div class="card text-white bg-secondary" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary</h5>
<p class="card-text">顏色直接作用于card容器上</p>
</div>
</div>
<div class="card text-white bg-success" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success</h5>
<p class="card-text">顏色直接作用于card容器上</p>
</div>
</div>
<div class="card text-white bg-danger" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger</h5>
<p class="card-text">顏色直接作用于card容器上</p>
</div>
</div>
</div>
<div class="d-flex">
<div class="card text-dark bg-warning" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning</h5>
<p class="card-text">顏色直接作用于card容器上</p>
</div>
</div>
<div class="card text-dark bg-info" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info</h5>
<p class="card-text">顏色直接作用于card容器上</p>
</div>
</div>
<div class="card text-dark bg-light" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light</h5>
<p class="card-text">顏色直接作用于card容器上</p>
</div>
</div>
<div class="card text-white bg-dark" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark</h5>
<p class="card-text">顏色直接作用于card容器上</p>
</div>
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復制代碼21.5.2 邊框和顏色
<div class="d-flex">
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">頁眉</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary 卡片標題</h5>
<p class="card-text">card-text 卡片文字內容</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">頁眉</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary 卡片標題</h5>
<p class="card-text">card-text 卡片文字內容</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">頁眉</div>
<div class="card-body text-success">
<h5 class="card-title">Success 卡片標題</h5>
<p class="card-text">card-text 卡片文字內容</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">頁眉</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger 卡片標題</h5>
<p class="card-text">card-text 卡片文字內容</p>
</div>
</div>
</div>
<div class="d-flex">
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">頁眉</div>
<div class="card-body">
<h5 class="card-title">Warning 卡片標題</h5>
<p class="card-text">card-text 卡片文字內容</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">頁眉</div>
<div class="card-body">
<h5 class="card-title">Info 卡片標題</h5>
<p class="card-text">card-text 卡片文字內容</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">頁眉</div>
<div class="card-body">
<h5 class="card-title">Light 卡片標題</h5>
<p class="card-text">card-text 卡片文字內容</p>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">頁眉</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark 卡片標題</h5>
<p class="card-text">card-text 卡片文字內容</p>
</div>
</div>
</div>
復制代碼限于篇幅，僅展示前面一部分邊框圖片。
21.5.2 Mixin通用類
也可以依照需求更改卡片頁首、頁尾的邊框，并能使用bg-transparent來移除它們的background-color。
<div class="card border-success mb-3" style="max-width: 26rem;">
<div class="card-header bg-transparent border-success">頁眉</div>
<div class="card-body text-success">
<h5 class="card-title">Success卡片標題</h5>
<p class="card-text">
注意card-body使用了 text-success"，頁腳使用了bg-transparent border-success
</p>
</div>
<div class="card-footer bg-transparent border-success">頁腳</div>
</div>
復制代碼今天的課程就到這里，請關注我，及時學習 俺老劉原創的《Bootstrap5零基礎到精通》第22節 Bootstrap5 Carousel 圖片輪播組件用法。
如果這篇文章對你有幫助，記得隨手點贊哦！