Bootstrap5 徽章（Badges）
Bootstrap5 徽章
徽章（Badges）是一种小型的提示标签，经常用来标识某些状态或者计数。Bootstrap5 提供了很多不同风格和颜色的徽章，可以轻松地在你的项目中使用。
基本的徽章
最基本的徽章可以通过添加一个 class 为 badge 的 <span> 标签来创建。徽章的内容通常是一个数字，代表某种计数。
<span class="badge">5</span>
通过 badge class，徽章将拥有 Bootstrap 的默认颜色。在默认情况下，徽章的背景颜色是灰色的，文字颜色是白色的。如果需要修改徽章的背景颜色和文字颜色，可以使用其他的 class 样式。
徽章样式
Bootstrap5 提供了多个样式的徽章，满足你的不同需求。每种样式都拥有不同的背景颜色和文字颜色。以下是一些可用的样式：
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
圆角徽章
如果想要创建一个拥有圆形边角的徽章，可以添加 border-circle class。
<span class="badge bg-primary border-circle">1</span>
徽章大小
Bootstrap 提供了不同尺寸的徽章。
<span class="badge bg-primary">Small</span>
<span class="badge bg-primary badge-large">Large</span>
通过添加 badge-large class 可以创建大型的徽章。
徽章链接
Bootstrap 同样也提供了将徽章包裹在链接中的样式。
<a href="#" class="badge bg-primary">Link</a>
可禁用的徽章
需要将徽章禁用时。添加 disabled 和 opacity-50 类，可以实现禁用徽章和设置半透明度。
<span class="badge bg-primary disabled opacity-50">Disabled</span>
总结
在 Bootstrap5 中，徽章（Badges）是非常实用的一种提示标签。使用不同的 class 样式，可以实现不同的颜色和样式效果。可以应用到界面中的计数、状态等方面，让界面信息更加清晰明了。