Bootstrap4 徽章（Badges）学习笔记

介绍

Bootstrap4 徽章（Badges）是一种用来在页面上标记某些信息的组件，通常用于展示一些状态或数量信息。徽章可以设置背景颜色、字体颜色、形状和大小等多个属性，非常灵活和方便使用。

基本用法

徽章的基本用法非常简单，使用<span>标签创建一个包含文字内容的徽章即可。例如：

htmlCopy Code
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

上述代码将会生成一个包含不同颜色的徽章，分别显示不同的文本内容。

添加计数器

徽章还可以添加数字计数器，用于显示数量或者统计信息。只需在徽章中加入数字即可，例如：

htmlCopy Code
<span class="badge badge-primary">5</span>
<span class="badge badge-secondary">10</span>
<span class="badge badge-success">15</span>
<span class="badge badge-danger">20</span>
<span class="badge badge-warning">25</span>
<span class="badge badge-info">30</span>
<span class="badge badge-light">35</span>
<span class="badge badge-dark">40</span>

圆角徽章

默认情况下，徽章是方形的，但是Bootstrap4还提供了圆角徽章（pill badges），只需添加.rounded-pill类即可，例如：

htmlCopy Code
<span class="badge badge-primary rounded-pill">Primary</span>
<span class="badge badge-secondary rounded-pill">Secondary</span>
<span class="badge badge-success rounded-pill">Success</span>
<span class="badge badge-danger rounded-pill">Danger</span>
<span class="badge badge-warning rounded-pill">Warning</span>
<span class="badge badge-info rounded-pill">Info</span>
<span class="badge badge-light rounded-pill">Light</span>
<span class="badge badge-dark rounded-pill">Dark</span>

不可用徽章

当徽章不可用时，可以添加.badge-disabled类，使其变为灰色，并且无法点击。例如：

htmlCopy Code
<span class="badge badge-primary disabled">Disabled</span>

实例展示

以下是实例展示，可以参考使用。

显示邮件数量

htmlCopy Code
<a href="#" class="btn btn-primary">
  Inbox <span class="badge badge-light ml-2">5</span>
</a>

标记未完成任务数量

htmlCopy Code
<button type="button" class="btn btn-danger">
  Tasks <span class="badge badge-light ml-2">3</span>
</button>

以上就是Bootstrap4 徽章（Badges）学习笔记的基本内容，希望能够对你有所帮助。