徽章(badge)组件通过使用相对字体大小和 em
单位来实现缩放以匹配其直接父元素的大小。 从 Bootstrap v5 版本开始,徽章(badge)组件不再具有链接一样的焦点和鼠标悬停样式。
徽章(badge)组件可以作为链接或按钮的一个组成部分,以提供计数功能。
使用通用工具类修改一个 .badge
。标记并将其放置在链接或按钮的角落。
你还可以使用其他的工具类实现下面一个红点的效果。
通过使用背景色(background)相关的工具类可以快速更改徽章(badge)组件的外观。请注意,使用 Bootstrap 的默认 .bg-light
类时,你需要使用文本颜色相关的工具类(例如 .text-dark
)来设置适当的文本颜色。这是因为背景色相关的工具类除了设置 background-color
外不会更改任何其它设置。
使用 .rounded-pill
工具类能够让徽章(badge)组件的边角变得更圆滑(这是通过设置更大的 border-radius
实现的)。