示例

🌐 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

使用 background-color 设置具有对比前景的 color，并使用 我们的 .text-bg-{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);