示例

¥Examples

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

¥Badges scale to match the size of the immediate parent element by using relative font sizing and em units. As of v5, badges no longer have focus or hover styles for links.

标题

¥Headings

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

按钮

¥Buttons

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

¥Badges can be used as part of links or buttons to provide a counter.

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

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

¥Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.

除非上下文明确（如 “通知” 示例，其中 “4” 是通知数量），请考虑使用视觉上隐藏的附加文本片段来包含附加上下文。

¥Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.

定位

¥Positioned

使用工具修改 .badge 并将其放置在链接或按钮的角落。

¥Use utilities to modify a .badge and position it in the corner of a link or button.

<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 类，而无需计算更通用的指标。

¥You can also replace the .badge class with a few more utilities without a count for a more generic indicator.

<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>

背景颜色

¥Background colors

使用我们的 .text-bg-{color} 助手 设置 background-color 与对比前景 color。以前，需要手动配对你选择的 .text-{color} 和 .bg-{color} 实用程序来进行样式设置，如果你愿意，你仍然可以使用它们。

¥Set a background-color with contrasting foreground color with our .text-bg-{color} helpers. Previously it was required to manually pair your choice of .text-{color} and .bg-{color} utilities for styling, which you still may use if you prefer.

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

药丸徽章

¥Pill badges

使用 .rounded-pill 工具类可以使用更大的 border-radius 使徽章更加圆润。

¥Use the .rounded-pill utility class to make badges more rounded with a larger border-radius.

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

CSS

变量

¥Variables

作为 Bootstrap 不断发展的 CSS 变量方法的一部分，徽章现在在 .badge 上使用本地 CSS 变量来增强实时自定义功能。CSS 变量的值是通过 Sass 设置的，因此仍然支持 Sass 自定义。

¥As part of Bootstrap’s evolving CSS variables approach, badges now use local CSS variables on .badge for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

--#{$prefix}badge-padding-x: #{$badge-padding-x};
--#{$prefix}badge-padding-y: #{$badge-padding-y};
@include rfs($badge-font-size, --#{$prefix}badge-font-size);
--#{$prefix}badge-font-weight: #{$badge-font-weight};
--#{$prefix}badge-color: #{$badge-color};
--#{$prefix}badge-border-radius: #{$badge-border-radius};

Sass 变量

¥Sass variables

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               var(--#{$prefix}border-radius);