Bootstrap5 徽章学习笔记
什么是Bootstrap5徽章？
Bootstrap5徽章是一种用于在页面上显示短文本标签或状态的小组件。可以用于表示当前页面的状态、新消息计数器、用户角色等。
如何使用Bootstrap5徽章？
徽章可以很容易地通过以下HTML代码添加到网页中：
htmlCopy Code<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 text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
其中 badge 是一个必需的CSS类，它会设置一些徽章共享的样式属性。bg-* 类设置了徽章的背景颜色，而 text-* 类设置了文字颜色。此外，你还可以给徽章添加自定义的样式类，以便进行个性化设置。
徽章大小
Bootstrap5提供了不同大小的徽章，其中包括默认大小的、更小的和更大的徽章。你可以根据需要选择合适的大小。
htmlCopy Code<span class="badge bg-primary fs-6">Default</span>
<span class="badge bg-secondary fs-7">Small</span>
<span class="badge bg-success fs-4">Large</span>
徽章链接
徽章可以通过添加 a 标签来实现链接。如果你想为徽章添加链接，只需添加一个 a 标签即可。
htmlCopy Code<a href="#" class="badge bg-primary">Link Badge</a>
徽章实例
以下是一个示例页面，其中包含了不同类型、大小和链接的徽章：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 Badge Example</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
</head>
<body>
<h1>Bootstrap5 Badge Example</h1>
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary fs-7">Secondary</span>
<span class="badge bg-success fs-4">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
<br><br>
<a href="#" class="badge bg-primary">Link Badge</a>
<br><br>
<span class="badge bg-danger">13</span>
<span class="badge bg-warning text-dark">5</span>
<span class="badge bg-info text-dark">10+</span>
<br><br>
<span class="badge bg-success">In Stock</span>
<span class="badge bg-danger">Out of Stock</span>
</body>
</html>
上述示例包含了不同类型、大小和链接的徽章，以及用于表示计数器和状态的徽章。你可以根据需要进行自定义设置，以便更好地展示页面中的内容。