徽章(Badges)

徽章(Badges),我们的小数量和标签组件的文档和示例。

例子

徽章(Badges)通过使用相对字体大小和em单位缩放以匹配直接父元素的大小。

Example heading New

Example heading New

Example heading New

Example heading New

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

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

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

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

除非上下文是清楚的(例如,在“通知”示例中理解为“ 4”是通知的数目),否则请考虑在视觉上隐藏的附加文本中包含附加上下文。

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

上下文差异

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

Primary Secondary Success Danger Warning Info Light Dark
<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>
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 .sr-only class.

药丸徽章

使用.badge-pill修饰符类可以使徽章更圆(带有较大的“ border-radius”和附加的水平“ padding”)。 如果您错过了v3的徽章,则很有用。

Primary Secondary Success Danger Warning Info Light Dark
<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- *类可以快速为_actionable_徽章提供悬停和焦点状态。

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