徽章(Badge)

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

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

徽章(Badge) - 图2

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

Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.

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

徽章(Badge) - 图4

  1. <span class="badge badge-primary">Primary</span>
  2. <span class="badge badge-secondary">Secondary</span>
  3. <span class="badge badge-success">Success</span>
  5. <span class="badge badge-warning">Warning</span>
  6. <span class="badge badge-info">Info</span>
  7. <span class="badge badge-light">Light</span>

网页中传达辅助技术及其背后的意义

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

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

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

  1. <a href="#" class="badge badge-primary">Primary</a>
  2. <a href="#" class="badge badge-secondary">Secondary</a>
  3. <a href="#" class="badge badge-success">Success</a>
  4. <a href="#" class="badge badge-danger">Danger</a>
  5. <a href="#" class="badge badge-warning">Warning</a>
  6. <a href="#" class="badge badge-info">Info</a>