在 Bootstrap 中，徽章（Badge）是一种小型的视觉标签，通常用于显示数量、状态、消息计数等。以下是一个简单的 Bootstrap 徽章的示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap Badge Example</title>
    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
</head>
<body>

<div class="container mt-5">
    <h1>Bootstrap Badge Example</h1>
    
    <!-- 徽章 -->
    <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>
</div>

<!-- 引入 Bootstrap JS 和 Popper.js（注意：需要先引入 Popper.js） -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>

</body>
</html>

在这个例子中，我们使用了 Bootstrap 的徽章组件，包括了 badge 类和 bg-{color} 类。徽章的颜色可以通过添加不同的背景颜色类来设置，例如 bg-primary、bg-secondary 等。

你可以根据具体的设计要求自定义徽章的样式，例如添加圆角、修改文字颜色等。Bootstrap 徽章还支持添加链接、徽章内嵌图标等功能，详细信息可以参考 Bootstrap 文档。


转载请注明出处：http://www.zyzy.cn/article/detail/12619/Bootstrap