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