[组件] 徽章(Badge)
徽章(Badge)
.badge
徽章样式的使用、数字提示扩展样式以及小规格徽章的示例和使用文档。
示例
.badge
可以嵌在标题中,并通过标题样式来适配其元素大小,因为其本身是通过相对字体大小和em单位的,所以有良好的弹性。
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
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
的变化(颜色、大小等-译者注):
- <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中的特色功能)。
- <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>
元素上使用,并实现悬停、焦点、状态等效果。
- <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>
扫描二维码,手机查看
声明:本文来源于互联网,观点仅代表作者本人,不代表欢乐你我,真实性请妥善甄别。