Bootstrap/docs/4.5/components/badge
来自菜鸟教程
徽章
证件,我们的小数量和标签组件的文档和示例。
例
通过使用相对字体大小和,徽章可以缩放以匹配直接父元素的大小。 em 单位。
标题示例 New
标题示例 New
标题示例 New
标题示例 New
标题示例 New
标题示例 New
<h1> 标题示例 <span class="badge badge-secondary">New</span></h1>
<h2> 标题示例 <span class="badge badge-secondary">New</span></h2>
<h3> 标题示例 <span class="badge badge-secondary">New</span></h3>
<h4> 标题示例 <span class="badge badge-secondary">New</span></h4>
<h5> 标题示例 <span class="badge badge-secondary">New</span></h5>
<h6> 标题示例 <span class="badge badge-secondary">New</span></h6>徽章可以用作链接或按钮的一部分,以提供计数器。
<button class="btn btn-primary" type="button"> 通知 <span class="badge badge-light">4</span>
</button>请注意,根据使用方式的不同,徽章可能会使屏幕阅读器和类似辅助技术的用户感到困惑。 虽然徽章的样式提供了有关其用途的视觉提示,但这些用户将仅看到徽章的内容。 根据具体情况,这些标记在句子,链接或按钮的末尾可能看起来像是随机附加的单词或数字。
除非上下文清楚（如“通知”示例一样,理解为“ 4”是通知的数量）,否则请考虑在视觉上隐藏的附加文本中包含附加上下文。
<button class="btn btn-primary" type="button"> 轮廓 <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>上下文差异
添加下面提到的任何修饰符类,以更改徽章的外观。
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>向辅助技术传达意义
使用颜色添加含义仅提供视觉指示,而不会传达给辅助技术的用户（例如屏幕阅读器）。 确保用颜色表示的信息从内容本身来看是显而易见的（例如 可见的文字）,或通过其他方式（例如, .sr-only 类。
药丸徽章
使用 .badge-pill 修饰符类,使徽章更加圆润（具有更大的 border-radius 和其他水平 padding ). 如果您错过了v3的徽章,则很有用。
主
次要
成功
危险
警告
Info
光
Dark
<span class="badge badge-pill badge-primary"> 主 </span>
<span class="badge badge-pill badge-secondary"> 次要 </span>
<span class="badge badge-pill badge-success"> 成功 </span>
<span class="badge badge-pill badge-danger"> 危险 </span>
<span class="badge badge-pill badge-warning"> 警告 </span>
<span class="badge badge-pill badge-info"> Info </span>
<span class="badge badge-pill badge-light"> 光 </span>
<span class="badge badge-pill badge-dark"> Dark </span>链接
使用上下文 .badge-* 上的课程 <a> 元素快速提供 可行的 带有悬停状态和焦点状态的徽章。
<a class="badge badge-primary" href="#"> 主 </a>
<a class="badge badge-secondary" href="#"> 次要 </a>
<a class="badge badge-success" href="#"> 成功 </a>
<a class="badge badge-danger" href="#"> 危险 </a>
<a class="badge badge-warning" href="#"> 警告 </a>
<a class="badge badge-info" href="#"> Info </a>
<a class="badge badge-light" href="#"> 光 </a>
<a class="badge badge-dark" href="#"> Dark </a>