Bootstrap4 卡片（超详细）

什么是 Bootstrap4 卡片：网页布局的“积木”

在现代网页设计中，我们常常需要展示内容模块，比如文章摘要、产品信息、用户资料卡等等。这些模块有一个共同特点：它们通常有标题、图像、文字描述，有时还带按钮或标签。如果手动用 div、p、img 等标签去构建，不仅代码冗长，还容易出错。

这时，Bootstrap4 卡片（Card）就派上用场了。它就像是网页开发中的“积木”，专门用来封装一组相关的内容，结构清晰、样式统一、响应式友好。

Bootstrap4 卡片的核心优势在于：

无需额外 CSS，开箱即用
自动适配不同屏幕尺寸（手机、平板、桌面）
支持嵌套、布局组合，灵活度高
内置多种组件支持（如卡片头、卡片体、卡片脚）

想象一下，你要在首页展示 5 个推荐产品。如果不用 Bootstrap4 卡片，你得写一堆 div 和样式类；而用了卡片，只需要几行代码，就能让每个产品都像“小盒子”一样整齐排列。

接下来，我们一步步拆解它的用法。

基础卡片结构：从零开始搭建

Bootstrap4 卡片的核心容器是 .card 类。所有内容都必须放在这个容器内。我们来看一个最基础的卡片示例：

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="示例图片">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">这里是卡片的描述文字，可以写一段简短的介绍。</p>
    <a href="#" class="btn btn-primary">了解更多</a>
  </div>
</div>

代码解析：

class="card"：定义一个卡片容器，这是所有卡片的起点
style="width: 18rem;"：设置卡片宽度为 18 个“rem”单位，相当于约 288px，便于控制大小
class="card-img-top"：将图片放在卡片顶部，且自动适应卡片宽度
class="card-body"：用于包裹卡片主体内容（标题、文字、按钮等）
class="card-title"：用于设置标题样式，通常为大号加粗字体
class="card-text"：用于设置正文段落的样式，确保段落间距合适
class="btn btn-primary"：使用 Bootstrap 的按钮样式，使“了解更多”按钮更美观

这个结构就像一个“盒子”，顶部放图，中间放文字，底部放按钮。简单、清晰、易维护。

卡片的三大组成部分：头、体、脚

Bootstrap4 卡片支持三个标准区域：卡片头（header）、卡片体（body）、卡片脚（footer）。这种设计让你能更精确地组织内容。

卡片头：标题与辅助信息

卡片头用于放置标题或额外信息，通常放在卡片顶部。你可以用 <div class="card-header"> 来创建。

<div class="card">
  <div class="card-header">
    <h5 class="mb-0">项目进度报告</h5>
  </div>
  <div class="card-body">
    <p class="card-text">当前项目已完成 75%，预计下周五上线。</p>
    <a href="#" class="btn btn-outline-secondary">查看详情</a>
  </div>
</div>

说明：

card-header 会自动添加背景色和边框，使头部区域更突出
mb-0 是 Bootstrap 的“margin-bottom: 0”缩写，防止标题与内容之间有过多空白

卡片体：核心内容区域

卡片体是卡片的“心脏”，所有主要文字、图片、表格等都放在这里。使用 card-body 类，确保内容排版整洁。

<div class="card-body">
  <h5 class="card-title">用户反馈</h5>
  <p class="card-text">用户普遍认为界面简洁，操作流畅。</p>
  <small class="text-muted">发布于 2024 年 4 月 5 日</small>
</div>

注意：

text-muted 用于显示灰色的辅助文字，比如发布时间、作者等
small 标签让文字更小，适合放次要信息

卡片脚：按钮与操作入口

卡片脚常用于放置操作按钮，比如“删除”、“编辑”、“确认”等。使用 card-footer 类。

<div class="card-footer text-muted">
  2024 年 4 月 5 日 更新
</div>

提示：

卡片脚默认有背景色和内边距，适合放状态信息或时间戳
可以结合按钮使用，但不要把按钮放在 card-footer 内，除非你明确要控制布局

这三部分组合起来，就是一个完整的 Bootstrap4 卡片结构，就像一栋房子的“屋顶、墙体、地基”，各司其职。

卡片的样式变体：颜色、轮廓、浮动

Bootstrap4 卡片不仅支持基础结构，还提供多种视觉变体，让你能根据场景自由搭配。

