Bootstrap徽章需用.badge基础类，配合bg-{color}设置颜色，通过定位工具类实现角标效果，禁用状态需手动设透明度，无内置尺寸类且须注意可访问性。
徽章的基本 HTML 结构和 class 用法
Bootstrap 徽章（.badge）本质是带背景色、圆角、内边距的行内元素，必须配合 .badge 基础类使用，否则不生效。它默认是 display: inline-block，但不会自动撑开容器——这点常被忽略，导致徽章“看不见”或位置错乱。
基础写法就是：
<span class="badge bg-primary">New</code></span>注意：v5.3+ 已弃用
.badge-primary 这类旧命名，统一为 bg-{color} 形式；颜色值包括 primary、success、warning、danger、info、light、dark。
- 如果徽章内容为空（比如仅作视觉标记），需加
min-width，否则可能塌缩消失 - 不要直接对
.badge设置font-size：它默认继承父级字号，且有padding配比，手动调字号易破坏比例 - 徽章不支持
href属性，如需点击跳转，得套一层<a></a>并加text-decoration-none
让徽章贴在图标或按钮右上角（pill badge / badge positioning）
所谓“角标”，其实是靠 CSS 定位实现的，并非 Bootstrap 内置功能。常见做法是把徽章包进相对定位的父容器，再用 position: absolute 控制偏移。
典型结构：
<pre class="brush:php;toolbar:false;"><div class="position-relative d-inline-block"> <button class="btn btn-outline-secondary">消息</button> <span class="badge bg-danger position-absolute top-0 start-100 translate-middle">3</span> </div>
position-relative 必须加在父元素上，否则 <code>absolute会相对于 body 定位-
top-0 start-100 translate-middle是 Bootstrap 5 的工具类组合：把徽章顶边对齐父顶边、左边缘对齐父右边缘，再向右下各偏移 50% 自身尺寸，实现“右上角居中覆盖”效果 - 若父容器高度不稳定（如文字换行），建议改用
top: -0.5rem等固定值 +right: -0.5rem，避免工具类失效
徽章和链接/按钮一起用时的样式冲突
直接把 .badge 放在 <a></a> 或 <button></button> 内部，容易出现颜色继承异常、点击区域变小、hover 效果丢失等问题。
- 链接场景：给外层
<a></a>加text-decoration-none，徽章用bg-{color}独立配色，避免受链接color影响 - 按钮场景：徽章不要放在
<button></button>内部，而应并列放在按钮右侧或右上角（用前面提到的定位方式），否则按钮的padding和line-height会挤压徽章 - 禁用状态（
disabled）下，徽章不会自动变灰——需手动加opacity: 0.5或额外 class
响应式徽章尺寸与可访问性注意事项
Bootstrap 没有内置 .badge-sm 或 .badge-lg，所有徽章默认尺寸固定（font-size: 0.75em, padding: 0.35em 0.65em）。如需调整，只能自定义 CSS。
- 移动端小屏下，徽章文字易被截断，建议搭配
text-truncate和max-width控制宽度 - 徽章纯装饰（如未读数）必须加
aria-hidden="true"；含语义信息（如“VIP”“认证”）则需配合aria-label或role="status" - 颜色对比度要达标：例如
bg-light text-dark在浅背景上可能对比不足，可用text-black-50或换深色文字
真正难的不是写出来，而是判断什么时候不该用徽章——比如列表项状态更适合用标签（.tag）或图标+文字组合，强行塞徽章反而降低可读性。
