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

[组件] 徽章(Badge)

徽章(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>
扫描二维码,手机查看
声明:本文来源于互联网,观点仅代表作者本人,不代表欢乐你我,真实性请妥善甄别。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则