Bootstrap4 徽章（Badges）（完整教程）

Bootstrap4 徽章（Badges）的入门与实战应用

在网页设计中，我们常会看到一些小巧但醒目的标签，比如“新”、“热门”、“未读”、“已解决”这类提示信息。它们虽然体积小，却能在视觉上迅速吸引用户注意力。在 Bootstrap 4 中，这类元素被称为“徽章（Badges）”。它不仅仅是一个简单的标签样式，更是一种语义化、响应式、易于复用的 UI 组件。

如果你正在构建一个后台管理系统、信息流页面或社交平台，那么掌握 Bootstrap4 徽章（Badges） 的使用方法，将会让你的界面更具专业感和交互体验。

什么是 Bootstrap4 徽章（Badges）？

简单来说，徽章是用于标记数量、状态或重要性的小型标签。它通常以圆形或矩形形式出现，背景色鲜明，文字简洁，适合嵌入到按钮、导航栏、卡片、列表等元素中。

你可以把徽章想象成“消息提醒灯”——比如你微信未读消息超过 9 条，右上角的红点就是一种典型的徽章应用。在网页中，它能帮助用户快速识别关键信息。

Bootstrap 4 提供了两种主要的徽章类：badge 和 badge-pill。前者是常规的矩形徽章，后者则是圆角化的“胶囊型”徽章，视觉上更加现代和突出。

基础用法：快速创建一个徽章

要使用 Bootstrap4 徽章，你只需要在任意 HTML 元素上添加 class="badge" 即可。例如：

<span class="badge">新</span>

这段代码会在页面上显示一个默认样式的徽章，颜色为浅灰色背景，黑色文字。

提示：<span> 是最常用的容器标签，因为它不会改变布局结构。你也可以使用 <a>、<button>、<li> 等标签来包裹徽章。

常见的徽章颜色变体

Bootstrap 4 为徽章提供了多种颜色主题，每种都有其语义含义：

<!-- 示例：不同颜色的徽章 -->
<span class="badge badge-primary">重要</span>
<span class="badge badge-success">已发布</span>
<span class="badge badge-info">详情</span>
<span class="badge badge-warning">待确认</span>
<span class="badge badge-danger">删除</span>
<span class="badge badge-secondary">草稿</span>

这些颜色并不是随意分配的，而是遵循了 Bootstrap 的设计规范。比如红色通常代表“错误”或“危险”，绿色代表“成功”——这符合用户的普遍认知习惯。

圆角徽章：使用 badge-pill 实现胶囊效果

在某些场景下，你可能希望徽章更显眼一些，比如在导航栏或按钮上提示“新功能”、“未读消息”。这时可以使用 badge-pill 类。

<span class="badge badge-pill badge-danger">新功能</span>

badge-pill 会将徽章的左右边角变为圆角，形成类似“胶囊”的视觉效果，更加现代和突出。

小贴士：badge-pill 适合用于需要强调的场景，比如“新”、“热”、“VIP”等关键词。但不要过度使用，否则会分散用户注意力。

徽章的嵌套使用：与按钮、列表、卡片结合

真正的强大之处在于，Bootstrap4 徽章可以无缝嵌入其他组件中。下面是一些常见组合：

1. 徽章 + 按钮：消息提醒

在后台管理系统的顶部导航栏中，常会看到“消息”按钮旁边挂着一个红点徽章。

<button class="btn btn-outline-primary">
  消息
  <span class="badge badge-danger">9</span>
</button>

这个设计让未读消息数一目了然。数字 9 是动态生成的，你可以用 JavaScript 或后端模板动态替换。

2. 徽章 + 列表项：任务状态标记

在待办事项列表中，用徽章表示任务状态非常直观。

<ul class="list-group">
  <li class="list-group-item">
    完成用户注册功能
    <span class="badge badge-success">已完成</span>
  </li>
  <li class="list-group-item">
    设计登录界面
    <span class="badge badge-warning">进行中</span>
  </li>
  <li class="list-group-item">
    编写 API 文档
    <span class="badge badge-secondary">待开始</span>
  </li>
