Bootstrap 4 徽章（Badges）

引言

Bootstrap 4 是目前最受欢迎的前端框架之一，它提供了一套丰富的工具和组件，帮助开发者快速构建响应式和移动设备优先的网页。在本文中，我们将重点讨论 Bootstrap 4 中的一个实用组件——徽章（Badges）。

什么是徽章？

徽章是 Bootstrap 4 中的一种小型标记组件，通常用于突出显示新的或未读的信息数量，如消息通知、任务完成情况等。它们通常附加在按钮、导航链接或其他元素上，以吸引用户的注意。

如何使用徽章？

在 Bootstrap 4 中，创建徽章非常简单。您只需要将文本包裹在一个带有 badge 类的元素中即可。例如，使用一个 span 元素：

<span class="badge badge-primary">新消息</span>

这段代码将创建一个带有“新消息”文字的徽章，并应用了 badge-primary 类，使其具有 Bootstrap 4 默认的蓝色背景。

徽章的样式

Bootstrap 4 提供了多种预定义的徽章样式，用于不同的场景和目的。以下是一些常用的徽章样式类：

• badge-primary：蓝色背景，用于主要徽章。
• badge-secondary：灰色背景，用于次要徽章。
• badge-success：绿色背景，