Bootstrap 徽章（Badges）

Bootstrap 徽章是一种用于展示文本信息或状态的小组件，常用于显示计数器、标签或提醒等。在 Bootstrap 中，使用徽章很简单，只需要添加一个带有“badge”类的容器元素即可。

基本用法

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

上面的代码展示了一个基本的徽章，只需在span元素中添加一个badge类名即可实现。默认情况下，徽章是灰色并且字体颜色为白色。可以使用以下类名来修改徽章的颜色：

<span class="badge badge-primary">New</span>

<a href="#" class="badge badge-primary">Link</a>

可以将徽章包装在一个链接元素中，当用户单击徽章时，将导航到链接的地址。

徽章通常用于显示计数器，可以将数字嵌入徽章中。只需在 span 元素中添加一个数字即可。

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

徽章可以在大多数父元素中使用，但是当在 nav、list-group-item 或 badge-pill 中使用时可能会看起来更合适。

如果需要使用圆角徽章，则在 badge 类名后添加 badge-pill 类名即可。

<span class="badge badge-pill badge-danger">Alert</span>

徽章可以分别显示文本或计数器，例如 10 和 New。

<span class="badge badge-primary">10</span>
<span class="badge badge-secondary">New</span>

徽章在任何 HTML 元素中都可以使用。因此，您可以将它们用作进程状态指示器，表单标签和其他元素中的标识符。

您也可以使用 JavaScript 动态地更新和操纵徽章。例如，您可以通过下面的代码更改徽章的文本。

var badge = document.querySelector('.badge');
badge.textContent = 'Updated';

Bootstrap 徽章是一种显示简洁信息或状态的小组件，可以轻松地通过添加 Bootstrap 样式类进行样式修改。徽章可以在任何 HTML 元素中使用，并且可以使用 JS 动态更改。