徽章(Badge)

.badge徽章样式的使用、数字提示扩展样式以及小规格徽章的示例和使用文档。

示例

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

徽章(Badge) - 图1

  1. <h1>Example heading <span class="badge badge-secondary">New</span></h1>
  2. <h2>Example heading <span class="badge badge-secondary">New</span></h2>
  3. <h3>Example heading <span class="badge badge-secondary">New</span></h3>
  4. <h4>Example heading <span class="badge badge-secondary">New</span></h4>
  5. <h5>Example heading <span class="badge badge-secondary">New</span></h5>
  6. <h6>Example heading <span class="badge badge-secondary">New</span></h6>

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

徽章(Badge) - 图2

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

Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.

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.

徽章(Badge) - 图3

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

情景变化

加入以下的 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>
  4. <span class="badge badge-danger">Danger</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>
  8. <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中的特色功能）。

徽章(Badge) - 图5

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

带链接效果

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

徽章(Badge) - 图6

  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>
  7. <a href="#" class="badge badge-light">Light</a>
  8. <a href="#" class="badge badge-dark">Dark</a>