Bootstrap 5 徽章(Badges)完全指南
面向初学者的详细知识点汇总，大白话讲解，一看就懂！
入门必备
通俗易懂
实例丰富
Bootstrap 5
什么是徽章(Badges)？
徽章就像是一个小标签，用来显示简短的信息：
- 📌 通知数字 – 比如微信未读消息数量
- 🏷️ 状态标签 – 比如”热卖中”、”新品”
- 🔖 分类标记 – 比如文章的分类标签
- 📢 重要提示 – 突出显示关键信息
实际例子：
状态: 在线
商品标签: 限时折扣
文章分类: 前端开发
💡 大白话解释： 徽章就是网站上那些小圆点、小标签或者带数字的小泡泡，用来吸引你的注意力！
如何创建基础徽章
创建一个基础徽章非常简单！只需要两个类：
<span class=“badge bg-primary”>基础徽章</span>
效果展示：
主要徽章
次要徽章
成功徽章
危险徽章
警告徽章
信息徽章
💡 重要提示：
- 使用
<span>标签创建徽章是最常见的做法 - Bootstrap 会自动给徽章添加合适的样式：圆角、内边距等
- bg-xxx 类用于设置背景颜色（后面会详细介绍颜色选项）
徽章的颜色
Bootstrap 提供了多种颜色选项，通过添加不同的背景类来更改颜色：
| 颜色类名 | 用途 | 示例 | 颜色预览 |
|---|---|---|---|
bg-primary |
主要操作，重要信息 | 主要 | #0d6efd |
bg-secondary |
次要内容，中等优先级 | 次要 | #6c757d |
bg-success |
成功操作，积极状态 | 成功 | #198754 |
bg-danger |
错误操作，危险状态 | 危险 | #dc3545 |
bg-warning |
警告信息，需要注意 | 警告 | #ffc107 |
bg-info |
信息提示，通知消息 | 信息 | #0dcaf0 |
bg-light |
在深色背景上使用 | 浅色 | #f8f9fa |
bg-dark |
在浅色背景上使用 | 深色 | #212529 |
💡 颜色使用技巧：
- 对于浅色背景（如bg-warning），需要添加
text-dark类确保文字可见 - 可以自定义颜色，但尽量使用Bootstrap提供的颜色保持界面一致性
- 颜色选择要考虑语义，错误用红色，成功用绿色等
徽章的样式变化
通过添加不同的类，可以改变徽章的形状和样式：
圆角徽章（默认）
默认圆角
默认形式，四个角有轻微圆角
<span class=“badge bg-primary”>默认圆角</span>
椭圆徽章（胶囊状）
椭圆胶囊徽章
添加rounded-pill类变成椭圆形状
<span class=“badge rounded-pill bg-primary”>椭圆胶囊徽章</span>
💡 样式选择建议：
- 默认圆角：适合大多数场景
- 椭圆胶囊：适合较长的文本标签，看起来更现代
- 在Bootstrap 5中，不再有方角徽章，全部使用圆角设计
给徽章定位（角标效果）
我们经常看到徽章出现在按钮的右上角，比如通知数量：
按钮角标效果
<button type=“button” class=“btn btn-primary position-relative”>
收件箱
<span class=“position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger”>
99+
<span class=“visually-hidden”>未读消息</span>
</span>
</button>
💡 实现原理：
position-relative：给按钮设置相对定位position-absolute：徽章设为绝对定位top-0和start-100：定位到右上角translate-middle：将徽章居中定位visually-hidden：辅助文本，对屏幕阅读器友好
实际应用场景
徽章在网页中有多种应用场景：
导航菜单中的通知计数
商品标签
智能手机 X Pro
最新旗舰手机，搭载顶级处理器
热卖 新品 限时折扣
¥3999
¥4599
用户状态显示
张小明
在线 VIP会员李小红
离线 管理员
重要注意事项
- 保持简短：徽章适合显示简短文本（1-3个词），太长不好看
- 颜色适度：不要滥用鲜艳颜色，只在需要突出时使用
- 响应式考虑：在小屏幕上徽章可能会换行，要测试不同屏幕尺寸
- 辅助功能：使用
visually-hidden类添加屏幕阅读器文本 - 避免冲突：不要同时附加多个徽章到一个元素，会导致布局问题
🚫 错误示例：