in English
徽章
徽章的文档和示例,我们的小数量和标签组件。
在本页面
例子
徽章通过使用相对字体大小和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>
纽扣
徽章可用作链接或按钮的一部分以提供计数器。
<button type="button" class="btn btn-primary">
Notifications <span class="badge 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>
背景颜色
使用我们的后台实用程序类来快速更改徽章的外观。请注意,当使用 Bootstrap 的 default 时.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>
向辅助技术传达意义
使用颜色来添加含义仅提供视觉指示,不会传达给辅助技术的用户 - 例如屏幕阅读器。确保由颜色表示的信息在内容本身(例如可见文本)中是显而易见的,或者通过替代方式包含在内,例如隐藏在.visually-hidden
类中的附加文本。
药丸徽章
使用.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>
萨斯
变量
$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;