English 中文 العربية 日本語 Português

Bootstrap: 卡片

最后更新：2026-08-26

1. 本课导读

(1) 前置知识

(2) 🎯 你将学到

(3) 痛点

Bob 的产品列表页需要展示 6 个产品——每个产品有图片、名称、价格和"加入购物车"按钮——用 Bootstrap 的卡片组件加网格系统，十几行代码即可实现。

(4) 解法

卡片是 Bootstrap 5 中最核心的内容容器。它可以把图片、文字、按钮和列表组合成一个独立的内容单元，广泛用于产品展示、文章预览和用户资料卡。

理解方式： 卡片就像魔术展示盒——内部可以放图片、文字、列表、按钮任意组合，外部保持统一的外观（圆角、阴影、边框）。

(5) 收益

使用 Bootstrap 卡片组件配合网格系统，十几行代码即可搭建出专业美观的产品展示页面。

2. 卡片基础结构

▶ 示例：基础卡片

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">

    <div class="card" style="width: 18rem;">
      <img src="https://via.placeholder.com/286x180/0d6efd/fff" class="card-img-top" alt="Placeholder">
      <div class="card-body">
        <h5 class="card-title">Product Name</h5>
        <h6 class="card-subtitle mb-2 text-body-secondary">$29.99</h6>
        <p class="card-text">A great product that solves real problems for everyday users.</p>
        <a href="#" class="btn btn-primary">Add to Cart</a>
      </div>
    </div>

    <hr>

    <div class="card">
      <div class="card-header">Featured</div>
      <div class="card-body">
        <h5 class="card-title">Special Offer</h5>
        <p class="card-text">With supporting text below as a natural lead-in.</p>
        <a href="#" class="btn btn-success">Claim Offer</a>
      </div>
      <div class="card-footer text-body-secondary">2 days remaining</div>
    </div>

    <hr>

    <div class="card" style="width: 18rem;">
      <div class="card-header">Notifications</div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">New message from Alice</li>
        <li class="list-group-item">Server update completed</li>
        <li class="list-group-item">Payment received: $120</li>
      </ul>
    </div>

  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

3. 卡片结构详解

元素 class 说明
容器 card 声明卡片组件，提供边框、圆角和阴影
图片 card-img-top 卡片顶部图片（自适应宽度）
主体 card-body 内边距容器，放置文字和按钮
标题 card-title 卡片标题（h5 级字号）
副标题 card-subtitle 标题下方次要文字
文字 card-text 正文段落（自带 margin-bottom）
链接 card-link 卡片内的链接（蓝色文字）
头部 card-header 卡片顶部横条
尾部 card-footer 卡片底部横条
图片覆盖 card-img-overlay 图片上方叠加文字

(1) 图片覆盖

HTML 
<div class="card text-white">
  <img src="https://via.placeholder.com/400x200/198754/fff" class="card-img" alt="Background">
  <div class="card-img-overlay">
    <h5 class="card-title">Overlay Title</h5>
    <p class="card-text">Text is placed on top of the image.</p>
  </div>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

4. 卡片颜色与背景

HTML 
<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card</h5>
    <p class="card-text">Full background color using text-bg-* class.</p>
  </div>
</div>

<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Danger border</div>
  <div class="card-body">
    <h5 class="card-title">Border only card</h5>
    <p class="card-text">Only the border gets the color.</p>
  </div>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

class 效果
text-bg-primary / text-bg-dark 全色背景 + 白色文字
bg-light / bg-dark 自定义背景色
border-primary / border-danger 仅边框着色

5. 水平卡片

HTML 
<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="https://via.placeholder.com/200x200/0d6efd/fff" class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Horizontal Card</h5>
        <p class="card-text">This card uses row + col to place image and text side by side.</p>
        <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

6. 卡片组

HTML 
<div class="card-group">
  <div class="card">
    <img src="https://via.placeholder.com/300x180/0d6efd/fff" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card 1</h5>
      <p class="card-text">This card has less content.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/300x180/198754/fff" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card 2</h5>
      <p class="card-text">This card has more content. Cards auto-match height.</p>
      <p class="card-text">Additional paragraph to show height matching.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/300x180/dc3545/fff" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card 3</h5>
      <p class="card-text">Short content again.</p>
    </div>
  </div>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

(1) 卡片网格（推荐）

