Bootstrap4 徽章(Badges)
Bootstrap4徽章(Badges)是一种在用户界面中快速显示较小数据的简单和有效方法。徽章可以用于表示数字、文本或可视化图形来帮助用户识别内容的重要性。Bootstrap4徽章组件让徽章的样式和大小可以很容易地定制。
属性一览
Bootstrap4徽章提供三个属性可以随意组合使用:
.badge
:必须的类,标识一个徽章。.badge-primary
、.badge-secondary
、.badge-success
、.badge-danger
、.badge-warning
、.badge-info
、.badge-light
、.badge-dark
:用于设置不同颜色的徽章。.badge-pill
:用于设置徽章为圆形。
基础应用
以下示例演示了如何创建一个徽章:
<span class="badge">5</span>
其中的文本“5”被包含在括号中,并用span元素添加了样式类“badge”。
设置颜色
徽章的颜色可以使用.badge-*
样式类设置。这里的“*”可以替换为8种不同的颜色的任意一种。以下是目前已经支持的8种颜色:
- Primary(蓝色)
- Secondary(灰色)
- Success(绿色)
- Danger(红色)
- Warning(黄色)
- Info(青色)
- Light(白色)
- Dark(黑色)
以下是如何创建一个红色徽章:
<span class="badge badge-danger">4</span>
胶囊形态的徽章
胶囊形态的徽章可以通过额外添加.badge-pill
样式类来实现:
<span class="badge badge-pill badge-primary">16</span>
上面的示例是对之前蓝色徽章的扩展,使其成为胶囊形态。.badge-pill
类的样式会将常规徽章变为圆形。
手动高度
在某些情况下,需要手动设置徽章的高度才能使其外观正常。这可以通过添加以下CSS代码来完成:
.badge-xxl {
padding: .75rem 1.5rem;
font-size: 1.5rem;
border-radius: 3rem;
}
上面的代码将创建一个名为“xxl”的CSS类,该类可以在任何徽章上应用。该类增加了.badge-pill
类,使其呈现为圆形。
总结
Bootstrap4徽章(Badges)是一种简单而有效的方法,用于在用户界面中快速显示较小数据和帮助用户识别内容的重要性。为了展示数据,徽章可以有不同的颜色和大小,还可以以胶囊样式展现圆形。Badge
通过上述属性及其取值就可以实现不同视觉效果。