Bootstrap 4 徽章 - 设计精美的标签与计数器

最后编辑于2025-04-14 13:22:30.1306085 +0800 CST

Bootstrap 4 徽章（Badges）

徽章（Badges）是Bootstrap 4中的轻量级组件，主要用于计数、标记或突出显示新的或未读的项。徽章可以很轻松地添加到各种元素中，例如导航菜单、按钮、标题等。

基本徽章

创建一个基本徽章非常简单，只需将.badge类和一个颜色类(如.badge-secondary)添加到<span>元素上：

html 
1<span class="badge badge-secondary">New</span>

徽章会自动适应其父元素的大小，以下是添加到各种标题级别的示例：

html 
1<h1>测试标题 <span class="badge badge-secondary">New</span></h1>
2<h2>测试标题 <span class="badge badge-secondary">New</span></h2>
3<h3>测试标题 <span class="badge badge-secondary">New</span></h3>
4<h4>测试标题 <span class="badge badge-secondary">New</span></h4>
5<h5>测试标题 <span class="badge badge-secondary">New</span></h5>
6<h6>测试标题 <span class="badge badge-secondary">New</span></h6>

徽章颜色

Bootstrap 4提供了多种预定义的颜色类，可以应用于徽章以表达不同的含义：

html 
1<span class="badge badge-primary">主要</span>
2<span class="badge badge-secondary">次要</span>
3<span class="badge badge-success">成功</span>
4<span class="badge badge-danger">危险</span>
5<span class="badge badge-warning">警告</span>
6<span class="badge badge-info">信息</span>
7<span class="badge badge-light">浅色</span>
8<span class="badge badge-dark">深色</span>

每种颜色都有特定的语义含义：

  • Primary: 用于主要操作或重要信息
  • Secondary: 次要信息
  • Success: 成功操作或正面信息
  • Danger: 危险操作或错误信息
  • Warning: 需要注意或警告的信息
  • Info: 中性的信息性提示
  • Light: 用于深色背景上的徽章
  • Dark: 用于浅色背景上的徽章

药丸形状徽章

通过添加.badge-pill类，可以将徽章设置为药丸形状（更圆的边角）：

html 
1<span class="badge badge-pill badge-primary">主要</span>
2<span class="badge badge-pill badge-secondary">次要</span>
3<span class="badge badge-pill badge-success">成功</span>
4<span class="badge badge-pill badge-danger">危险</span>
5<span class="badge badge-pill badge-warning">警告</span>
6<span class="badge badge-pill badge-info">信息</span>
7<span class="badge badge-pill badge-light">浅色</span>
8<span class="badge badge-pill badge-dark">深色</span>

徽章与其他元素结合

在按钮中使用徽章

徽章可以嵌入到按钮中，常用于显示计数器或通知数量：

html 
1<button type="button" class="btn btn-primary">
2  消息 <span class="badge badge-light">4</span>
3</button>
4
5<button type="button" class="btn btn-success">
6  通知 <span class="badge badge-light">7</span>
7  <span class="sr-only">未读消息</span>
8</button>

注意：sr-only类用于屏幕阅读器，提高可访问性。

在导航中使用徽章

徽章也可以用在导航项目中：

html 
 1<ul class="nav nav-pills">
 2  <li class="nav-item">
 3    <a class="nav-link active" href="#">首页</a>
 4  </li>
 5  <li class="nav-item">
 6    <a class="nav-link" href="#">资料</a>
 7  </li>
 8  <li class="nav-item">
 9    <a class="nav-link" href="#">消息 <span class="badge badge-light">4</span></a>
10  </li>
11  <li class="nav-item">
12    <a class="nav-link disabled" href="#">已禁用</a>
13  </li>
14</ul>

在列表组中使用徽章

在列表组中使用徽章可以标记项目的数量或状态：

html 
 1<ul class="list-group">
 2  <li class="list-group-item d-flex justify-content-between align-items-center">
 3    收件箱
 4    <span class="badge badge-primary badge-pill">12</span>
 5  </li>
 6  <li class="list-group-item d-flex justify-content-between align-items-center">
 7    已发送
 8    <span class="badge badge-primary badge-pill">50</span>
 9  </li>
10  <li class="list-group-item d-flex justify-content-between align-items-center">
11    垃圾邮件
12    <span class="badge badge-primary badge-pill">99+</span>
13  </li>
14</ul>

徽章的定位

通过结合Bootstrap的flexbox工具类，可以轻松地定位徽章：

右对齐徽章

html 
1<div class="d-flex justify-content-between">
2  <span>未读消息</span>
3  <span class="badge badge-primary">5</span>
4</div>

悬浮徽章（通知角标）

创建一个位于元素右上角的通知角标：

html 
1<div class="position-relative">
2  <button class="btn btn-primary">
3    <i class="fa fa-bell"></i>
4  </button>
5  <span class="position-absolute badge badge-danger" style="top: -10px; right: -10px;">5</span>
6</div>

徽章的使用场景

徽章在UI设计中有多种实用场景：

  1. 通知计数器 - 显示未读消息、通知或购物车项目数量
  2. 状态指示器 - 标记项目为"新"、“热门”、“已售完"等
  3. 标签 - 在内容中添加标签或分类信息
  4. 版本号 - 显示产品或功能的版本信息
  5. 用户级别 - 标识用户等级或权限

最佳实践

  1. 选择合适的颜色 - 根据徽章的语义含义选择颜色，保持一致
  2. 保持简短 - 徽章内容应简短明了，通常为数字或短文本
  3. 避免过度使用 - 页面上的徽章不宜过多，以免分散用户注意力
  4. 考虑可访问性 - 确保徽章的颜色对比度足够，方便所有用户识别
  5. 响应式设计 - 确保徽章在所有设备上正确显示

自定义徽章样式

除了Bootstrap预定义的样式，你还可以自定义徽章的外观：

css 
 1/* 自定义徽章背景色 */
 2.badge-custom {
 3  background-color: #6f42c1;
 4  color: white;
 5}
 6
 7/* 带边框的徽章 */
 8.badge-outline-primary {
 9  color: #007bff;
10  background-color: transparent;
11  border: 1px solid #007bff;
12}
13
14/* 较大的徽章 */
15.badge-lg {
16  font-size: 90%;
17  padding: 0.35em 0.8em;
18}

自定义样式的HTML使用：

html 
1<span class="badge badge-custom">自定义</span>
2<span class="badge badge-outline-primary">轮廓样式</span>
3<span class="badge badge-primary badge-lg">大号徽章</span>

注意事项

  • 在Bootstrap 5中，.badge类已不再需要配合颜色类使用，而是默认采用灰色
  • 徽章应提供足够的对比度，确保用户可以轻松阅读其内容
  • 为带有徽章的交互元素添加适当的悬停效果，提高用户体验