徽章用于数值提示（如未读数），标签用于定性说明（如“new”）；bootstrap 5 中标签已废弃，统一用 badge 实现，徽章支持动态更新、高可访问性及组件兼容。
如果您在开发网页时需要突出显示状态、类别或通知数量，Bootstrap 提供的徽章（Badges）和标签（Labels）是轻量级且即插即用的视觉组件。二者外观相似但用途与语义不同，以下是具体使用方式及特性分析：
一、徽章（Badges）的基本用法
徽章用于突出显示新的或未读的项，边角比标签更圆滑，通常附着在链接、导航项或按钮上，以纯色背景配合白色文字呈现数字或简短提示信息。其默认行为支持 :empty 伪类自动隐藏空内容，避免冗余占位。
1、在 HTML 元素中添加 .badge 类，例如：<span class="badge bg-primary">5</span>。
2、为适配不同语义，选用预设背景类：如 bg-success 表示成功状态，bg-warning 表示警告，bg-danger 表示错误。
3、若需与链接结合，直接将 badge 嵌入 <a></a> 内部，并确保 hover 时文本颜色保持为白色。
二、标签（Labels）的基本用法
标签主要用于静态附加说明性文字，如“New”、“Hot”、“Deprecated”，强调上下文含义而非计数。它跟随 Bootstrap 的上下文颜色体系，且默认尺寸略大于徽章，边角稍尖锐。
1、使用 <span class="label label-default">New</span> 结构（Bootstrap 3）或 <span class="badge text-bg-secondary">New</span>（Bootstrap 5+）。
2、通过类名控制颜色：如 label-primary 对应深蓝，label-success 对应绿色，label-danger 对应红色。
3、标签支持 :empty 选择器自动隐藏无内容实例，防止空白占位影响布局。
三、徽章与标签的核心差异
徽章设计目标是承载数值型提示（如未读消息数），具备更强的视觉收缩性；标签则侧重于定性描述（如功能状态、版本标识），语义更偏向元数据标注。二者在 DOM 层级中均可自由嵌套，但 徽章不推荐单独作为独立导航项使用，而标签可直接用于菜单项旁注。
1、徽章默认 font-size: 0.75em，行高紧凑，适合小空间嵌入。
2、标签在 Bootstrap 3 中保留 .label 独立类体系，在 Bootstrap 5 中已统一归入 badge 组件，仅通过文本颜色与背景组合模拟旧有样式。
3、徽章支持 动态更新后自动重绘，无需手动触发 reflow，而标签在内容变更时需确保父容器重排逻辑兼容。
四、徽章组件的优点分析
徽章体积小、加载快，CSS 规则集中于单一样式块，复用率高。其圆角设计与阴影缺失强化了扁平化风格一致性，且所有预设类均经过 WCAG 对比度校验，满足基础可访问性要求。
1、支持响应式缩放，随父元素字体大小线性变化。
2、内置 多种背景-文字配色方案，覆盖常见业务语义，无需额外定义 CSS 变量。
3、与 Alert、Button、Navbar 等组件天然兼容，可直接混用类名实现视觉连贯。
五、标签组件的局限性说明
标签在 Bootstrap 5 中已被官方标记为“legacy”，不再单独维护，其原始类名（如 label-default）在新版中失效，迁移需手动替换为 badge 变体。此外，标签缺乏原生对齐辅助类，垂直居中常需额外 vertical-align 调整。
1、Bootstrap 5 文档明确指出 label 组件已移除，仅保留向后兼容的 CSS 规则片段。
2、在 Flex 布局容器中，标签的 display: inline 默认值易导致基线对齐异常，需显式设置 align-self: center。
3、标签不支持 data-bs-* 数据属性绑定，无法与 Tooltip 或 Popover 直接联动。
