Skip to main content Skip to docs navigation
View on GitHub

徽章(Badge)

徽章(badge)组件相关的文档和示例。徽章(badge)是一种小型的用于计数和打标签的组件。

示例

徽章(badge)组件通过使用相对字体大小和 em 单位来实现缩放以匹配其直接父元素的大小。 从 Bootstrap v5 版本开始,徽章(badge)组件不再具有链接一样的焦点和鼠标悬停样式。

标题中的徽章

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
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>

按钮中的徽章

徽章(badge)组件可以作为链接或按钮的一个组成部分,以提供计数功能。

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

请注意,根据使用方式的不同,徽章(badge)组件可能会给使用屏幕阅读器及类似辅助技术的用户带来困惑。虽然徽章(badge)组件通过样式传达了有关其用途的视觉提示,但视觉受限的用户则只能获取到徽章(badge)组件内所包含的文本内容。根据具体使用情况(例如放在句子、链接或按钮的结尾处),这些徽章(badge)组件可能给人的印象是一串随机的单词或数字。

除非上下文是清晰的(例如,在 “Notifications” 示例中,数字 “4” 被理解为通知的条数),否则请考虑附上一段额外的文本并在视觉上设置为隐藏以提供一个额外的上下文。

Positioned

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>

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)相关的工具类可以快速更改徽章(badge)组件的外观。请注意,使用 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>
Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

胶囊式徽章(Pill badges)

使用 .rounded-pill 工具类能够让徽章(badge)组件的边角变得更圆滑(这是通过设置更大的 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

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:               $border-radius;