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通过上述属性及其取值就可以实现不同视觉效果。

Bootstrap4 弹出框 Bootstrap4 折叠