徽章(Badge)

文件和徽章,我们的小计数和标签组件的例子。

例子

过使用相对字体大小和em单位,徽章可以缩放以匹配直接父元素的大小。从v5开始,徽章不再具有链接的焦点或悬停样式。

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>

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

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

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

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

<button type="button" class="btn btn-primary">
        Profile <span class="badge bg-secondary">9</span>
        <span class="visually-hidden">unread messages</span>
        </button>

背景颜色

使用我们的后台实用程序类快速更改徽章的外观。请注意,使用Bootstrap的默认.bg-light时,您可能需要一个文本颜色实用程序,如.text-dark,以获得正确的样式。这是因为背景实用程序只设置背景颜色。

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>
向辅助技术传达意义

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

胶囊徽章

使用.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;
        
返回顶部