简介：在 Bootstrap v5 中，徽章是简单且基本的组件，用于显示指标或计算数字。这对于邮件计数和警报目的非常有用，等等。徽章与标签相同，只是它们有更多的圆角。徽章通过使用相对字体大小和 em 单位进行缩放以匹配直接父元素的大小。自 Bootstrap v5 起，徽章不再具有链接的焦点或悬停样式。
方法：我们可以在 元素中创建徽章 .badge 类来创建矩形徽章。我们还可以使用上下文类（如 .badge-secondary）轻松创建不同的徽章变体。以下是在 Bootstrap 中实现简单徽章的过程。
第 1 步：在所有其他样式表之前将 Bootstrap 和 jQuery CDN 包含到
标签中以加载我们的 CSS。第 2 步：在
标签中添加 标签。GeeksForGeeks New
第 3 步：添加 .badge 类和 元素内的上下文类（如 .badge-secondary）。
GeeksForGeeks New
注意：屏幕阅读器和其他辅助技术的用户可能会发现徽章令人困惑，这取决于它们的使用方式。虽然徽章的设计为用户提供了有关其用途的视觉线索，但这些用户只会看到徽章的文本。根据上下文，这些标记可能会在短语末尾显示为随机的额外单词或数字。
示例 1：在此示例中，我们将在文本前显示徽章以突出显示文本。在下面的示例中，显示了“New”标志。徽章将能够通知用户有关他帐户中存在的任何“新”帖子或消息。徽章可以用作直接导航到网页的链接或网页按钮以提供计数器。
index.html
Badges Example
Badges in Bootstrap
GeeksForGeeks Example
New
GeeksForGeeks Example
New
GeeksForGeeks Example
New
GeeksForGeeks Example
New
GeeksForGeeks Example
New
GeeksForGeeks Example
New
index.html
Badges Example
index.html
Badges Example
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
输出：
Bootstrap 中的徽章
示例 2：在示例中，我们将在显示计数器的按钮内使用徽章。它显示用户有 4 条通知、10 条消息和 2 条更新。它将通知用户检查这些通知、消息和更新。我们还可以更改背景实用程序来更改徽章的颜色。我们可以用红色来表示危险，也可以用黄色来表示警告等。
索引.html
Badges Example
输出：
在 Bootstrap 中使用徽章显示计数器
示例 3：在此示例中，我们还将更改背景实用程序类以快速修改徽章的外观。请注意，在使用 Bootstrap 的默认 .bg-light 时，您可能需要像 .text-dark 这样的文本颜色实用程序来进行正确的样式设置。这是因为背景实用程序只设置背景颜色。
索引.html
Badges Example
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
输出：
徽章的不同背景颜色以增加它们的意义
注意：赋予辅助技术一种目的感 颜色可以用来增加意义，但辅助技术的用户，如屏幕阅读器，将无法理解它。确定由颜色表示的信息是从内容本身显而易见的（例如可见文本），还是通过其他方式包含在内。