Bootstrap 5 徽章

Bootstrap 5 徽章用于向任何类型的材料添加额外的信息。使用 <span> 组件中的 ".badge" 和上下文类来创建矩形徽章。徽章的比例必须与其父元素的大小相匹配。

标题中的徽章

Bootstrap 5 徽章用于了解有关标题的更多信息。它根据标题大小放置在 span 标签中。

语法

以下语法使用 Bootstrap 5 类创建徽章。

示例

以下示例显示了标题标签内的徽章。每个徽章都根据标题标签设置其大小。

输出

以下输出显示了带有标题标签的徽章。

Bootstrap 5 上下文徽章

Bootstrap 5 徽章提供有关父元素的额外信息。上下文徽章根据用户需求提供不同的背景颜色。

示例

以下示例显示了标题标签内具有不同背景颜色的徽章。我们可以在带有 badge 类的 span 标签中使用上下文类。

输出

以下输出显示了带有 <h6> 标签的不同背景颜色的徽章。

Bootstrap 5 药丸徽章

Bootstrap 5 徽章与父元素放置在一起以获取少量信息。我们可以使用带有 "rounded-pill" 类的 "badge" 类来查看药丸大小的徽章。

语法

以下语法使用 Bootstrap 5 类创建药丸徽章。

示例

以下示例显示了使用网页中的 Bootstrap 5 类显示的药丸样式徽章。

输出

以下输出显示了带有给定标签的药丸徽章。

按钮中的徽章

Bootstrap 5 徽章用于按钮内部。按钮功能显示有关按钮功能的额外信息。例如，该按钮显示带有 Web 功能的未读消息（数字）的徽章。

示例

以下示例显示了按钮功能内部的徽章。

输出

以下输出显示了按钮功能中的徽章。

结论

此元素在网页上向用户显示一个小的、引人注目的功能。它是用户的吸引交互的功能，来自于大型网页。Bootstrap 5 徽章用于显示有关该功能的少量和必需的信息。