Bootstrap 4 - 徽章

Bootstrap 4 中的徽章可用于提供有关内容的附加信息。例如，一个网站与一些通知数量与链接相关联。当登录到特定网站时，会看到通知数量，它告诉通过单击要查看的新闻或通知的数量。

徽章与标签有些相似；主要区别是角更圆润。徽章主要用于突出显示或更强调网页列表中新的或未读的项目。

用户可以在他们的网站上实现徽章，以增强整个网站的外观。

在 Bootstrap 4 中，可以实现 4 种类型的徽章

1. 基本徽章
2. 上下文徽章
3. 药丸徽章
4. 位于元素内的徽章

基本徽章

在基本徽章中，用户必须使用 .badge 类才能创建矩形徽章。基本徽章具有基本布局。

以下给出了 Bootstrap 4 中基本徽章的示例

基本徽章的输出将是

上下文徽章

上下文类可用于更改徽章的颜色。徽章可以用作链接或按钮的一部分，以便提供计数器。这主要取决于它们的使用方式；徽章对于用户来说一定是令人困惑的。为此，使用了不同的颜色变化，以便用户可能不会感到困惑。

以下给出了 Bootstrap 4 中上下文徽章的示例

上下文徽章的输出将是

药丸徽章

药丸徽章可用于创建具有更圆角的徽章。可以使用 .badge-pill 类使徽章角更圆润，这意味着徽章将包含更大的边框半径，并且还将包含额外的边框填充。

以下给出了 Bootstrap 4 中药丸徽章的示例

药丸徽章的输出将是

位于元素内的徽章

在 Bootstrap 4 中，也可以以这样的方式创建徽章，即它位于元素内部。为此，用户必须将徽章嵌套在 <button> 元素内。

以下给出了 Bootstrap 4 中位于元素内部的徽章的示例

位于元素内部的徽章的输出将是