HTML 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="https://via.placeholder.com/300x180/0d6efd/fff" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card 1</h5>
        <p class="card-text">Content here.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="https://via.placeholder.com/300x180/dc3545/fff" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card 2</h5>
        <p class="card-text">More content here.</p>
      </div>
    </div>
  </div>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

布局方案 特点 场景
card-group 无间隙等高 详情页并列卡片
row-cols-* + h-100 有间隙等高 产品/文章列表
普通 row + col-* 不等高 信息展示

7. 更多卡片示例

▶ 示例：电商产品卡片

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>E-Commerce Product Card</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="row row-cols-1 row-cols-md-3 g-4">
      <div class="col">
        <div class="card h-100">
          <img src="https://via.placeholder.com/300x200/0d6efd/fff" class="card-img-top" alt="Product">
          <div class="card-body">
            <h5 class="card-title">Wireless Headphones</h5>
            <p class="card-text text-muted">Noise-cancelling, 30hr battery life.</p>
            <div class="d-flex justify-content-between align-items-center">
              <span class="h5 mb-0">$79.99</span>
              <span class="badge bg-success rounded-pill">In Stock</span>
            </div>
          </div>
          <div class="card-footer bg-transparent">
            <button class="btn btn-primary w-100">Add to Cart</button>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <img src="https://via.placeholder.com/300x200/198754/fff" class="card-img-top" alt="Product">
          <div class="card-body">
            <h5 class="card-title">Smart Watch</h5>
            <p class="card-text text-muted">Fitness tracker with heart-rate monitor.</p>
            <div class="d-flex justify-content-between align-items-center">
              <span class="h5 mb-0">$199.99</span>
              <span class="badge bg-warning rounded-pill">Low Stock</span>
            </div>
          </div>
          <div class="card-footer bg-transparent">
            <button class="btn btn-primary w-100">Add to Cart</button>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <img src="https://via.placeholder.com/300x200/dc3545/fff" class="card-img-top" alt="Product">
          <div class="card-body">
            <h5 class="card-title">Bluetooth Speaker</h5>
            <p class="card-text text-muted">Portable, waterproof, 12hr playback.</p>
            <div class="d-flex justify-content-between align-items-center">
              <span class="h5 mb-0">$49.99</span>
              <span class="badge bg-danger rounded-pill">Sold Out</span>
            </div>
          </div>
          <div class="card-footer bg-transparent">
            <button class="btn btn-secondary w-100" disabled>Out of Stock</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：用户资料卡（图片覆盖）

HTML 
<div class="card text-white border-0" style="width: 20rem;">
  <img src="https://via.placeholder.com/320x200/6f42c1/fff" class="card-img rounded-3" alt="Cover">
  <div class="card-img-overlay d-flex flex-column justify-content-end">
    <h5 class="card-title">Alice Chen</h5>
    <p class="card-text">Senior UI Designer at TechCorp</p>
    <div>
      <span class="badge bg-primary rounded-pill">12 Projects</span>
      <span class="badge bg-success rounded-pill">98% Rating</span>
    </div>
  </div>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：卡片组定价表

HTML 
<div class="card-group text-center">
  <div class="card border-primary">
    <div class="card-header bg-primary text-white">Basic</div>
    <div class="card-body">
      <h3 class="card-title">$9<span class="text-muted fs-6">/mo</span></h3>
      <ul class="list-unstyled mt-3 mb-4">
        <li>10 GB Storage</li>
        <li>1 User</li>
        <li>Email Support</li>
      </ul>
      <button class="btn btn-outline-primary">Choose Plan</button>
    </div>
  </div>
  <div class="card border-success">
    <div class="card-header bg-success text-white">Pro</div>
    <div class="card-body">
      <h3 class="card-title">$29<span class="text-muted fs-6">/mo</span></h3>
      <ul class="list-unstyled mt-3 mb-4">
        <li>100 GB Storage</li>
        <li>5 Users</li>
        <li>Priority Support</li>
      </ul>
      <button class="btn btn-success">Choose Plan</button>
    </div>
  </div>
  <div class="card border-warning">
    <div class="card-header bg-warning text-white">Enterprise</div>
    <div class="card-body">
      <h3 class="card-title">$99<span class="text-muted fs-6">/mo</span></h3>
      <ul class="list-unstyled mt-3 mb-4">
        <li>Unlimited Storage</li>
        <li>Unlimited Users</li>
        <li>24/7 Support</li>
      </ul>
      <button class="btn btn-warning">Choose Plan</button>
    </div>
  </div>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：水平图标卡片