</ul>

这种布局清晰地传达了每个任务的当前状态，无需额外说明。

3. 徽章 + 卡片：产品标签

在电商或内容展示页面，卡片右上角常会显示“新品”、“热销”、“限时折扣”等标签。

<div class="card" style="width: 18rem;">
  <img src="product.jpg" class="card-img-top" alt="产品图片">
  <div class="card-body">
    <h5 class="card-title">智能手表</h5>
    <p class="card-text">支持心率监测与睡眠分析</p>
  </div>
  <div class="card-footer">
    <span class="badge badge-pill badge-info">新品</span>
  </div>
</div>

这里使用了 badge-pill 来突出“新品”标签，配合卡片结构，视觉效果非常协调。

响应式与可访问性：不可忽视的细节

虽然徽章本身很小，但在实际开发中，响应式和可访问性同样重要。

响应式适配

Bootstrap 4 的徽章默认是响应式的。当屏幕缩小时，徽章会自动调整字体大小和内边距，确保在手机端也能清晰显示。

但要注意：如果你在徽章中放置了过长的文本（如“未读消息超过 999 条”），建议使用缩写或限制字符数。例如：

<span class="badge badge-danger">999+</span>

+ 符号表示“超过 999”，既简洁又符合用户习惯。

可访问性支持

为了让屏幕阅读器正确读出徽章内容，建议为徽章添加 aria-label 属性。

<button class="btn btn-light" aria-label="未读消息数为 5">
  消息
  <span class="badge badge-danger" aria-hidden="true">5</span>
</button>

• aria-label="未读消息数为 5"：告诉屏幕阅读器该按钮的功能。
• aria-hidden="true"：避免重复读取，因为徽章内容已包含在 aria-label 中。

高级技巧：动态徽章与 CSS 自定义

动态徽章：结合 JavaScript 实现

在实际项目中，徽章的数字通常是动态变化的。比如聊天界面中的未读消息数。

<a href="#" class="nav-link">
  消息
  <span id="msg-badge" class="badge badge-danger">0</span>
</a>

// 假设从服务器获取了未读消息数
function updateMessageBadge(count) {
  document.getElementById("msg-badge").textContent = count;
  // 如果 count 为 0，可以隐藏徽章
  if (count === 0) {
    document.getElementById("msg-badge").style.display = "none";
  } else {
    document.getElementById("msg-badge").style.display = "inline";
  }
}

// 示例调用
updateMessageBadge(3); // 显示 3

这样，你就可以实现一个实时更新的提醒系统。

自定义徽章样式

如果你对默认颜色不满意，也可以通过 CSS 覆盖样式。

/* 自定义徽章颜色 */
.custom-badge {
  background-color: #ff6b6b;
  color: white;
  font-weight: 600;
  padding: 0.25em 0.5em;
  border-radius: 0.25em;
}

然后在 HTML 中使用：

<span class="badge custom-badge">自定义</span>

注意：不建议完全重写 badge 类，而是通过额外的类名扩展，保持代码的可维护性。

总结：让 Bootstrap4 徽章真正为你所用

通过本文，你应该已经掌握了 Bootstrap4 徽章（Badges） 的核心用法：从基础语法到嵌套应用，再到响应式与可访问性处理。它虽然看似简单，但在提升用户体验方面却有“四两拨千斤”的效果。

记住几个关键点：

• 徽章是语义化的提示组件，不要滥用。
• 合理选择颜色：红代表危险，绿代表成功，黄代表警告。
• 使用 badge-pill 增强视觉焦点。
• 嵌入按钮、列表、卡片等组件，提升信息层级。
• 结合 JavaScript 实现动态更新。
• 关注可访问性，确保所有用户都能理解。

当你在下一个项目中看到“未读消息”、“新功能”、“待处理”这类提示时，不妨用 Bootstrap4 徽章（Badges） 来实现——它会让你的界面更专业、更高效。