颜色变体：用颜色区分类型

你可以通过添加颜色类来改变卡片的背景色和边框色。

类名	效果
`bg-primary`	主色调背景（蓝色）
`bg-success`	成功色背景（绿色）
`bg-warning`	警告色背景（黄色）
`bg-danger`	危险色背景（红色）
`bg-info`	信息色背景（浅蓝）

<div class="card bg-success text-white">
  <div class="card-body">
    <h5 class="card-title">任务完成</h5>
    <p class="card-text">今天所有任务均已提交。</p>
  </div>
</div>

使用建议：

用绿色表示成功，红色表示错误，黄色表示提醒，有助于用户快速识别状态
颜色类和 text-white 配合使用，确保文字在深色背景上清晰可见

轮廓卡片：无背景色，仅用边框

如果你不想用背景色，只想用边框来区分卡片，可以使用 border 类。

<div class="card border-primary">
  <div class="card-body">
    <h5 class="card-title">提示信息</h5>
    <p class="card-text">请检查输入格式是否正确。</p>
  </div>
</div>

这种风格适合用于强调“边框提示”而非“背景强调”，视觉更轻盈。

浮动卡片：右对齐与左对齐

你可以用 float-right 或 float-left 让卡片在页面中浮动。

<div class="card float-right" style="width: 15rem;">
  <div class="card-body">
    <h5 class="card-title">侧边栏卡片</h5>
    <p class="card-text">用于展示快速导航或广告。</p>
  </div>
</div>

注意：

浮动卡片需配合 clearfix 容器使用，避免布局错乱
现代项目中建议使用 Flex 或 Grid 布局替代浮动，更稳定

响应式布局：手机、平板、桌面全适配

Bootstrap4 卡片天生支持响应式。你不需要写额外 CSS，只需添加 card 类，它就会自动适配不同屏幕。

<div class="row">
  <div class="col-md-4">
    <div class="card">
      <img src="https://via.placeholder.com/150" class="card-img-top" alt="产品1">
      <div class="card-body">
        <h5 class="card-title">产品 A</h5>
        <p class="card-text">售价 99 元。</p>
        <a href="#" class="btn btn-sm btn-outline-primary">购买</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <img src="https://via.placeholder.com/150" class="card-img-top" alt="产品2">
      <div class="card-body">
        <h5 class="card-title">产品 B</h5>
        <p class="card-text">售价 129 元。</p>
        <a href="#" class="btn btn-sm btn-outline-primary">购买</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <img src="https://via.placeholder.com/150" class="card-img-top" alt="产品3">
      <div class="card-body">
        <h5 class="card-title">产品 C</h5>
        <p class="card-text">售价 89 元。</p>
        <a href="#" class="btn btn-sm btn-outline-primary">购买</a>
      </div>
    </div>
  </div>
</div>

关键点：

col-md-4 表示在中等及以上屏幕（≥768px）下，每行显示 3 个卡片
在手机上（<768px），会自动堆叠成一列
btn-sm 用于缩小按钮尺寸，避免卡片内容拥挤

这种响应式能力，让 Bootstrap4 卡片成为构建现代化网站的首选组件。

实际应用场景：从博客到电商

Bootstrap4 卡片的应用场景非常广泛。以下是一些常见用例：

博客列表：每篇博客用一张卡片展示标题、摘要、发布时间
产品展示：电商网站中，每个商品用卡片展示图片、名称、价格、“加入购物车”按钮
用户资料卡：在社交平台中，展示用户头像、昵称、简介、关注按钮
通知中心：用不同颜色的卡片显示系统通知（成功、警告、错误）

这些场景中，Bootstrap4 卡片都能让你快速搭建出美观、一致的界面，同时减少重复代码。

总结：掌握 Bootstrap4 卡片，提升开发效率

Bootstrap4 卡片不是简单的“盒子”，而是一套完整的 UI 组件系统。它结构清晰、样式统一、响应式强大，特别适合初学者快速上手，也适合中级开发者在项目中高效复用。

掌握它，你就能在 5 分钟内搭建出一个完整的“产品列表页”或“文章摘要页”。无论是个人项目还是团队协作，它都能显著提升开发效率。

别再手动写一堆 div 和样式了。从今天开始，用 Bootstrap4 卡片，让网页布局变得更简单、更优雅。