Bootstrap卡片组件：完全指南

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：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


<!doctype html>
<html lang="en">
<head>
    <!-- 必需的元标签 -->
    <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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <title>Bootstrap卡片示例</title>
</head>
<body>
    <div class="container mt-5">
        <div class="card" style="width: 18rem;">
            <div class="card-header bg-primary text-white">
                示例卡片页眉
            </div>
            <div class="card-body">
                <h5 class="card-title">示例卡片标题</h5>
                <p class="card-text">这是使用Bootstrap 5创建的示例卡片。它包括页眉、标题和文本的样式。</p>
                <a href="#" class="btn btn-primary">去某处</a>
            </div>
        </div>
    </div>

    <!-- 包含Popper的Bootstrap Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>
</html>

我们通过CDN包含了Bootstrap文件，确保始终可用的最新框架版本。添加了一个容器div作为您内容的基础，允许您立即开始使用Bootstrap卡片组件进行构建。

有关更多详细信息，您可以浏览入门模板文档。

创建基本Bootstrap卡片

要创建简单卡片，请按照以下步骤操作：

使用.card类和<div>标签创建外部容器
将.card-body类添加到内部<div>标签以定义卡片主体
使用.card-title和.card-subtitle类与标题标签（<h5>和<h6>）一起添加卡片标题和副标题
使用.card-text类与<p>标签一起包含文本内容
使用.card-img-top类与<img>标签一起在卡片顶部添加图像

这些是基本卡片布局的基本构建块。以下是一个示例：

1
2
3
4
5
6
7
8
9


<div class="card" style="width: 30rem;">
   <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="卡片图像">
   <div class="card-body">
      <h5 class="card-title">卡片标题</h5>
      <h6 class="card-subtitle mb-2 text-muted">卡片副标题</h6>
      <p class="card-text">这是使用Bootstrap 5创建的简单卡片示例。</p>
      <a href="#" class="btn btn-primary">去某处</a>
   </div>
</div>

此代码生成一个包含图像、标题、副标题、文本和按钮的卡片，除非使用style="width: 30rem;"属性指定，否则它将调整到其父容器的宽度。

Bootstrap中的水平卡片

水平卡片允许您以并排布局显示内容，使其成为紧凑和有组织设计的理想选择。您可以使用网格类创建它们以实现响应行为，确保卡片在所有设备上看起来都很棒。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<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="图像">
      </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">最后更新于3分钟前</small></p>
         </div>
      </div>
   </div>
</div>

Bootstrap卡片中的列表组

Bootstrap允许您通过包含列表组来增强卡片，从而更容易显示结构化和有组织的内容。list-group和list-group-flush类在卡片内无缝集成，使开发人员能够创建视觉上吸引人的列表。

以下是如何创建带有flush列表组的卡片：

1
2
3
4
5
6
7


<div class="card" style="width: 18rem;">
  <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>

增强卡片功能

添加页眉和页脚

您可以通过使用.card-header和.card-footer类包含页眉和页脚来增强卡片。以下是一个示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<div class="row">
    <div class="col-sm-3">
        <div class="card">
            <div class="card-header">
                这是一个页眉
            </div>
            <img class="card-img-top" src="https://source.unsplash.com/daily" alt="卡片顶部图像">
            <div class="card-body">
                <h3 class="card-title">卡片标题</h3>
                <h4 class="card-subtitle">卡片副标题</h4>
                <p class="card-text">这是一个简单的卡片示例</p>
            </div>
            <div class="card-footer">
                    这是一个页脚
            </div>
        </div>
    </div>
</div>

此布局通过样式化的页眉和页脚为卡片添加上下文。

在图像上叠加文本

使用.card-img-overlay在图像顶部叠加内容。通过简单地将card-body类替换为card-img-overlay类，我们可以使用图像作为叠加层：

1
2
3
4
5
6
7
8
9


<div class="card" style="width: 30rem;">
   <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="卡片图像">
   <div class="card-img-overlay">
      <h5 class="card-title">卡片标题</h5>
      <h6 class="card-subtitle mb-2 text-muted">卡片副标题</h6>
      <p class="card-text">这是使用Bootstrap 5创建的简单卡片示例。</p>
      <a href="#" class="btn btn-primary">去某处</a>
   </div>
</div>

添加卡片图像帽

使用.card-img-top或.card-img-bottom在卡片顶部或底部添加图像。

1
2
3
4
5
6
7


<div class="card" style="width: 18rem;">
   <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="卡片顶部图像">
   <div class="card-body">
      <p class="card-text">此卡片在顶部和底部都有图像帽。</p>
   </div>
   <img src="https://picsum.photos/id/0/800" class="card-img-bottom" alt="卡片底部图像">
