Bootstrap卡片组件：完整介绍

教程
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：为列表组中的单个项添加样式。
  • 卡片组：将多个卡片以相同的宽度和高度组合在一起。
  • 卡片组栈：对齐多个卡片并添加间距，在 Bootstrap 5 中已弃用。
  • 文本-*：用于文本颜色样式的工具类（例如，text-primary, text-success）。
  • 背景-*：用于背景颜色样式的工具类（例如，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 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 包 -->
    <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允许您创建具有不同页眉样式的卡片

  • “header primary card title” 用于主要部分
  • “header light card title” 用于细致设计
  • “header secondary card title” 用于带有支持文本的卡片
  • “header dark card title” 用于粗犷外观
  • “header success card title” 用于积极信息
  • “header danger card title” 用于警告信息

有了这些多功能的卡片样式选项，您还可以创建类似“header warning card title”、“header info card title”这样的独特设计，以突出关键信息或将注意力集中到具体细节上。

添加导航

Bootstrap卡片组件的另一个不错的功能是在页眉部分添加高级导航模式，如选项卡和导航丸。

在卡片页眉中添加选项卡

要在卡片的标题中包含标签，请在无序列表（<ul>）上使用 .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>

这是结果的截图：

将药丸添加到卡片标题

同样，我们可以通过简单地将 .nav-tabs 替换为 .nav-pills，将 .card-header-tabs 替换为 .card-header-pill 来添加导航药丸，方法是在 <ul> 列表标签上：

<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 导航组件文档 中找到更多信息。

我们可以使用带有 .card-link 类的 <a> 标签快速在卡片中添加链接：

<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 组件，在现代 Web 布局中被广泛使用，用于显示混合内容类型（如文本和图像）作为单个实体或分组集合。

卡片在响应式设计中特别有用，并常常被用于类似砌体布局（Masonry layout）或称为类似Pinterest的布局中。

卡片可用于创建图库、博客文章或电子商务产品的布局。像谷歌和Facebook这样的主要平台大量使用卡片来组织和展示其Web应用程序的内容。

以前，构建这样的高级布局需要深入了解CSS和HTML。然而，借助Bootstrap的最新功能，开发人员可以轻松创建响应式且视觉上吸引人的基于卡片的布局。

类似.card-group、.card-deck和.card-columns之类的类简化了使用一致的样式和对齐方式组织卡片的过程。

分组/嵌套卡片

在Bootstrap中，卡片组是一种有效的方式，可以将多个卡片组件显示为一个单一的、连接的实体，具有统一的宽度和高度。

通过使用display: flex;属性实现此布局，确保所有卡片对齐完美。这对于响应式设计和现代Web布局特别有用，其中一致的卡片尺寸至关重要。

要创建一组卡片，可以使用.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 类来创建类似瀑布流的布局，其中卡片从上到下、从左到右添加。然而，在 Bootstrap 5 中，这一功能已被移除。

要实现类似的布局，您可以结合网格系统与 CSS 瀑布流布局或类似 Masonry.js 的 JavaScript 插件来实现更复杂的效果。

以下是如何使用网格系统和 CSS 创建简单的瀑布流样式布局：

优化性能

高效的性能对于创建能快速加载并无缝适应的 Bootstrap 卡片至关重要。以下是增强性能的实用技术，同时集成 Bootstrap 卡片组件，如 div class card body 和 h5 class card title。

延迟加载图片

懒加载延迟加载图像，直到它们在视口中可见，从而优化页面速度。使用 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 class card img 结合，自动缩放图像。

<img src="https://picsum.photos/300/200" class="card-img-top img-fluid" alt="Resized Image">

这确保了 card img top 完美贴合，无论父元素宽度如何。

压缩 CSS 和 JavaScript

压缩样式和脚本以减少文件大小。合并多个 div class 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 class 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类卡片主体可以进一步突出卡片的视觉吸引力。

示例

<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卡片组件很简单。您可以使用类名为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>

另外，您也可以使用card高度的Bootstrap实用类，如w-50或h-100来响应性地设置卡片尺寸。

如何调整Bootstrap中的卡片大小？

要调整卡片大小，您可以使用卡片大小的Bootstrap实用类，如w-25、w-50或w-75用于宽度，h-auto或h-100用于高度。这样可以确保您的卡片适应布局，而无需额外的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中创建卡片标题？

要向您的卡片添加标题，请使用类名为”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 Grid动态调整卡片大小。以下是响应式卡片尺寸的示例：

<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类card body？

在Bootstrap中，div类card body定义了卡片内的主要内容区域。它提供填充并确保卡片内的文本、图片和其他元素之间的一致间距。

<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类card text是什么？

在Bootstrap中，p类card text用于样式化卡片主体内的文本内容。它应用默认的排版样式，使文本看起来干净和专业。

<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/