Bootstrap5 徽章（Badges）（保姆级教程）

什么是 Bootstrap5 徽章（Badges）？

在网页设计中，徽章（Badges）就像是一个“小标签”，用来快速传递信息。你可能在购物网站上看到过“新品”“热销”“限时优惠”这样的标签，它们就是典型的徽章应用。在 Bootstrap5 中，徽章是一个非常实用的组件，它能以简洁的方式展示状态、数量或优先级。

想象一下，你在开发一个后台管理系统，用户列表旁边需要显示“在线”“离线”状态，或者在消息卡片上标出“未读消息 3 条”。这时候，Bootstrap5 徽章就是你的得力助手。它不仅样式美观，而且使用简单，无需额外 CSS，直接通过类名就能实现。

Bootstrap5 徽章的核心类是 badge，它默认带有圆角、背景色和文字颜色，能自动适应不同主题。更重要的是，它能与按钮、导航栏、卡片等其他组件无缝集成，提升页面的信息密度和可读性。

基本用法与默认样式

使用 Bootstrap5 徽章非常简单，只需要给一个 HTML 元素（如 span、a 或 div）添加 badge 类即可。下面是一个最基础的示例：

<span class="badge bg-primary">新消息</span>

这段代码会生成一个带有蓝色背景的徽章，显示“新消息”。其中：

• badge：核心类，定义徽章的基本样式
• bg-primary：设置背景颜色为主题主色（通常是蓝色）
• 文本内容“新消息”会自动居中显示

你可以把徽章放在任何地方，比如放在标题旁边、按钮上或列表项里。它会自动调整大小，不会破坏布局。

再看一个更常见的场景：显示未读消息数量。

<a href="/messages" class="nav-link">
  消息
  <span class="badge bg-danger ms-1">3</span>
</a>

这里我们把徽章放在导航链接中，ms-1 是 Bootstrap 的 margin-start 类，用来在徽章和文字之间加一点间距。bg-danger 表示红色背景，常用于表示警告或重要信息。

✅ 小贴士：徽章默认是内联元素，适合放在文本或链接中。如果需要块级显示，可以搭配 d-inline-block 使用。

不同颜色与语义的徽章

Bootstrap5 提供了多种预设颜色，每种颜色都有其语义含义，帮助用户快速理解内容类型。以下是常见的颜色类：

这些颜色类可以自由组合使用。比如，你可以在一个用户卡片上显示“活跃用户”，用绿色徽章表示活跃状态：

<div class="card">
  <div class="card-body">
    <h5 class="card-title">张三</h5>
    <p class="card-text">前端开发工程师</p>
    <!-- 活跃状态徽章 -->
    <span class="badge bg-success">活跃</span>
  </div>
</div>

这里 bg-success 表示“活跃”状态，绿色让人联想到“正常运行”，视觉上更友好。

你也可以用 bg-warning 来表示“待处理”任务：

<li class="list-group-item d-flex justify-content-between align-items-center">
  修复登录页面 bug
  <span class="badge bg-warning">待处理</span>
</li>

通过颜色搭配，用户一眼就能判断任务状态，无需阅读完整描述。

徽章的大小与变体

Bootstrap5 徽章支持多种大小变体，方便你在不同场景下灵活使用。通过添加 badge-sm、badge-lg 等类，可以控制徽章的尺寸。

<!-- 小尺寸徽章 -->
<span class="badge badge-sm bg-info">小</span>

<!-- 默认尺寸徽章 -->
<span class="badge bg-info">默认</span>

<!-- 大尺寸徽章 -->
<span class="badge badge-lg bg-info">大</span>

⚠️ 注意：badge-sm 和 badge-lg 是 Bootstrap5 中新增的类，用于控制徽章大小，而非 small 或 large。

大小控制在实际项目中非常有用。例如，在导航栏中，如果放太多徽章，可能会影响布局。此时使用 badge-sm 可以让徽章更紧凑，避免“挤占”空间。

此外，Bootstrap5 还支持“轮廓徽章”（outline badges），通过添加 text-bg-* 类来实现。

<span class="badge text-bg-primary border border-primary">轮廓蓝</span>

这个徽章使用白色文字和蓝色边框，背景透明，适合放在深色背景上，视觉更柔和。

徽章与交互元素结合使用

徽章最强大的地方在于它可以和其他组件无缝集成。比如与按钮、卡片、导航等配合使用。

与按钮结合

在按钮右上角显示数量，是常见需求。比如“购物车有 5 件商品”。

<button type="button" class="btn btn-outline-primary position-relative">
  购物车
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    5
    <span class="visually-hidden">新商品</span>
  </span>
</button>

关键点解析：

• position-relative：让按钮成为相对定位容器
• position-absolute：让徽章绝对定位
• top-0 start-100：将徽章定位到右上角
• translate-middle：微调位置，使徽章中心对齐按钮右上角
• rounded-pill：让徽章变成圆角胶囊状
• visually-hidden：隐藏“新商品”文本，仅对屏幕阅读器可见，提升无障碍体验

这种写法是前端开发中非常标准的“消息提示”模式。

与卡片结合

在卡片标题旁添加徽章，展示状态或类型：

<div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <h5 class="mb-0">今日待办</h5>
    <span class="badge bg-warning">紧急</span>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">完成项目文档</li>
    <li class="list-group-item">提交测试报告</li>
  </ul>
</div>

这里徽章显示“紧急”状态，用户一眼就能识别优先级。

实战案例：消息中心徽章系统

我们来做一个完整的例子：模拟一个消息中心，包含不同类型的消息，并用徽章区分状态。

<div class="container mt-4">
  <h4>消息中心</h4>

  <!-- 未读消息 -->
  <div class="alert alert-info d-flex justify-content-between align-items-center mb-2">
    <span>系统通知：今日维护计划</span>
    <span class="badge bg-danger">未读</span>
  </div>

  <!-- 已读消息 -->
  <div class="alert alert-success d-flex justify-content-between align-items-center mb-2">
    <span>更新提醒：新版本已发布</span>
    <span class="badge bg-success">已读</span>
  </div>

  <!-- 警告消息 -->
  <div class="alert alert-warning d-flex justify-content-between align-items-center mb-2">
    <span>安全警告：密码需修改</span>
    <span class="badge bg-warning">警告</span>
  </div>

  <!-- 消息总数 -->
  <div class="mt-3">
    <p>共有 <span class="badge bg-primary">3</span> 条消息</p>
  </div>
</div>

这个例子展示了徽章在真实项目中的多种用途：

• 用 bg-danger 表示“未读”
• 用 bg-success 表示“已读”
• 用 bg-warning 表示“警告”
• 用 bg-primary 统计总数

所有徽章都保持了统一的风格，视觉清晰，语义明确。

小结

Bootstrap5 徽章（Badges）是一个轻量但功能强大的 UI 组件，能有效提升页面的信息传达效率。通过合理使用颜色、大小、位置和语义类，你可以轻松实现状态提示、数量统计、优先级标记等常见需求。

从基础用法到高级集成，徽章的应用场景非常广泛。无论是后台管理系统、电商网站还是个人博客，它都能为你的界面增添专业感和可读性。

掌握 Bootstrap5 徽章，就像掌握了一种“信息标签语言”——它不喧宾夺主，却能让关键信息“跳”出来，被用户第一时间注意到。在开发中多尝试使用它，你会发现，原来一个小小的标签，也能带来大大的体验提升。