什么是 Bootstrap 中的徽章？

徽章（Badge）是 Bootstrap 中常用的一种小型组件，通常用于展示数字、状态等信息。徽章可以让页面的信息更加直观，增加用户体验。在 Bootstrap 中，徽章通常组合在按钮、导航、表格等组件中，可以很方便地进行定制。

基本用法

Bootstrap 的徽章组件可以通过添加 badge 类来实现。我们可以在按钮、标签、链接等元素上添加徽章，例如：

<button type="button" class="btn btn-primary">
  消息 <span class="badge">4</span>
</button>
<a href="#" class="list-group-item">
  通知 <span class="badge">15</span>
</a>

以上代码中，我们分别在一个按钮和一个链接中添加了徽章。徽章可以位于文本的任意一侧，例如我们可以在按钮上添加一个右侧的徽章：

<button type="button" class="btn btn-primary">
  下载 <span class="badge badge-light">10</span>
</button>

注意到我们在徽章上还添加了 badge-light 类，这是用于设置徽章的背景色的。Bootstrap 为徽章提供了多种颜色选项，具体可参考下面的说明。

徽章颜色

Bootstrap 的徽章支持多种颜色，可以通过添加 badge-{color} 类来设置。以下是徽章颜色和对应的类名：

• 灰色（默认）：badge
• 红色：badge-danger
• 绿色：badge-success
• 蓝色：badge-primary
• 黄色：badge-warning
• 浅蓝色：badge-info
• 深灰色：badge-dark
• 浅灰色：badge-secondary

例如，我们可以使用 badge-warning 类来创建一个黄色的徽章：

<span class="badge badge-warning">N</span>

圆形徽章

Bootstrap 还提供了一种圆形的徽章形式，可以通过添加 rounded-pill 或 rounded-circle 类。其中，rounded-pill 用于设置为半圆形，rounded-circle 用于设置为圆形。

以下是一个圆形徽章的示例：

<span class="badge badge-danger rounded-circle">31</span>

徽章组合

在实际应用中，我们可能需要将多个徽章组合在一起，例如展示一个有评论和点赞数量的信息。Bootstrap 允许我们在同一个元素中添加多个徽章，通过空格来分隔。例如：

<button type="button" class="btn btn-primary">
  <span class="badge badge-light">10</span>
  <span class="badge badge-danger">5</span>
</button>

以上代码中，我们在按钮上同时添加了两个徽章，分别表示该条信息有 10 条回复和 5 次点赞。我们可以自由组合、设置徽章数量和颜色，以实现不同的展示效果。

总结

徽章是 Bootstrap 中常用的一种小型组件，用于展示数字、状态等信息。我们可以很方便地在各种元素上添加徽章，设置徽章的颜色和形状，并通过组合实现不同的展示效果。