©
本文档使用php.cn手册发布
徽章的文档和示例,我们的小计数和标签组件。
使用相对字体大小与直接父元素的大小相匹配的徽章比例em
各单位。
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Badges(徽章)可以用作链接或按钮的一部分来提供计数器。
请注意,取决于如何使用它们,徽章可能会让屏幕阅读器和类似辅助技术的用户感到困惑。虽然徽章造型提供了一个关于其目的的视觉提示,但这些用户只会看到徽章的内容。根据具体情况,这些徽章可能看起来像是句子,链接或按钮末尾的随机附加单词或数字。
除非上下文清楚(与“通知”示例一样,在了解“4”是通知数量的情况下),请考虑在其他上下文中添加一段视觉隐藏的附加文本。
添加下面提到的任何修饰符类来更改徽章的外观。
PrimarySecondarySuccessDangerWarningInfoLightDark
使用颜色来增加意义只能提供一种视觉指示,而不会传达给辅助技术的用户 - 如屏幕阅读器。确保由颜色表示的信息或者来自内容本身(例如可见文本),或者通过其他方式包含,例如隐藏在.sr-only
类中的其他文本。
使用.badge-pill
修饰符类可以使徽章更圆润(使用更大border-radius
和更多的水平线padding
)。如果您错过了 v3 的徽章,这很有用。
PrimarySecondarySuccessDangerWarningInfoLightDark