Bootstrap 卡片是組織和呈現網頁項目內容的重要工具。它們提供了一種簡單而多功能的方式，能夠創建視覺上吸引人的佈局，並且能夠無縫調整到不同的設備中。通過本文，您將了解如何在您的項目中有效使用 Bootstrap 卡片組件。
為什麼選擇 Bootstrap？
Bootstrap 仍然是構建響應式和以移動為首的網頁佈局最受歡迎的框架之一。其主要優勢包括：
- 快速簡便的響應式設計：您只需要基本的 HTML 和 CSS 知識即可創建驚人的佈局。
- 以移動為首的方法：Bootstrap 從一開始就優先考慮移動設備的響應性。
- 瀏覽器兼容性：它在所有主要瀏覽器中運行流暢。
- 基於 Flexbox 的網格系統：簡化了對齊和間距的任務。
- 豐富的組件：各種可重用的元素，如按鈕、模態框和卡片。
最新版本的 Bootstrap 引入了重要的改進，例如對 Flexbox 的支持和多功能的 卡片組件，該組件取代了舊的面板和縮略圖組件。
關鍵要點
Bootstrap 卡片是創建有組織、響應式佈局的多功能工具。它們允許您在時尚的容器內顯示各種類型的內容，如文本、圖像和多媒體。以下是一些使它們對開發者不可或缺的關鍵特點：
- 易於使用：您可以通過結合元素如 div class=”card-body” 來快速創建卡片，這定義了內容區域，以及 p class=”card-text”，文本信息所在的地方。
- 支援多種內容類型：添加 卡片標題、圖像或列表組以有效地結構您的內容。
- 響應式設計：使用 Bootstrap 的網格和斷點，卡片可以適應任何設備大小——從手機到桌面。
- 可自定義設計：工具類可以讓您調整外觀，包括顏色、邊框和文本對齊。
- 高級佈局：像卡片組、甲板和磚石佈局等功能使對齊和組織變得無縫。
什麼是 Bootstrap 卡片組件？
Bootstrap 引入了一個多功能且現代的 UI 組件，稱為 卡片，它們作為靈活且時尚的容器，用於顯示各種類型的內容。由於默認樣式簡單，Bootstrap 卡片可以輕鬆地使用其廣泛的工具類進行增強。
這個組件是建立在 Flexbox 之上的，可以精確對齊和間距。開發者可以使用 Bootstrap 的間距工具 有效地控制邊距和填充。
卡片可以方便地容納不同類型的內容，如標題、副標題、正文和圖像等，還可以選擇性地包含標頭和頁腳部分。您還可以包含不同的部分（卡片區塊）來構建不同類型的卡片，根據您的使用情況。
關鍵的 Bootstrap 卡片類
以下是主要的 Bootstrap 卡片實用類，以及它們的用途：
- card: 定義卡片組件的主容器類。
- card-body: 在卡片內部創建主要內容區域。
- card-title: 為卡片的標題添加樣式，通常與像 <h5> 這樣的標題標籤一起使用。
- card-text: 用於卡片內的標準文本內容。
- card-header: 在卡片頂部添加樣式化的標頭部分。
- card-footer: 在卡片底部添加樣式化的頁腳部分。
- card-img-top: 將圖像放在卡片的頂部。
- card-img-bottom: 將圖像放在卡片的底部。
- list-group: 在卡片內創建一個列表組。
- list-group-item: 為列表組中的個別項目添加樣式。
- card-group: 將多個卡片以相等的寬度和高度組合在一起。
- card-deck: 對齊多個卡片並添加間距，在 Bootstrap 5 中已被棄用。
- text-*: 文字顏色樣式的實用類（例如，text-primary、text-success）。
- bg-*: 背景顏色樣式的實用類（例如，bg-light、bg-dark）。
這個簡潔的概述列出了用於構建和自定義 Bootstrap 卡片的基本類。
如何在您的項目中包含 Bootstrap
您可以通過從內容傳遞網絡（CDN）中包含 Bootstrap 或從 getbootstrap.com 下載必要的文件，輕鬆地在您的項目中開始使用 Bootstrap。
在這個示例中，我們將演示如何使用 CDN 設置一個簡單的 HTML 頁面，以包含 Bootstrap 卡片組件。使用這種方法，您可以快速創建和設計卡片，而無需進行額外的配置。
按照以下步驟創建您的 index.html 文件並包含 Bootstrap 5.3.3：
<!doctype html>
<html lang="en">
<head>
<!-- 必需的 meta 標籤 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<title>Bootstrap Card Example</title>
</head>
<body>
<div class="container mt-5">
<div class="card" style="width: 18rem;">
<div class="card-header bg-primary text-white">
Example Card Header
</div>
<div class="card-body">
<h5 class="card-title">Example Card Title</h5>
<p class="card-text">This is an example card created using Bootstrap 5. It includes styling for the
header, title, and text.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<!-- 包含 Popper 的 Bootstrap Bundle -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>我們通過 CDN 包含了 Bootstrap 文件，確保最新的框架版本始終可用。增加了一個容器區域作為您內容的基礎，讓您能夠立即使用 Bootstrap 卡片組件開始構建。
欲了解更多詳細資訊，您可以探索 入門範本文檔。
創建基本的 Bootstrap 卡片
要創建一個簡單的卡片，請按照以下步驟操作：
- 使用 .card 類與 <div> 標籤來創建外部容器。
- 將 .card-body 類添加到內部 <div> 標籤中以定義卡片主體。
- 使用 .card-title 和 .card-subtitle 類與標題標籤（<h5> 和 <h6>）來添加卡片標題和副標題。
- 使用 .card-text class 與 <p> 標籤來包含文本內容。
- 使用 .card-img-top 類與 <img> 標籤來在卡片頂部添加圖片。
這些是基本卡片佈局的基本構建塊。這裡有一個示例：
<div class="card" style="width: 30rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
<p class="card-text">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>這段代碼生成了一個包含圖片、標題、副標題、文本和按鈕的卡片，並且除非使用 style=”width: 30rem;” 屬性另行指定，否則它將根據其父容器的寬度自動調整。
這是結果的截圖：
在 Bootstrap 中的橫向卡片
橫向卡片允許您以並排的佈局顯示內容，使其非常適合緊湊且有組織的設計。您可以使用網格類來創建它們，以實現響應式行為，確保卡片在所有設備上看起來都很棒。
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="https://picsum.photos/id/0/800" class="img-fluid rounded-start" alt="Image">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is a card with text beside an image, perfect for showcasing content
side-by-side.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>這是結果的截圖：
在 Bootstrap 卡片中的列表組
Bootstrap 允許您通過包含列表組來增強您的卡片，使顯示結構化和有組織的內容變得更容易。list-group 和 list-group-flush 類無縫集成在卡片中，使開發者能夠創建視覺上吸引人的列表。
這是如何創建帶有無邊緣列表組的卡片：
<div class="card" style="width: 18rem;">
<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>
增強卡片功能
添加標題和頁腳
您可以通過使用 .card-header 和 .card-footer 類來增強您的卡片，這是一個示例：
<div class="row">
<div class="col-sm-3">
<div class="card">
<div class="card-header">
This is a header
</div>
<img class="card-img-top" src="https://source.unsplash.com/daily" alt="Card image top">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<h4 class="card-subtitle">Card subtitle</h4>
<p class="card-text">This is a simple Card example</p>
</div>
<div class="card-footer">
This is a footer
</div>
</div>
</div>
</div> 這是結果的截圖：
這種佈局為卡片增加了更多的背景，帶有樣式化的標題和頁腳。
在圖片上覆蓋文本
使用 .card-img-overlay 在圖片上覆蓋內容。只需將 card-body 類切換為 card-img-overlay 類，我們就可以使用圖片作為覆蓋：
<div class="card" style="width: 30rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
<div class="card-img-overlay">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
<p class="card-text">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>這是結果的截圖：
添加卡片圖片標題
在卡片的頂部或底部添加圖片，可使用 .card-img-top或 .card-img-bottom。
<div class="card" style="width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<p class="card-text">This card has an image cap at both the top and bottom.</p>
</div>
<img src="https://picsum.photos/id/0/800" class="card-img-bottom" alt="Card image bottom">
</div>以下是結果的截圖：
卡片的頂部和底部圖片被稱為圖像標題。
使用Bootstrap卡片實現響應式設計
響應式設計可確保您的卡片在所有設備上顯示出色。使用Bootstrap網格系統來控制佈局。
代碼示例
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
<p class="card-text">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/85/800" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
<p class="card-text">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>以下是結果的截圖：
調整Bootstrap卡片的高度和寬度
要為卡片設置特定寬度，您可以使用style屬性或Bootstrap的實用類。以下是示例：
<div class="card" style="width: 10rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is a simple card example with a custom width.</p>
</div>
</div>以下是結果的截圖：
此卡片的寬度限制為10rem，可以根據您的設計需求進行調整。
通常，卡片的高度將根據卡片內容的垂直適應，但我們也可以使用自定義CSS（例如，style=”height: 10rem;”）或Bootstrap的尺寸工具（例如，<div class=”card h-200″>）來控制它。
請注意，最新版本的Bootstrap已經從px單位切換為rem單位，因為rem是一種可擴展的測量單位 — 因此它與用戶設置更好配合，這使得文字更更容易訪問。結果是頁面中的所有元素將隨螢幕大小縮放。
您可以在SitePoint的“Bootstrap: 超智能功能讓您愛不釋手”文章中了解更多關於Bootstrap的新功能。
使用網格系統來控制寬度
控制Bootstrap卡片元件寬度的另一個選項是使用Bootstrap網格（行和列）：
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is an example card using the grid system.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Another Card</h5>
<p class="card-text">This card sits next to the first one.</p>
</div>
</div>
</div>
</div>這是結果的螢幕截圖：
在此示例中，兩張卡片並排顯示，每張卡片在中等和更大螢幕上各佔四列（col-md-4）。
卡片樣式
Bootstrap提供各種自定義卡片的選項，包括背景顏色、邊框和文字樣式。
背景和文字顏色
您可以使用效用類（如.bg-primary或.text-white）來更改卡片的背景和文字顏色。
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body">
<h5 class="card-title">Primary Card Title</h5>
<p class="card-text">Quick text to demonstrate card styling.</p>
</div>
</div>邊框顏色
使用 .border-{color} 类自定义卡片的边框颜色。卡片内的文本也可以使用 .text-{color} 进行样式设置。
<div class="card border-success mb-3" style="max-width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body text-success">
<h5 class="card-title">Success Card Title</h5>
<p class="card-text">Simple content styled with a border.</p>
</div>
</div>透明标题和页脚
使用 .bg-transparent 去除标题和页脚的背景颜色，并自定义它们的边框。
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-info">Header</div>
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body text-info">
<h5 class="card-title">Info Card Title</h5>
<p class="card-text">Example content inside a card.</p>
</div>
<div class="card-footer bg-transparent border-info">Footer</div>
</div>混合背景和边框
结合背景和边框工具，实现独特的样式。
<div class="card bg-light border-dark mb-3" style="max-width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body text-dark">
<h5 class="card-title">Mixed Style Card</h5>
<p class="card-text">Custom card combining background and border.</p>
</div>
</div>以下是在单行布局中展示四种不同卡片样式的结果：
Bootstrap让您创建具有不同标题样式的卡片
- “主标题卡片标题”用于主要部分
- “浅色卡片标题”用于微妙设计
- “次要卡片标题”用于带有支持文本的卡片
- “深色卡片标题”用于突出外观
- “成功卡片标题”用于正面消息
- “危险卡片标题”用于警告。
有了这些多功能的卡片样式选项，您还可以创建独特的设计，如“警告卡片标题”，“信息卡片标题”，以突出关键信息或无缝引起对特定细节的注意。
添加导航
Bootstrap卡片组件的另一个不错的功能是可以向标题部分添加高级导航模式，如选项卡和导航丸。
向卡片标题添加选项卡
要在卡片標題中包含選項卡，請在無序列表（
- ）上使用.nav-tabs和.card-header-tabs類。這是一個例子：
<div class="card" style="width: 30rem;">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab 2</a>
</li>
</ul>
</div>
<div class="card-body">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<h5 class="card-title pt-3">Card with Tabs</h5>
<p class="card-text">This card includes a tabbed navigation element in its header.</p>
</div>
</div>這是結果的截圖：
在卡片標題中添加Pills
同樣地，我們可以通過在
- 標籤上簡單地將.nav-tabs替換為.nav-pills和.card-header-tabs替換為.card-header-pill來添加導航Pills：
<div class="card" style="width: 30rem;">
<div class="card-header">
<ul class="nav nav-pills card-header-pill">
<li class="nav-item">
<a class="nav-link active" href="#">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab 2</a>
</li>
</ul>
</div>
<div class="card-body">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<h5 class="card-title pt-3">Card with Tabs</h5>
<p class="card-text">This card includes a pill-style navigation element in its header.</p>
</div>
</div>這是結果的截圖：
您可以在Bootstrap導航組件文檔中找到更多信息關於此
將鏈接添加到Bootstrap卡片組件
我們可以快速使用帶有card-link類的標籤在卡片內部添加鏈接：
<div class="card">
<div class="card-body">
<h3 class="card-title">Adding Links</h3>
<p class="card-text">These are simple links</p>
<a href="#" class="card-link">Link 1</a>
<a href="#" class="card-link">Link 2</a>
</div>
<div class="card-footer">
This is a footer
</div>
</div>這是結果的截圖：
在Bootstrap卡片組件中對齊和轉換文本
Bootstrap提供文本對齊和轉換的文本功能類，用於卡片組件內部的文本對齊，您可以使用以下類：
- .text-start用於卡片文本左對齊
- .text-end用於卡片文本右對齊
- .text-center用於卡片文本居中對齊
- .text-justify用於卡片文本分散對齊（適用於舊版本，在Bootstrap 5中已棄用）
- .text-nowrap 用於防止文字自動換行
您還可以使用以下類別轉換文字：
- .text-lowercase 將文字轉換為小寫
- .text-uppercase 將文字轉換為大寫
- .text-capitalize 將每個單詞的第一個字母大寫
自定義 Bootstrap 卡片元件的背景、前景和邊框顏色
您可以使用文字和背景效用類別自定義 Bootstrap 卡片的背景、文字和邊框顏色。以下是一些示例：
- 文字顏色：使用 .text-primary、.text-success、.text-danger、.text-warning、.text-info、.text-light、.text-dark 或 .text-white 來更改文字顏色。
- 背景顏色：使用 .bg-primary、.bg-success、.bg-danger、.bg-warning、.bg-info、.bg-light、.bg-dark 或 .bg-white 來更改背景顏色。
- 邊框顏色：使用 .border-primary、.border-success、.border-danger、.border-warning、.border-info、.border-light、.border-dark 或 .border-white 來設定邊框顏色樣式。
下面的 CodePen 示範展示了我們可以使用 Bootstrap 創建的各種不同類型的卡片。請隨意進行自己的實驗：
使用 Bootstrap 卡片元件創建高級佈局
Bootstrap 卡片是一個多功能的 UI 元件，在現代網頁佈局中被廣泛使用，可用於顯示混合內容類型（如文字和圖像），可以作為單個實體或分組集合。
卡片在響應式設計中特別有用，常見的使用方式是像瀑布流佈局，也被稱為類似Pinterest的佈局。
卡片可用於創建圖片庫、博客文章或電子商務產品的佈局。Google和Facebook等主要平台廣泛使用卡片來組織和展示其網絡應用程序上的內容。
以前，要構建這樣的高級佈局需要對CSS和HTML有深入的了解。然而，借助Bootstrap的最新功能，開發人員可以輕鬆地創建響應式且視覺上吸引人的基於卡片的佈局。
像.card-group、.card-deck和.card-columns等類別簡化了以一致的樣式和對齊方式組織卡片的過程。
卡片的分組/嵌套
卡片組在Bootstrap中是顯示多個卡片組件作為單個附加實體並具有統一寬度和高度的有效方式。
通過使用display: flex;屬性實現此佈局，確保所有卡片對齊完美。這對響應式設計和現代網頁佈局特別有用，其中一致的卡片尺寸至關重要。
要創建一組卡片，請使用.card-group類作為包含個別卡片的包裝器div。
這是一個展示三個卡片組的示例：
<div class="card-group">
<div class="card text-white">
<img class="card-img-top" src="https://source.unsplash.com/featured/" alt="Card image top">
<div class="card-img-overlay">
<div class="card-group">
<div class="card text-white">
<img class="card-img-top" src="https://picsum.photos/id/475/800" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card Title 1</h3>
<h4 class="card-subtitle">Card Subtitle</h4>
<p class="card-text">This is an example of a grouped card.</p>
</div>
</div>
<div class="card text-white">
<img class="card-img-top" src="https://picsum.photos/id/58/800" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card Title 2</h3>
<h4 class="card-subtitle">Card Subtitle</h4>
<p class="card-text">Grouped cards ensure uniform styling.</p>
</div>
</div>
<div class="card text-white">
<img class="card-img-top" src="https://picsum.photos/id/75/800" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card Title 3</h3>
<h4 class="card-subtitle">Card Subtitle</h4>
<p class="card-text">They are responsive and visually appealing.</p>
</div>
</div>
</div>這是結果的截圖:
可以看到，這三張卡片是相連的，且具有相同的寬度和高度。
卡片組
在較早版本的Bootstrap中，使用.card-deck來建立卡片佈局，其中卡片具有相同的寬度和高度，但彼此不相連。然而，在Bootstrap 5中，建議使用網格系統來達到這個目的。這種方法提供了更大的靈活性和響應性。
要實現類似的佈局，可以使用.row類與.col來控制卡片的間距和對齊。以下是一個示例：
<div class="row row-cols-1 row-cols-md-3 g-4">
如我們所見，這些卡片大小相同，之間有一些間距。
卡片列
在Bootstrap的早期版本中，使用.card-columns類來創建類似Masonry的佈局，其中卡片從上到下、從左到右添加。然而，在Bootstrap 5中，此功能已被移除。
要實現類似的佈局，可以使用網格系統結合CSS Masonry佈局或像Masonry.js這樣的JavaScript插件來獲得更複雜的行為。
以下是使用網格系統和CSS創建簡單Masonry風格佈局的方法：
優化性能
高效的性能對於創建快速加載並無縫適應的Bootstrap卡片至關重要。以下是增強性能的實用技巧，同時集成Bootstrap卡片組件，如div類card body和h5類card title。
延遲加載圖片
延遲加載（Lazy loading）會延遲加載圖片，直到它們在視口中可見，從而優化頁面速度。使用 loading=”lazy” 屬性與 card img top 以獲得高效的解決方案。
<img src="https://picsum.photos/300/200" loading="lazy" class="card-img-top" alt="Lazy Loaded Image">優化圖片尺寸
調整圖片大小以適應其容器尺寸，確保更快的加載時間。使用 img-fluid 與 div 類別 card img 可自動調整圖片大小。
<img src="https://picsum.photos/300/200" class="card-img-top img-fluid" alt="Resized Image">這確保 card img top 完美適應，無論父元素的寬度如何。
最小化 CSS 和 JavaScript
最小化樣式和腳本以減少文件大小。結合多個 div 類別 card header 元素並最小化自定義 CSS，以加快渲染速度。
優化範例
不要應用重複的或自定義樣式，像這樣：
<div class="card" style="border: 1px solid blue; text-align: center; padding: 20px;">
<div class="card-body">
<h5 style="font-size: 1.5rem; font-weight: bold;">Custom CSS Header</h5>
<p style="font-size: 1rem; color: #555;">This card uses inline styles, which are inefficient.</p>
</div>
</div>使用 Bootstrap 的實用類別來建立更乾淨和易於維護的結構：
<div class="card border-primary text-center p-3">
<div class="card-body">
<h5 class="card-title text-uppercase fw-bold">Utility Classes Header</h5>
<p class="card-text text-secondary">Using Bootstrap's utility classes ensures better performance and maintainability.</p>
</div>
</div>使用 SVG 圖標
SVG 是輕量且可伸縮的，非常適合用於卡片標題和裝飾元素。它們加載速度更快，跨設備保持清晰。
範例
<div class="card text-center">
<div class="card-header bg-success text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="bi bi-check-circle" fill="currentColor">
<path d="M16 8.98l.686-.688L7.733.011 6.023 1.72 14.98 10.676z"/>
</svg>
<h5 class="card-title">SVG Optimized Header</h5>
</div>
<div class="card-body">
<p class="card-text">SVGs provide clear visuals with minimal overhead.</p>
</div>
</div>預加載和預取資源
使用 rel=”preload” 來加載關鍵資源，使用 rel=”prefetch” 來預測未來需求。這對於繁重的卡片內容特別有用。
範例
<link rel="preload" href="https://example.com/styles.css" as="style">
<link rel="prefetch" href="https://example.com/next-page.html">降低 DOM 複雜性
避免過度嵌套的 div 類別 card 結構，因為這可能會減慢渲染速度。簡化布局以優化性能。
優化之前
<div class="card">
<div class="card-body">
<div>
<div>
<p>Nested Content</p>
</div>
</div>
</div>
</div>優化之後
<div class="card">
<div class="card-body">
<p class="card-text">Optimized Content</p>
</div>
</div>優化字型
預先載入自定義字型或使用系統字型以減少延遲。一個乾淨的 div 類別 card body 可以進一步突顯您卡片的視覺吸引力。
範例
<div class="card">
<div class="card-body" style="font-family: 'Roboto', sans-serif;">
<h5 class="card-title">Optimized Font</h5>
<p class="card-text">Preloading ensures faster rendering for card content.</p>
</div>
</div>結論
Bootstrap 卡片組件是 Bootstrap 框架的強大補充，使開發人員能夠創建現代風格的網頁，而無需深入了解 CSS 的工作原理。您可以通過添加 CSS 類別，將卡片佈局添加到代表圖庫、儀表板小部件以及顯示博客文章或電子商務網站產品的卡片中。
由於新功能和組件的加入，Bootstrap 仍然是一個強大的 CSS 框架，適用於所有人，特別是那些需要創建自己的響應式和現代風格佈局，但缺乏足夠的時間和預算，或者缺乏製作自定義代碼所需的深入 CSS 知識的開發人員。
如果您已經掌握了 Bootstrap 的基礎知識，但想知道如何將您的 Bootstrap 技能提升到下一個水平，請查看我們的 使用 Bootstrap 4 建立您的第一個網站 課程，快速而有趣地介紹 Bootstrap 的強大功能。
關於精通響應式設計的 Bootstrap 卡片組件的常見問題
什麼是 Bootstrap 卡片組件？
Bootstrap 卡片組件是一個現代且靈活的內容容器，使您能夠為文本、圖像和多媒體創建視覺吸引的佈局。卡片是 Bootstrap 框架的一部分，旨在幫助開發人員以響應式和移動友好的方式組織信息。
如何創建 Bootstrap 卡片組件？
創建 Bootstrap 卡片組件非常簡單。您可以使用帶有 class=”card” 的 div 作為容器，並在其中添加標題、文本和圖像等內容。這裡有一個示例：
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is an example of a Bootstrap card body.</p>
</div>
</div>如何設置 Bootstrap 卡片的高度和寬度？
您可以使用內聯樣式或 Bootstrap 的工具類來自定義卡片的寬度和高度。例如：
<div class="card" style="width: 20rem; height: 15rem;">
<div class="card-body">
<h5 class="card-title">Custom Card</h5>
<p class="card-text">This card has a custom height and width.</p>
</div>
</div>此外，您還可以使用像 w-50 或 h-100 的卡片高度 Bootstrap 工具類來響應式設置卡片的尺寸。
如何在 Bootstrap 中調整卡片大小？
要調整卡片的大小，您可以使用像 w-25、w-50 或 w-75 來設置寬度，使用 h-auto 或 h-100 來設置高度的卡片大小 Bootstrap 工具類。這確保您的卡片能夠適應佈局，而無需額外的 CSS。這裡有一個示例：
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Responsive Card</h5>
<p class="card-text">This card resizes based on its parent container.</p>
</div>
</div>如何在 Bootstrap 中創建卡片標題？
要為卡片添加標題，請使用帶有 class=”card-title” 的 <h5> 元素。此類確保標題與 Bootstrap 的設計標準一致。
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is an example of a Bootstrap card with a title.</p>
</div>
</div>我如何在 Bootstrap 中使用 card-body 類？
card-body 類別是一個實用類別，提供填充並組織 Bootstrap 卡片中的內容。它是卡片內容的主要容器。
<div class="card">
<div class="card-body">
<h5 class="card-title">Using card-body</h5>
<p class="card-text">This is the content inside the card-body section.</p>
</div>
</div>如何修正 Bootstrap 卡片大小？
要修正卡片的大小，可以使用內聯樣式或實用類別應用特定的寬度和高度。例如：
<div class="card" style="width: 250px; height: 300px;">
<img src="https://picsum.photos/250/150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Fixed Size Card</h5>
<p class="card-text">This card has a fixed size for consistency.</p>
</div>
</div>如何調整 Bootstrap 中的卡片大小？
卡片大小可以使用 Bootstrap 的實用類別或 CSS 網格動態調整。以下是一個響應式卡片大小的示例：
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Adjustable size based on parent grid.</p>
</div>
</div>
</div>
</div>我可以自定義 Bootstrap 卡片的背景和邊框嗎？
是的，Bootstrap 提供了廣泛的自定義實用類別。使用 bg-primary 設置背景顏色，使用 border-success 設置邊框樣式。範例：
<div class="card bg-info border-danger">
<div class="card-body">
<h5 class="card-title">Custom Background</h5>
<p class="card-text">This card has a custom background and border.</p>
</div>
</div>我如何在卡片中使用圖片？
Bootstrap 支持在卡片中使用圖片，使用 card-img-top 或 card-img-bottom。範例：
<div class="card">
<img src="https://picsum.photos/300/200" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card with Image</h5>
<p class="card-text">This card includes a top image.</p>
</div>
</div>如何在 Bootstrap 中使用 div 類別卡片內容？
在 Bootstrap 中，div 類別卡片內容定義了卡片內的主要內容區域。它提供填充並確保文本、圖片和其他元素在卡片內的一致間距。
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is some text within a card body.</p>
</div>
</div>Bootstrap 中的 p 類別卡片文本是什麼？
Bootstrap 中的 p 類別卡片文本用於設計卡片內容區域內的文本內容。它應用預設排版樣式，使文本看起來乾淨和專業。
<div class="card">
<div class="card-body">
<p class="card-text">This is an example of styled text inside a Bootstrap card.</p>
</div>
</div>如何增加 Bootstrap 中的卡片大小？
為了增加卡片大小，請使用 w-100 來調整其寬度和高度，使其擴展至全寬，或使用樣式指定尺寸。例如：
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Large Card</h5>
<p class="card-text">This card has an increased size for visibility.</p>
</div>
</div>如何使卡片高度相同？
使用 .d-flex 和 .align-items-stretch：
<div class="row g-3">
<div class="col-md-4 d-flex">
<div class="card flex-fill">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Aligned with others.</p>
</div>
</div>
</div>Source:
https://www.sitepoint.com/bootstrap-card-component-introduction/