Bootstrap 徽章

徽章（Badge）是文字右侧的圆形小标记，最常见于"未读消息数、待办数量"等统计场景。它与标签不同：标签侧重描述状态，徽章更擅长显示数字，且形状近似圆形、适合贴在各类控件右侧。

链接中的徽章

在链接里放入 .badge，悬停时徽章会随链接反色，提示这里有可点击的入口：

<a href="#">收件箱 <span class="badge">12</span></a>

效果：链接右侧出现一个灰底圆形数字"12"；鼠标移上链接时徽章变为白底深色文字。

按钮中的徽章

按钮内也可以放徽章，用来显示例如购物车中的商品件数：

<button type="button" class="btn btn-primary">
  购物车 <span class="badge">3</span>
</button>

效果：蓝色按钮右侧多出一个白色圆形数字，与按钮底色形成鲜明对比。

胶囊式导航中的徽章

在胶囊式标签页（.nav-pills）中，徽章会自动靠右对齐，适合做后台菜单的计数：

<ul class="nav nav-pills">
  <li class="active"><a href="#">首页 <span class="badge">5</span></a></li>
  <li><a href="#">设置</a></li>
</ul>

效果：激活项右侧显示数字徽章并自动靠右，没有徽章的项保持普通链接样式。

徽章与标签的区别

徽章和标签用法相近，选型时记住一句话：数字用徽章、文字用标签。

组件	形状	典型内容	常见位置
.badge 徽章	近似圆形	数量计数	链接、按钮、列表右侧
.label 标签	圆角方块	状态文字	标题旁、行内文字后

小结：.badge 用来放数量角标，放进链接、按钮或胶囊导航时会自动适配；在列表组中为条目计数时同样优先考虑它。