示例

.badge可以嵌在标题中，并通过标题样式来适配其元素大小，因为其本身是通过相对字体大小和em单位的，所以有良好的弹性。

Example heading New

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

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

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

请注意，根据使用方式的不同，徽章可能会让屏幕阅读器和类似辅助技术的用户感到困惑。虽然徽章的样式提供了有关其用途的视觉提示，但这些用户只会看到徽章的内容。根据具体情况，这些徽章可能看起来像是句子、链接或按钮结尾处随机添加的单词或数字。
除非上下文是清楚的（如“Notifications”示例，其中理解为“4”是通知的数量），否则请考虑包含具有可视隐藏的附加文本片段的附加上下文。

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

情景变化

加入以下的 Class 样式来定义.badge的变化（颜色、大小等-译者注）：

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该类中的附加文本来创造更多的辅助传达技术。

.sr-only，全称 screen reader only,意为:(仅供)屏幕阅读器,这个 class 主要用于增强 accessbility(可访问性),有时候 UI 上会出现一些仅供视觉识别的元素，比如说“菜单按钮”，只有视力正常的人才能清楚辨识这些元素的作用。而残障人士，比如弱势或盲人是不可能知道这些视觉识别元素是什么的。他们上网使用的是屏幕阅读器，也就是 screen reader（sr），屏幕阅读器需要找到能辨识的文本说明然后“读”出来给用户听。问题是图形元素怎么可能“读出来”呢？因此我们还要写上这些元素的文本说明，但是又不需要展示给普通用户看到，于是加上 sr-only 的意义就在于能保证屏幕阅读器正确读取且不会影响 UI 的视觉呈现（译者补充）。

椭圆形胶囊标签

使用 .badge-pill样式，可以使标签更加圆润（具体有较大的border-radius边框半径和水平padding），如果你错过了V3的标签这是有用的（这是Bootstrap 4中的特色功能）。

Primary Secondary Success Danger Warning Info Light Dark

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

带链接效果

.badge-* 也可以在 <a> 元素上使用，并实现悬停、焦点、状态等效果。

Primary Secondary Success Danger Warning Info Light Dark

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>

扫描二维码，手机查看

声明：本文来源于互联网，观点仅代表作者本人，不代表欢乐你我,真实性请妥善甄别。

回复举报