©
This document uses PHP Chinese website manual Release
徽章的文档和示例,我们的小计数和标签组件。
使用相对字体大小与直接父元素的大小相匹配的徽章比例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(徽章)可以用作链接或按钮的一部分来提供计数器。
<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>
添加下面提到的任何修饰符类来更改徽章的外观。
<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
类中的其他文本。
使用.badge-pill
修饰符类可以使徽章更圆润(使用更大border-radius
和更多的水平线padding
)。如果您错过了 v3 的徽章,这很有用。
<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-*
类可快速提供悬停和焦点状态的可操作徽章。
<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>