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 样式,可以实现不同的颜色和样式效果。可以应用到界面中的计数、状态等方面,让界面信息更加清晰明了。