badge类需配合span等容器使用，非独立标签；Bootstrap 5+弃用badge-primary等配色类，改用bg-*语义类；Tailwind无默认badge类，需组合工具类；大小调整须同步内边距与圆角。
直接用 badge 类就能生效，但必须配合容器元素
纯 CSS 框架（如 Bootstrap、Tailwind、Bulma）的 badge 组件不是独立 HTML 标签，而是作用于已有元素的类。常见错误是写成 <badge>New</badge> —— 这不会渲染任何样式，浏览器也不识别该标签。
正确写法是套在 <span></span>、<button></button> 或 <div> 上：
<pre class="brush:php;toolbar:false;"><span class="badge">Hot</span>
<button class="btn badge">Delete <span class="badge bg-danger">2</span></button></pre>
<p>注意：部分框架（如 Bootstrap 5+）要求显式添加颜色类，仅 <code>badge 本身不带默认背景色；而 Tailwind 默认无 badge 类，需自行定义或使用 px-2 py-0.5 text-xs rounded-full 等组合。
颜色控制靠 bg-* 或 text-* 类，不是 badge-primary
Bootstrap 5+ 已弃用 badge-primary 这类单类名配色方式，改用语义化背景工具类。比如：
立即学习“前端免费学习笔记（深入）”；
-
bg-primary→ 主题蓝背景 + 白字 -
bg-success→ 绿背景 + 白字 -
bg-light text-dark→ 浅灰背景 + 深灰字（用于低对比场景） - 若要自定义颜色，不要覆盖
.badge全局样式，优先用style="background-color: #6f42c1;"或新增 utility 类
Tailwind 用户则直接组合：badge bg-indigo-500 text-white px-2 py-0.5 text-xs rounded-full —— 这里 badge 只是语义前缀，实际起效的是后面那些工具类。
大小调整不能只靠 text-sm，得同步改内边距和圆角
仅加 text-xs（Tailwind）或 text-small（Bootstrap）会让文字变小，但 badge 整体高度和圆角不变，视觉上会挤压、失衡。
推荐组合调整：
- Bootstrap：用
badge-sm（v5.3+）或手动加py-1 px-2+text-xs - Tailwind：统一用
px-1.5 py-0.5 text-[10px] rounded控制紧凑型，px-3 py-1 text-sm rounded-full控制标准型 - 避免用
scale()缩放，会导致 border 和 shadow 失真，且响应式下难维护
动态徽章内容更新时，别漏掉 DOM 重绘边界
React/Vue 中直接修改 innerText 或绑定变量通常没问题，但在原生 JS 或旧版 jQuery 场景下容易踩坑：
- 用
innerHTML = '<span class="badge bg-warning">' + count + '</span>'替换整个 badge 节点，会丢失事件监听器 - 如果 badge 是通过 JS 动态插入的，确保父容器已存在且未被
display: none隐藏（否则某些框架的尺寸计算会异常） - 数值为
0时建议隐藏 badge：el.classList.toggle('d-none', count === 0)（Bootstrap）或el.style.display = count ? 'inline-flex' : 'none'
最简健壮写法：始终复用同一个 DOM 元素，只更新 textContent 和条件性切换类名，不重建节点。
