Bootstrap 3 之 Bootstrap 徽章

Bootstrap 徽章是一种用来展示数字或者文本信息的小标签，通常用来显示数字、提醒信息或者标识特定状态。在 Bootstrap 3 中，徽章是一种非常常见的元素，可以轻松地通过 Bootstrap 提供的类来创建和定制。

创建徽章

要创建一个简单的徽章，在任何元素中添加 badge 类即可。例如：

<span class="badge">42</span>

这将会在页面中显示一个带有数字 "42" 的徽章。

徽章样式

Bootstrap 提供了多种样式来定制徽章的外观。可以通过添加不同的类来改变徽章的颜色和样式。以下是一些常见的样式类：

• badge-default
• badge-primary
• badge-success
• badge-info
• badge-warning
• badge-danger

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

徽章形状

除了颜色样式之外，Bootstrap 也提供了不同形状的徽章，可以通过添加不同的类来改变徽章的形状。以下是一些常见的形状类：

• badge-pill（圆角矩形）
• badge-rounded（圆形）

<span class="badge badge-pill">Pill Badge</span>
<span class="badge badge-rounded">Rounded Badge</span>

徽章大小

Bootstrap 也提供了不同大小的徽章，可以通过添加不同的类来改变徽章的大小。以下是一些常见的大小类：

• badge-sm（小号）
• badge-lg（大号）

<span class="badge badge-sm">Small Badge</span>
<span class="badge badge-lg">Large Badge</span>

通过组合不同的样式、形状和大小类，可以创建出各种不同风格的徽章，以满足不同设计需求。Bootstrap 徽章的灵活性和易用性使其成为前端开发中常用的元素之一。