Bootstrap 卡片、警告与徽章

这一章讲三个内容展示型组件:卡片(card)、警告(alert)、徽章(badge)。它们都是"把信息装进盒子里"的容器,在落地页、后台、博客里出现频率极高。

1. 卡片(card)基础结构

卡片是 Bootstrap 最万能的容器——可以放标题、文字、图片、按钮、列表,几乎承载一切内容。最基础的结构是 .card 包 .card-body:

<!-- 最基础的卡片:.card 包 .card-body -->
<div class="card" style="max-width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <h6 class="card-subtitle text-muted">副标题</h6>
    <p class="card-text">一段简短的描述文字,介绍卡片内容。</p>
    <a href="#" class="btn btn-primary">了解更多</a>
  </div>
</div>

• card:外层容器,自带白色背景、圆角、阴影。
• card-body:内容区,自带 padding。
• card-title:卡片标题(h5 是最常用字号)。
• card-subtitle:副标题,通常配合 text-muted 变灰。
• card-text:正文段落。
• card-link:底部链接,自带左右间距。

2. 卡片的各个部位

一个完整的卡片可以有顶部图片、列表、多个 body 区:

<!-- 卡片的各个部位 -->
<div class="card" style="max-width: 20rem;">
  <!-- 顶部图片 -->
  <img src="/cover.jpg" class="card-img-top" alt="封面" />

  <div class="card-body">
    <h5 class="card-title">带图的卡片</h5>
    <p class="card-text">card-img-top 是顶部图片专用 class。</p>
  </div>

  <!-- 列表组:card 内的列表 -->
  <ul class="list-group list-group-flush">
    <li class="list-group-item">特性一</li>
    <li class="list-group-item">特性二</li>
  </ul>

  <!-- 底部链接组 -->
  <div class="card-body">
    <a href="#" class="card-link">查看详情</a>
    <a href="#" class="card-link">分享</a>
  </div>
</div>

• card-img-top:顶部图片,自动贴合卡片圆角。
• list-group-flush:列表组无缝嵌入卡片(去掉左右边框)。
• card-link:底部链接组,自动加间距。

3. 卡片头部和底部

需要标题区/脚注区的卡片,用 card-header 和 card-footer:

<!-- 卡片头尾:card-header / card-footer -->
<div class="card text-center">
  <div class="card-header">卡片头部(标题区)</div>
  <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-footer text-muted">卡片底部(脚注区)</div>
</div>

这种结构在报价卡、设置面板、对话气泡里特别常见——header 放标题或 tabs,footer 放操作按钮。

4. 卡片网格(等高布局)

卡片最常见的用法是"一行 N 张",配合栅格实现。要让卡片等高,给每个 col 的卡片加 h-100(height: 100%):

<!-- 卡片网格:配合 row + col,一行三张 -->
<div class="row g-4">
  <div class="col-md-4">
    <div class="card h-100">
      <img src="/a.jpg" class="card-img-top" alt="..." />
      <div class="card-body">
        <h5 class="card-title">卡片 A</h5>
        <p class="card-text">h-100 让卡片等高。</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">卡片 B(没图)</h5>
        <p class="card-text">等高不会错位。</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">卡片 C</h5>
        <p class="card-text">第三张。</p>
      </div>
    </div>
  </div>
</div>

关键点:h-100 必须加在 card 上,不是 col 上。它的作用是让卡片占满 col 的高度,而 col 的高度由同行最高的那张决定——这样视觉上所有卡片都对齐底部。

5. 卡片配色

卡片整体配色用 bg-*(背景)和 text-*(文字)组合:

<!-- 卡片整体配色:bg-* 改背景,text-* 改文字 -->
<div class="card text-white bg-primary">
  <div class="card-body">主要色卡片</div>
</div>

<div class="card text-white bg-success">
  <div class="card-body">成功色卡片</div>
</div>

<!-- 卡片边框:border-* 配合 text-* -->
<div class="card border-primary">
  <div class="card-body text-primary">主要边框卡片</div>
</div>

注意深色背景必须配 text-white,否则文字看不见。如果只想改边框色用 border-*,文字色独立用 text-*。

