Bootstrap收藏本版 1 +发表新主题

[组件] 徽章(Badge)

大米 0 29
徽章(Badge)
.badge徽章样式的使用、数字提示扩展样式以及小规格徽章的示例和使用文档。

示例

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

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
  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>

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

  1. <button type="button" class="btn btn-primary">

  2.   Notifications <span class="badge badge-light">4</span>

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

Primary Secondary Success Danger Warning Info Light Dark 
  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中的特色功能）。

Primary Secondary Success Danger Warning Info Light Dark 
  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> 元素上使用，并实现悬停、焦点、状态等效果。

Primary Secondary Success Danger Warning Info Light Dark 
  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>
扫描二维码，手机查看
声明：本文来源于互联网，观点仅代表作者本人，不代表hl05.,真实性请妥善甄别。
回复 举报