徽章、我们的小计数和标签组件的文档和示例。
例子
徽章通过使用相对字体大小和单位进行缩放以匹配直接父元素的大小。从 v5 开始，锁屏提醒不再具有链接的焦点或悬停样式。em
标题
示例标题新增功能
示例标题新增功能
示例标题新增功能
示例标题新增功能
示例标题新增功能
示例标题新增功能
<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>按钮
徽章可以用作链接或按钮的一部分，以提供计数器。
<button type="button" class="btn btn-primary">
Notifications <span class="badge text-bg-secondary">4</span>
</button>请注意，根据徽章的使用方式，徽章可能会让屏幕阅读器和类似辅助技术的用户感到困惑。虽然徽章的样式提供了有关其用途的视觉提示，但这些用户只会看到徽章的内容。根据具体情况，这些徽章可能看起来像是句子、链接或按钮末尾的随机附加单词或数字。
除非上下文清晰（如“通知”示例，其中“4”是通知数），否则请考虑在视觉上隐藏的附加文本片段中包含附加上下文。
定位
使用实用程序修改 a 并将其放置在链接或按钮的角落。.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>背景颜色
在 v5.2.0 中添加使用我们的 .text-bg-{color} 助手设置一个具有对比前景的前景。以前需要手动配对您选择的 .text-{color} 和 .bg-{color} 实用程序进行样式设置，如果您愿意，您仍然可以使用它们。background-colorcolor
主要
二 次
成功
危险
警告
信息
光
黑暗
<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-pillborder-radius
主要
二 次
成功
危险
警告
信息
光
黑暗
<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 变量方法的一部分，徽章现在使用本地 CSS 变量来增强实时自定义。CSS 变量的值是通过 Sass 设置的，因此仍然支持 Sass 自定义。.badge
--#{$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 变量
$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);