bootstrap5 徽章(Badges)

原创
半兽人 发表于: 2020-06-25   最后更新时间: 2021-09-01 15:20:12  
{{totalSubscript}} 订阅, 2,165 游览

例子

徽章(Badges)通过使用相对的字体大小和em单位来匹配直接父元素的大小。从v5开始,徽章不再有焦点或悬停风格的链接。

<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

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

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

在线运行

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

除非上下文很清楚(就像 "通知"的例子一样,可以理解为"4"是通知的数量),否则可以考虑用一段视觉上隐藏的附加文本来加入附加的上下文。

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

在线运行

放置(Positioned)

修改 .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>

在线运行

你也可以用一些没有计数的来代替.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>

在线运行

背景颜色

使用我们的后台实用程序类可以快速更改徽章的外观。请注意,使用Bootstrap的默认.bg-light时,您可能需要使用文本颜色实用工具(如.text-dark)来进行适当的样式设置。这是因为后台实用程序除了设置background-color之外没有设置其他任何内容。

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

在线运行

Pill badges(胶囊徽章)

使用.rounded-pill让徽章变得更加圆润,有更大的border-radius(边界半径)

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

在线运行

更新于 2021-09-01

查看bootstrap5更多相关的文章或提一个关于bootstrap5的问题,也可以与我们一起分享文章
提问