Bootstrap4学习笔记——Badge徽章

    徽章,Bootstrap4的组件之一,用于计数和标签展示。这个组件对我们来说并不陌生,QQ的未读消息小红点就是其中之一,这个组件是我这种强迫症的天敌,但并不是没有用。
    徽章使用相对字体大小和em单位来缩放以匹配直接父元素的大小,徽章可以用作链接或按钮的一部分来提供计数器。
使用方法:
直接在需要添加计数器标签的元素上标明类badge即可,badge自带颜色辅助类,通常用于span,a标签。

基本用法

将带有badge类的标签嵌入需要计数标签的元素中即可,如下

结果展示

颜色

badge自带颜色,只需在在badge基础下添加badge-*类即可如下:

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
结果展示

注: 标签带颜色后自带hover样式

你可能感兴趣的:(Bootstrap4学习笔记——Badge徽章)