Bootstrap4 徽章(Badges
),本章介绍了如何创建徽章,徽章可以根据父元素的大小变化而变化,同时也介绍了颜色徽章,药丸形状徽章和元素内徽章。
创建徽章
使用徽章,只需要将 .badge
类加上带有指定意义的颜色类 (如 .badge-secondary
) 添加到 <span>
元素上即可。 徽章可以根据父元素的大小的变化而变化。
输出结果如下:
颜色徽章
Bootstrap 支持多种颜色徽章,如.badge-danger
,.badge-warning
,.badge-primary
,.badge-secondary
,.badge-info
,.badge-light
,.badge-dark
。
输出结果如下:
药丸形状徽章
可以通过类.badge-pill
实现药丸形状徽章。
输出结果如图:
元素内徽章
可以在其他元素内嵌套徽章
输出结果如图: