Bootstrap 中的标签和徽章是什么

概述

Bootstrap 中的标签 (Tag) 和徽章 (Badge) 是用于快速添加可视化标记的小组件。在不同的场景下，它们可以用于显示状态、数量、分类等信息。

标签

Bootstrap 中的标签元素是由一个简短的文本和一些可选的边框和背景色构成的。它们被广泛应用于分类或标识页面的内容。标签可以通过 .label 类名进行样式化，如下所示：

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

以上代码会生成六个不同颜色的标签。

徽章

Bootstrap 中的徽章元素可以用于在页面上显示数字或文本的提示信息，例如通知数量、未读消息等。徽章样式可以通过 .badge 类进行自定义。如下所示：

<button type="button" class="btn btn-primary">
  Messages <span class="badge">4</span>
</button>

以上代码将在按钮上显示一个带有数字徽章的文本。

结语

通过 Bootstrap 中的标签和徽章元素，我们可以快速、简单地为页面上的内容添加分类和提示信息。开发者可以根据自己的需求自定义标签和徽章的样式和内容，丰富页面的交互性和可用性。