</div>

卡片的顶部和底部图像称为图像帽。

使用Bootstrap卡片的响应式设计

响应式设计确保您的卡片在所有设备上看起来都很棒。使用Bootstrap网格系统控制布局。

示例代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


<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="卡片图像">
         <div class="card-body">
            <h5 class="card-title">卡片标题</h5>
            <h6 class="card-subtitle mb-2 text-muted">卡片副标题</h6>
            <p class="card-text">这是使用Bootstrap 5创建的简单卡片示例。</p>
            <a href="#" class="btn btn-primary">去某处</a>
         </div>
      </div>
   </div>
   <div class="col">
      <div class="card">
         <img src="https://picsum.photos/id/85/800" class="card-img-top" alt="卡片图像">
         <div class="card-body">
            <h5 class="card-title">卡片标题</h5>
            <h6 class="card-subtitle mb-2 text-muted">卡片副标题</h6>
            <p class="card-text">这是使用Bootstrap 5创建的简单卡片示例。</p>
            <a href="#" class="btn btn-primary">去某处</a>
         </div>
      </div>
   </div>
</div>

调整Bootstrap卡片高度和宽度

要为卡片设置特定宽度，可以使用style属性或Bootstrap的实用程序类。以下是一个示例：

1
2
3
4
5
6
7


<div class="card" style="width: 10rem;">
   <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="卡片顶部图像">
   <div class="card-body">
      <h5 class="card-title">卡片标题</h5>
      <p class="card-text">这是一个具有自定义宽度的简单卡片示例。</p>
   </div>
</div>

此卡片的宽度限制为10rem，可以根据您的设计需求进行调整。

通常，卡片的高度将调整为垂直适应卡片内容，但我们也可以使用自定义CSS（例如style="height: 10rem;"）或Bootstrap的尺寸实用程序（例如<div class="card h-200">）来控制它。

请注意，Bootstrap的最新版本已从px单位切换到rem单位，因为rem是一个可扩展的测量单位——因此它更好地与用户设置配合使用，这使得文本更加可访问。结果是页面中的所有元素将随屏幕尺寸缩放。

您可以在SitePoint的"Bootstrap：超级智能功能让您爱上它"文章中了解有关Bootstrap新功能的更多信息。

使用网格系统控制宽度

控制Bootstrap卡片组件宽度的另一个选项是使用Bootstrap网格（行和列）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<div class="row">
    <div class="col-md-4">
        <div class="card">
            <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="卡片顶部图像">
            <div class="card-body">
                <h5 class="card-title">卡片标题</h5>
                <p class="card-text">这是一个使用网格系统的示例卡片。</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="卡片顶部图像">
            <div class="card-body">
                <h5 class="card-title">另一个卡片</h5>
                <p class="card-text">此卡片位于第一个卡片旁边。</p>
            </div>
           </div>
    </div>
</div>

在此示例中，两个卡片并排显示，每个卡片在中型和更大屏幕上占据四列（col-md-4）。

卡片样式

Bootstrap提供了各种选项来自定义卡片，包括背景颜色、边框和文本样式。

背景和文本颜色

您可以使用.bg-primary或.text-white等实用程序类更改卡片的背景和文本颜色。

1
2
3
4
5
6
7


<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="占位符图像">
  <div class="card-body">
    <h5 class="card-title">主要卡片标题</h5>
    <p class="card-text">快速文本演示卡片样式。</p>
  </div>
</div>

边框颜色

使用.border-{color}类自定义卡片的边框颜色。卡片内的文本也可以使用.text-{color}进行样式设置。

1
2
3
4
5
6
7


<div class="card border-success mb-3" style="max-width: 18rem;">
  <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="占位符图像">
  <div class="card-body text-success">
    <h5 class="card-title">成功卡片标题</h5>
    <p class="card-text">使用边框样式化的简单内容。</p>
  </div>
</div>

透明页眉和页脚

使用.bg-transparent从页眉和页脚中移除背景颜色，并自定义其边框。

1
2
3
4
5
6
7
8
9


<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-info">页眉</div>
  <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="占位符图像">
  <div class="card-body text-info">
    <h5 class="card-title">信息卡片标题</h5>
    <p class="card-text">卡片内的示例内容。</p>
  </div>
  <div class="card-footer bg-transparent border-info">页脚</div>
</div>

混合背景和边框

结合背景和边框实用程序以实现独特样式。

1
2
3
4


<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="占位符图像">
  <div class="card-body text-dark">
    <h5 class="card-title">混合样式卡片</h5