Badges

徽章的文档和示例，我们的小数量和标签组件。

内容提要

示例

徽章通过使用相对字体大小和 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”是通知的数量），请考虑在视觉隐藏的附加文本中包含附加上下文。

定位

使用实用程序将 .badge 放置在链接或按钮的角落。

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

您还可以用实用程序替换 .badge 类，不显示计数，而显示一个更通用的指示。

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </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 类隐藏的附加文本。

药丸徽章(Pill badges)

使用 .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>

Sass

变量

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;