当前位置：首页 > news >正文

Bootstrap 5学习教程，从入门到精通，Bootstrap 5 徽章(Badges)语法知识点及案例代码（11）

news 2025/6/14 15:52:08

Bootstrap 5 徽章(Badges)语法知识点及案例代码

一、徽章基本概念

Bootstrap 5中的徽章(Badges)是小而灵活的可视化组件，用于突出显示、标记或分类内容。它们通常用于显示计数、状态指示或简单的标签。

二、徽章语法知识点

1. 基本徽章

<span class="badge">默认徽章</span>

2. 上下文颜色变体

Bootstrap提供了8种上下文颜色：

<span class="badge bg-primary">主要</span>
<span class="badge bg-secondary">次要</span>
<span class="badge bg-success">成功</span>
<span class="badge bg-danger">危险</span>
<span class="badge bg-warning text-dark">警告</span>
<span class="badge bg-info text-dark">信息</span>
<span class="badge bg-light text-dark">浅色</span>
<span class="badge bg-dark">深色</span>

3. 药丸形状徽章

添加rounded-pill类使徽章变成药丸形状：

<span class="badge rounded-pill bg-primary">药丸徽章</span>

4. 徽章位置

可以将徽章放在按钮或链接内：

<button type="button" class="btn btn-primary">通知 <span class="badge bg-secondary">4</span>
</button>

5. 徽章大小

徽章会继承父元素的字体大小，但也可以通过工具类调整：

<h1>标题 <span class="badge bg-secondary">新</span></h1>
<h2>标题 <span class="badge bg-secondary">新</span></h2>
<h3>标题 <span class="badge bg-secondary">新</span></h3>

6. 链接徽章

将徽章包裹在<a>标签中创建可点击的徽章：

<a href="#" class="badge bg-primary">可点击徽章</a>

三、完整案例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bootstrap 5 徽章示例</title><!-- 引入Bootstrap 5 CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><div class="container mt-5"><h1 class="mb-4">Bootstrap 5 徽章示例</h1><!-- 1. 基本徽章示例 --><section class="mb-5"><h2>1. 基本徽章</h2><p>这是默认徽章: <span class="badge">默认徽章</span></p><p class="text-muted">注意: 默认徽章没有背景色，通常需要添加颜色类</p></section><!-- 2. 上下文颜色变体 --><section class="mb-5"><h2>2. 颜色变体</h2><div class="d-flex flex-wrap gap-2"><span class="badge bg-primary">主要</span><span class="badge bg-secondary">次要</span><span class="badge bg-success">成功</span><span class="badge bg-danger">危险</span><span class="badge bg-warning text-dark">警告</span><span class="badge bg-info text-dark">信息</span><span class="badge bg-light text-dark">浅色</span><span class="badge bg-dark">深色</span></div><p class="mt-2 text-muted">使用 bg-* 类设置背景色，对于浅色背景建议添加 text-dark 确保文字可见</p></section><!-- 3. 药丸形状徽章 --><section class="mb-5"><h2>3. 药丸形状徽章</h2><div class="d-flex flex-wrap gap-2"><span class="badge rounded-pill bg-primary">主要</span><span class="badge rounded-pill bg-secondary">次要</span><span class="badge rounded-pill bg-success">成功</span><span class="badge rounded-pill bg-danger">危险</span><span class="badge rounded-pill bg-warning text-dark">警告</span><span class="badge rounded-pill bg-info text-dark">信息</span></div><p class="mt-2 text-muted">添加 rounded-pill 类实现椭圆形药丸效果</p></section><!-- 4. 徽章位置示例 --><section class="mb-5"><h2>4. 徽章位置</h2><h4 class="mt-3">按钮中的徽章</h4><button type="button" class="btn btn-primary me-2">收件箱 <span class="badge bg-danger">99+</span></button><button type="button" class="btn btn-success me-2">任务 <span class="badge bg-light text-dark">12</span></button><h4 class="mt-3">标题中的徽章</h4><h3>最新消息 <span class="badge bg-danger">新!</span></h3><h5>产品列表 <span class="badge bg-success">更新</span></h5></section><!-- 5. 链接徽章 --><section class="mb-5"><h2>5. 可点击徽章</h2><p>点击徽章导航到不同分类:</p><div class="d-flex flex-wrap gap-2"><a href="#" class="badge bg-primary text-decoration-none">科技</a><a href="#" class="badge bg-success text-decoration-none">体育</a><a href="#" class="badge bg-danger text-decoration-none">娱乐</a><a href="#" class="badge bg-warning text-dark text-decoration-none">财经</a><a href="#" class="badge bg-info text-dark text-decoration-none">健康</a></div><p class="mt-2 text-muted">添加 text-decoration-none 移除链接下划线</p></section><!-- 6. 高级示例 --><section class="mb-5"><h2>6. 综合应用示例</h2><div class="card" style="width: 18rem;"><div class="card-body"><h5 class="card-title">产品名称 <span class="badge bg-success">新品</span><span class="badge rounded-pill bg-danger ms-1">热销</span></h5><p class="card-text">产品描述内容在这里，这是一个很棒的产品。</p><div class="mb-3"><span class="badge bg-primary me-1">科技</span><span class="badge bg-info text-dark me-1">创新</span><span class="badge bg-secondary">2023</span></div><a href="#" class="btn btn-primary position-relative">购物车<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">3<span class="visually-hidden">未读消息</span></span></a></div></div><p class="mt-2 text-muted">结合卡片、按钮和定位工具类的综合示例</p></section></div><!-- 引入Bootstrap 5 JS 包（含Popper） --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