HTML 
<div class="card mb-3" style="max-width: 500px;">
  <div class="row g-0 align-items-center">
    <div class="col-md-3 text-center p-3">
      <div class="display-6 text-primary">🔒</div>
    </div>
    <div class="col-md-9">
      <div class="card-body">
        <h5 class="card-title">Secure Payment</h5>
        <p class="card-text">All transactions are encrypted with SSL 256-bit security.</p>
      </div>
    </div>
  </div>
</div>
<div class="card mb-3" style="max-width: 500px;">
  <div class="row g-0 align-items-center">
    <div class="col-md-3 text-center p-3">
      <div class="display-6 text-success">🚚</div>
    </div>
    <div class="col-md-9">
      <div class="card-body">
        <h5 class="card-title">Free Shipping</h5>
        <p class="card-text">Free delivery on orders over $50, arrives within 3-5 days.</p>
      </div>
    </div>
  </div>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

(1) 卡片组件结构

100% 
flowchart TD
    A[card 容器] --> B[card-img-top<br/>图片]
    A --> C[card-body 主体]
    A --> D[card-header<br/>头部]
    A --> E[card-footer<br/>尾部]
    C --> F[card-title 标题]
    C --> G[card-subtitle 副标题]
    C --> H[card-text 正文]
    C --> I[card-link 链接]
    A --> J[card-img-overlay<br/>图片叠加文字]
    A --> K[list-group 列表组]

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

卡片变体 class 效果说明
全色背景 text-bg-primary/dark 背景和文字一起变色
仅边框 border-primary/danger 保留白色背景，边框着色
透明背景 bg-transparent 无背景色，适合暗色模式
无边框 border-0 完全去掉边框
布局方式 间隙 等高 适合场景
card-group 无 是 详情页、特性并列
row-cols-* + h-100 有 是 商品列表、博客
row-cols-* 无 h-100 有 否 内容高度不一时
组合内容 class 常见用例
图片 + 文字 + 按钮 card-img-top + card-body 商品展示
头部 + 主体 + 尾部 card-header + card-body + card-footer 消息、公告
图片覆盖 card-img-overlay 封面、横幅
图标 + 水平布局 row g-0 + col-* 功能列表、服务
列表组 list-group list-group-flush 通知、菜单

❓ 常见问题

Q 卡片的宽度是固定的还是自适应的？
A 卡片默认 width: 100%（填满父容器）。可以用 style="width: 18rem;" 固定宽度，或者放在网格列中自动适应。
Q 如何让卡片内不同区域分开布局？
A 卡片内部可以使用 Flexbox 工具类。例如 .card-body 内的按钮想靠底部，可以用 mt-auto 将按钮推到卡片底部。
Q 卡片支持暗色模式吗？
A 支持。Bootstrap 5.3 的卡片自动响应 data-bs-theme="dark"，文字和背景颜色会自动切换。
Q 卡片组（card-group）在小屏幕上会怎样显示？
A 在小屏幕上，card-group 中的卡片会垂直堆叠，每张卡片占满容器宽度，同时保持等高特性。如果不需要等高，建议使用网格 row-cols-*。
Q 可以在卡片内部放一个完整的列表组吗？
A 可以。卡片内部可以直接放置 list-group list-group-flush，此时列表组会紧贴卡片的内边距，形成统一的视觉效果。

📖 小节

📝 作业

  1. ⭐ 创建一个产品卡片网格：手机端 1 列、平板 2 列、桌面 3 列，每张卡片包含图片 + 标题 + 价格 + 描述 + 按钮，按钮使用 mt-auto 固定在底部。
  2. ⭐⭐ 做一个个人资料卡片：左侧头像（水平图片）+ 右侧姓名 + 简介 + 社交链接，卡片带 border-primary 蓝色边框。
  3. ⭐⭐⭐ 用 card-group 创建三张特性介绍卡片，每张卡片图标区 + 标题 + 描述，三张卡片自动等高。

上一课： 按钮与按钮组 · 下一课： 列表组与徽章

Web-Tutorial.com

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