徽章 | Badges

Badges（徽章）

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

示例

使用相对字体大小与直接父元素的大小相匹配的徽章比例em各单位。

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

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

在 getbootstrap.com 上打开示例

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

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

除非上下文清楚（与“通知”示例一样，在了解“4”是通知数量的情况下），请考虑在其他上下文中添加一段视觉隐藏的附加文本。

在 getbootstrap.com 上打开示例

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

环境变化

添加下面提到的任何修饰符类来更改徽章的外观。

在 getbootstrap.com 上打开例子

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

将意义传递给辅助技术

使用颜色来增加意义只能提供一种视觉指示，而不会传达给辅助技术的用户 - 如屏幕阅读器。确保由颜色表示的信息或者来自内容本身（例如可见文本），或者通过其他方式包含，例如隐藏在.sr-only类中的其他文本。

丸徽章（Pill badges）

使用.badge-pill修饰符类可以使徽章更圆润（使用更大border-radius和更多的水平线padding）。如果您错过了 v3 的徽章，这很有用。

在 getbootstrap.com 上打开示例

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

链接

在<a>元素上使用环境.badge-*类可快速提供悬停和焦点状态的可操作徽章。

在 getbootstrap.com 上打开示例

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