徽章（Badge）

徽章（我们的小计数和标签组件）的文档和示例。

On this page

示例

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

标题

Example heading New

html

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

按钮

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

html

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

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

除非上下文很清楚（就像 “通知"的例子，大家都知道 “4"是通知的数量），否则可以考虑用视觉上隐藏的附加文字来增加上下文。

定位

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

html

<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 类，以获得更通用的指示器。

html

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

背景色

Added in v5.2.0

使用我们的 .text-bg-{color} 助手，设置带有对比色前景色的背景色。以前需要手动选择 .text-{color}和 .bg-{color}工具来搭配样式，如果你愿意，仍然可以使用。

Primary Secondary Success Danger Warning Info Light Dark

html

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

可用性提示： 使用颜色来增加含义，只能提供视觉指示，无法传达给屏幕阅读器等辅助技术的用户。请确保从内容本身（例如，具有足够色彩对比度的可见文本）或通过其他方式（例如使用.visually-hidden类隐藏的附加文本）明显看出含义。

胶囊徽章

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

Primary Secondary Success Danger Warning Info Light Dark

html

<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

变量

Added in v5.2.0

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

scss/_badge.scss

--#{$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 变量

scss/_variables.scss

$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);