bootstrap badge是纯css实现的轻量角标组件，用于标注消息数、状态等；需配合.bg-*类使用，支持嵌入按钮/链接、响应式隐藏、尺寸调整及自定义颜色。
Bootstrap 的 badge 组件是轻量、灵活的角标与状态标签工具，适合标注新消息数、订单状态、审核结果等。它本身不依赖 JavaScript，纯 CSS 实现，配合 HTML 即可快速使用。
基础用法：默认角标样式
Bootstrap 的 badge 默认是小号、圆角、带内边距的浅灰色标签。需配合 .badge 类，并推荐添加语义化背景类（如 .bg-primary）来提升可读性：
- 直接写在元素内，例如：
<span class="badge bg-primary">5</span> - 不建议单独使用
.badge（无背景色），因为默认文字色与背景色对比度低，不易看清 - 常见背景色类有：
bg-primary、bg-success、bg-danger、bg-warning、bg-info、bg-light、bg-dark
嵌入按钮或链接中作为状态提示
badge 常用于按钮右侧、导航项旁或卡片标题后，表示数量或状态。注意要加 .ms-1（左外边距）保持间距，避免紧贴文字：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 示例：
<button class="btn btn-outline-secondary">消息 <span class="badge bg-danger ms-1">3</span></button> - 若放在
<a></a>内，确保父级链接有足够点击区域，badge 本身不响应点击（除非额外加cursor:pointer） - 响应式场景下，可结合
visually-hidden类为屏幕阅读器提供说明，如：<span class="visually-hidden">未读消息</span><span class="badge bg-danger">3</span>
调整尺寸与对齐方式
Bootstrap 5.3+ 提供 .badge-sm 小号角标，适用于紧凑布局；默认尺寸已适配多数场景。垂直居中需注意行高匹配：
- 小号角标：
<span class="badge bg-success badge-sm">已通过</span> - 若 badge 出现在行内元素中偏高，可加
align-middle类微调对齐：<span class="badge bg-info align-middle">测试中</span> - 避免给 badge 设置固定宽高或 padding —— 它的设计依赖内置的
padding和font-size计算，手动覆盖易破坏一致性
自定义颜色与语义扩展
当内置颜色不够用，可通过 Sass 变量或直接写 CSS 扩展。推荐用 CSS 自定义属性方式，便于主题切换：
- 新增颜色类示例：
.bg-pending { background-color: #ffc107; color: #212529; } - 也可用
text-bg-*类替代bg-*（Bootstrap 5.3+ 新增），自动适配文字反色，更安全：<span class="badge text-bg-warning">待处理</span> - 禁用状态可用
.opacity-75或自定义.badge-disabled类，但注意 badge 本身无交互逻辑，需配合 JS 控制是否显示
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
