Bootstrap 徽章学习笔记

什么是徽章？

徽章（Badge）是一种小图标，通常用于表示某个元素的状态或计数。在网站或应用程序中，徽章经常被用来提示未读消息数量、用户级别或者其他重要的信息。

Bootstrap 中的徽章

Bootstrap 提供了一种简单的方式来创建徽章，并可以自定义其背景色、文本颜色、大小等属性。

创建徽章

要创建一个徽章，可以使用 badge 类将其包裹在任何 HTML 元素中，然后设置对应的属性值。

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>

以上代码会生成如下的效果：

<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">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 text-white">Primary</span>
<span class="badge badge-secondary text-white">Secondary</span>
<span class="badge badge-success text-white">Success</span>
<span class="badge badge-danger text-white">Danger</span>
<span class="badge badge-warning text-white">Warning</span>
<span class="badge badge-info text-white">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

圆角

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>

徽章中的计数

徽章除了可以显示文本之外，还可以显示一个计数。要在徽章中显示计数，只需要在徽章内添加一个数字即可。

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

结论

徽章是一种常见的 UI 元素，可以用来展示状态或计数等重要信息。Bootstrap 提供了方便易用的徽章组件，可以快速创建具有多种自定义样式的徽章。