以下是一个完整的 HTML 示例，展示了 Bootstrap 5 徽章的多种用法。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Bootstrap 5 徽章案例</title><!-- Bootstrap CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><style>/* 自定义样式（可选） */.example-container {margin: 20px;}.badge-example {margin: 5px;}</style>
</head>
<body><div class="container example-container"><h2>Bootstrap 5 徽章示例</h2><hr><h4>1. 基本徽章</h4><p><span class="badge bg-primary badge-example">主要</span><span class="badge bg-secondary badge-example">次要</span><span class="badge bg-success badge-example">成功</span><span class="badge bg-danger badge-example">危险</span><span class="badge bg-warning text-dark badge-example">警告</span><span class="badge bg-info text-dark badge-example">信息</span><span class="badge bg-light text-dark badge-example">浅色</span><span class="badge bg-dark badge-example">深色</span></p><h4>2. 药丸形状徽章</h4><p><span class="badge rounded-pill bg-primary badge-example">主要</span><span class="badge rounded-pill bg-secondary badge-example">次要</span><span class="badge rounded-pill bg-success badge-example">成功</span><span class="badge rounded-pill bg-danger badge-example">危险</span><span class="badge rounded-pill bg-warning text-dark badge-example">警告</span><span class="badge rounded-pill bg-info text-dark badge-example">信息</span><span class="badge rounded-pill bg-light text-dark badge-example">浅色</span><span class="badge rounded-pill bg-dark badge-example">深色</span></p><h4>3. 徽章尺寸</h4><p><span class="badge bg-primary fs-6 badge-example">小尺寸</span><span class="badge bg-primary fs-5 badge-example">中等尺寸</span><span class="badge bg-primary fs-4 badge-example">大尺寸</span></p><h4>4. 徽章与按钮结合</h4><p><button type="button" class="btn btn-primary">消息 <span class="badge bg-light text-dark">4</span></button><button type="button" class="btn btn-secondary">关注 <span class="badge bg-light text-dark">10+</span></button><button type="button" class="btn btn-success">下载 <span class="badge bg-light text-dark">2</span></button></p><h4>5. 导航栏中的徽章</h4><nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="container-fluid"><a class="navbar-brand" href="#">品牌</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">首页</a></li><li class="nav-item"><a class="nav-link" href="#">关于</a></li><li class="nav-item"><a class="nav-link" href="#">通知 <span class="badge bg-danger">3</span></a></li><li class="nav-item"><a class="nav-link" href="#">购物车 <span class="badge bg-success">5</span></a></li></ul></div></div></nav><h4>6. 动态徽章（使用 JavaScript）</h4><p><button type="button" id="like-button" class="btn btn-outline-primary">点赞 <span id="like-count" class="badge bg-primary">0</span></button></p><script>// 简单的 JavaScript 示例，增加点赞计数document.getElementById('like-button').addEventListener('click', function() {var count = parseInt(document.getElementById('like-count').innerText);document.getElementById('like-count').innerText = count + 1;});</script></div><!-- Bootstrap JS 和依赖项 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

代码说明

引入 Bootstrap 5：
- 通过 CDN 引入 Bootstrap 5 的 CSS 和 JS 文件，确保在 <head> 中引入 CSS，在 </body> 前引入 JS。
基本徽章：
- 使用 .badge 和 .bg-* 类来设置徽章的背景颜色。
- 示例中展示了不同颜色的基本徽章。
药丸形状徽章：
- 添加 .rounded-pill 类，使徽章呈现药丸形状。
- 示例中展示了不同颜色的药丸形状徽章。
徽章尺寸：
- 使用字体大小类 .fs-* 来调整徽章的尺寸。
- 示例中展示了小、中、大三种尺寸的徽章。
徽章与按钮结合：
- 将徽章嵌套在按钮内部，用于显示按钮相关的计数或状态。
- 示例中展示了带有徽章的按钮。
导航栏中的徽章：
- 在导航栏的链接中添加徽章，用于显示通知数量或状态。
- 示例中展示了带有徽章的导航栏链接。
动态徽章：
- 使用简单的 JavaScript 代码，实现点击按钮时徽章计数增加的功能。
- 示例中展示了带有动态计数功能的徽章。