Badges徽章

~~Documentation and examples for badges, our small count and labeling component.~~徽章、小数量和标签组件的文档和示例。

~~On this page~~本页内容

Examples例子

~~Badges scale to match the size of the immediate parent element by using relative font sizing and em units.~~ 通过使用相对字体大小和em单位，标记缩放以匹配直接父元素的大小。~~As of v5, badges no longer have focus or hover styles for links.~~从v5开始，徽章不再具有链接的焦点或悬停样式。

Headings标题

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>

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 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.~~根据具体情况，这些徽章可能看起来像是句子、链接或按钮末尾的随机附加单词或数字。

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.除非上下文是清楚的（如“通知”示例），在这里理解“4”是通知的数量，考虑包括附加的上下文与可视隐藏的附加文本。

Positioned定位

~~Use utilities to modify a .badge and position it in the corner of a link or button.~~使用实用程序修改.badge并将其放置在链接或按钮的角落。

<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.~~您还可以使用其他一些实用程序替换.badge类，而不需要计算更通用的指示符。

<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背景色

~~Use our background utility classes to quickly change the appearance of a badge.~~ 使用我们的后台实用程序类快速更改徽章的外观。~~Please note that when using Bootstrap’s default .bg-light, you’ll likely need a text color utility like .text-dark for proper styling.~~ 请注意，当使用Bootstrap的默认.bg-light时，您可能需要一个文本颜色实用程序，如.text-dark，以便进行适当的样式设置。~~This is because background utilities do not set anything but background-color.~~这是因为背景实用程序只设置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.确保由颜色表示的信息在内容本身（例如可见文本）中是明显的，或者通过其他方式包括，例如使用.visually-hidden类隐藏的其他文本。

Pill badges胶囊徽章

~~Use the .rounded-pill utility class to make badges more rounded with a larger border-radius.~~使用.rounded-pill实用程序类使徽章更圆，边界半径更大。

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;