Bootstrap卡組件：完整的簡介-css教學-PHP中文網

Example Card Title

首頁

web前端

css教學

Bootstrap卡組件：完整的簡介

Lisa Kudrow

Feb 08, 2025 am 10:36 AM

>本文探討了Bootstrap的卡片組件，這是一種用於創建視覺吸引力和響應式Web佈局的多功能工具。我們將介紹其用途，自定義和最佳實踐，以實現最佳性能。

Bootstrap Card Component: a Complete Introduction

>為什麼要使用bootstrap卡？領先的響應網絡框架 Bootstrap簡化了創建令人驚嘆的佈局。它的優勢包括：

需要最小的HTML和CSS知識。

>移動優先方法：優先級移動響應能力。

跨瀏覽器的兼容性：在主要瀏覽器上無縫地工作。

基於flexbox的網格：

：簡化的對齊和間距。

>>廣泛的組件：>提供可重複使用的元素，例如按鈕，模態和卡片。

>最新的引導版本可顯著增強卡組件，替換面板和縮略圖等較舊元素。

理解引導卡

Bootstrap卡是用於各種內容類型（文本，圖像，多媒體）的靈活容器。關鍵功能包括：

簡單：

很容易使用

的類創建內容多功能性：card-body支持標題，圖像，列表等。 card-text
響應能力：>使用Bootstrap的網格系統適應不同的屏幕尺寸。
自定義：實用程序類允許進行樣式調整（顏色，邊界，對齊）。
支持卡組，甲板（Bootstrap 5中的棄用）和用於復雜佈置的列佈局。 >
>必需的bootstrap卡類

這是關鍵類的摘要： Bootstrap Card Component: a Complete Introduction

card：主卡容器。
card-body：卡的內容區域。
card-title：樣式卡標題（通常與<h3></h3>>或<h4></h4>一起使用）。
card-text：卡中的樣式標准文本。
card-header：創建一個標題部分。
card-footer：創建一個頁腳部分。
card-img-top/card-img-bottom：將圖像放在頂部或底部。
list-group/list-group-item：在卡中創建列表。
card-group：分組具有相等寬度和高度的卡片。
card-deck ：（在bootstrap 5中棄用）將卡與間距對齊。
text-*/bg-*：文本和背景顏色的實用程序類。

集成Bootstrap

通過CDN包括Bootstrap或從中下載。這是>的CDN示例：index.html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/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 id="Example-Card-Title">Example Card Title</h5>
                <p class="card-text">This is an example card using Bootstrap 5.</p>
                <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>

    <🎜>
</body>
</html>

登入後複製

>這使用CDN進行簡單設置。有關更詳細的設置選項，請參閱Bootstrap文檔。

創建基本卡

一個簡單的卡使用

類用作容器，.card，.card-body，.card-title和.card-text>用於內容。原始文本中提供了示例和屏幕截圖，展示了水平卡，列表組，標頭，頁腳，圖像疊加層和圖像蓋。這些都是在原始文本中進行視覺說明的。 .card-img-top>

>響應式設計 Bootstrap的網格系統可確保響應能力。原始文本提供了代碼示例和屏幕截圖，使用行和列類演示響應式卡佈局。

>調整卡大小

使用內聯樣式（）或Bootstrap實用程序類，控制卡寬度和高度。原始文本提供了示例和屏幕截圖。它還討論了較新的引導版本中向

>單元的轉變，以獲得更好的可擴展性。

style="width: 10rem;">卡樣式rem

>使用實用程序類自定義卡外觀，例如>，，

，用於背景，文本和邊框顏色。原始文本中包含示例和屏幕截圖展示各種樣式。還解釋了標題樣式的使用。