跳到主要内容
在 GitHub 查看原文

徽标

徽章的文档和示例，我们的小型计数和标签组件。

本页目录

示例

徽章通过使用相对字体大小和em单位来匹配其直接父元素的大小。从 v5 开始，徽章不再为链接提供焦点或悬停样式。

标题

示例标题 新

示例标题 新

示例标题 新

示例标题 新

示例标题 新
示例标题 新
HTML
<h1>Example heading <span class="badge text-bg-secondary">New</span></h1>
<h2>Example heading <span class="badge text-bg-secondary">New</span></h2>
<h3>Example heading <span class="badge text-bg-secondary">New</span></h3>
<h4>Example heading <span class="badge text-bg-secondary">New</span></h4>
<h5>Example heading <span class="badge text-bg-secondary">New</span></h5>
<h6>Example heading <span class="badge text-bg-secondary">New</span></h6>

按钮

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

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

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

除非上下文很清楚（例如“通知”示例，其中可以理解“4”表示通知的数量），否则应考虑在视觉上隐藏的一段附加文本中包含额外的上下文。

定位

使用工具类修改.badge并将其放置在链接或按钮的角落。

HTML
<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类，以得到一个更通用的指示器。

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

背景颜色

在 v5.2.0 中添加

设置一个 background-color 有对比的前景 color 与 我们的 .text-bg-{color} 帮手以前需要手动配对你选择的 .text-{color} 和 .bg-{color} 用于样式的工具，如果你愿意，你仍然可以使用它们。

主要的 次要 成功 危险 警告 信息 光 黑暗
HTML
<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>

无障碍提示：仅使用颜色来增加意义只提供视觉提示，这对于使用辅助技术（如屏幕阅读器）的用户是无法传达的。请确保意义本身在内容中就显而易见（例如，可见文本通过 足够的颜色对比）或者通过其他方式包含，例如使用 .visually-hidden 类隐藏的额外文本。

胶囊徽章

使用 .rounded-pill 工具类使徽章更圆，并增加 border-radius。

主要 次要 成功 危险 警告 信息 光 黑暗
HTML
<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS

变量

在 v5.2.0 中添加

作为 Bootstrap 不断发展的 CSS 变量方法的一部分，徽章现在在 .badge 上使用本地 CSS 变量，以增强实时定制功能。CSS 变量的值通过 Sass 设置，因此仍然支持 Sass 定制。

scss/_徽章.scss
--#{$prefix}badge-padding-x: #{$badge-padding-x};
--#{$prefix}badge-padding-y: #{$badge-padding-y};
@include rfs($badge-font-size, --#{$prefix}badge-font-size);
--#{$prefix}badge-font-weight: #{$badge-font-weight};
--#{$prefix}badge-color: #{$badge-color};
--#{$prefix}badge-border-radius: #{$badge-border-radius};

Sass 变量

scss/_variables.scss
$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               var(--#{$prefix}border-radius);