6. 警告框(alert)

alert 用于页面级提示——操作成功、出错、警告、信息提示。它比模态框温和(不打断用户),比 toast 持久(不自动消失):

<!-- alert:警告/提示框 -->
<div class="alert alert-primary" role="alert">主要提示</div>
<div class="alert alert-success" role="alert">操作成功!</div>
<div class="alert alert-danger" role="alert">出错了,请重试。</div>
<div class="alert alert-warning" role="alert">注意:这是警告。</div>
<div class="alert alert-info" role="alert">这是一条信息提示。</div>

<!-- 带链接的提示:alert-link 自动配色 -->
<div class="alert alert-success" role="alert">
  操作成功! <a href="#" class="alert-link">查看详情</a>
</div>

<!-- 带更多内容的提示 -->
<div class="alert alert-warning" role="alert">
  <h4 class="alert-heading">注意</h4>
  <p>这是一个带标题和段落的复杂提示。</p>
  <hr />
  <p class="mb-0">底部的补充说明。</p>
</div>

• 八种语义色,跟按钮一致(primary/secondary/success/danger/warning/info/light/dark)。
• alert-link:链接会自动跟随 alert 配色,无需手动改色。
• alert-heading:alert 内部标题字号(h4)。
• hr:分割线,把内容分段。

7. 可关闭的警告框

想让用户能点叉号关掉 alert,加 alert-dismissible 配合关闭按钮:

<!-- 可关闭的提示:加 alert-dismissible + 关闭按钮 -->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>提示:</strong> 点右上角的叉可以关闭我。
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- data-bs-dismiss="alert" 让 Bootstrap JS 自动关闭并从 DOM 移除
     fade show 让关闭时有淡出动画 -->

几个关键点:

• alert-dismissible:给关闭按钮腾出右上角空间。
• btn-close:Bootstrap 内置的叉号按钮(白色小叉)。
• data-bs-dismiss="alert":告诉 Bootstrap JS"点击我时关闭这个 alert"。这是无 JS API。
• fade show:让关闭时有淡出动画。

需要引入 Bootstrap JS bundle 才生效。关闭后 alert 会从 DOM 移除,再次显示需要重新插入。

8. 徽章(badge)

badge 是行内小标记,常用于"未读数、标签、状态、版本号":

<!-- badge:徽章,行内小块标记 -->
<h1>标题 <span class="badge bg-secondary">New</span></h1>
<h2>评论数 <span class="badge bg-primary">42</span></h2>

<!-- 语义色 -->
<span class="badge bg-primary">主要</span>
<span class="badge bg-success">成功</span>
<span class="badge bg-danger">危险</span>
<span class="badge bg-warning text-dark">警告(配黑字更清晰)</span>
<span class="badge bg-info text-dark">信息</span>

<!-- 圆角药丸形状:rounded-pill -->
<span class="badge rounded-pill bg-primary">药丸</span>
<span class="badge rounded-pill bg-success">圆形</span>

<!-- 按钮里的徽章(常用于通知数) -->
<button class="btn btn-primary position-relative">
  收件箱
  <span class="position-absolute top-0 start-100 translate-middle
               badge rounded-pill bg-danger">9+</span>
</button>

• 基础:badge bg-*,行内元素,自带圆角和 padding。
• 药丸形:加 rounded-pill,左右变成全圆角。
• 字号自适应:badge 会跟随父元素的字号缩放——放在 h1 里变大,放在 span 里变小。
• 位置定位:配合 position-absolute + translate-middle 实现"按钮右上角的数字角标"。

提示:黄色背景(warning/info)对比度低,加 text-dark 配黑字更清晰。

小结

三个组件的要点:

• card:万能容器,card > card-body > card-title/text,加 h-100 实现等高网格。
• alert:页面级提示,加 alert-dismissible + btn-close 实现可关闭。
• badge:行内标记,字号自适应,rounded-pill 是药丸形。

下一篇我们看导航栏——Bootstrap 自带的"桌面横排、手机汉堡菜单"自动切换组件。

← 上一篇 按钮组件

下一篇 导航栏与导航 →