徽章

徽章，少量标签和标签组成部分的文档和示例。

本页导航↓

示例

通过使用相对字体大小和 em 单位，徽章可缩放以匹配直接父元素的大小。从v5开始，徽章不再具有链接的焦点或悬停样式。

Example heading New

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>

徽章可以作为链接或按钮的一部分来提供计数。

<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-secondary">4</span>
</button>

请注意，根据徽章的使用方式，徽章可能会让屏幕阅读器和类似辅助技术的用户感到困惑。虽然徽章的样式提供了一个关于其目的的视觉提示，但这些用户只会看到徽章的内容。根据具体情况，这些徽章可能看起来像随机添加在句子、链接或按钮后面的单词或数字。

除非上下文是清楚的（如“通知”示例所示，可以理解为“ 4”是通知的数量），否则请考虑在视觉上隐藏的附加文本中包含附加上下文。

<button type="button" class="btn btn-primary">
Profile <span class="badge bg-secondary">9</span>
<span class="visually-hidden">unread messages</span>
</button>

背景颜色

使用我们的后台实用程序类可以快速更改徽章的外观。请注意，使用Bootstrap的默认 .bg-light 时，您可能需要使用文本颜色实用程序（如 .text-dark ）来进行适当的样式设置。这是因为背景实用程序除了设置 background-color 外没有设置其他任何内容。

Primary Secondary Success Danger Warning Info Light Dark

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

向辅助技术传达意义

使用颜色来增加意义只提供了一种视觉指示，而不会向辅助技术(如屏幕阅读器)的用户传达这种指示。确保用颜色表示的信息从内容本身来看是明显的(例如可见文本)，或者是通过其他方法包括进来的，例如用 .visually-hidden 类隐藏的附加文本。

圆形徽章

使用 .rounded-pill 实用工具类使徽章更圆滑，有更大的 border-radius。

Primary Secondary Success Danger Warning Info Light Dark

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>