Bootstrap 5响应式文本颜色类格式为text-{breakpoint}-{color}，须按sm/md/lg/xl/xxl从小到大顺序书写，如text-muted text-sm-primary text-md-success，否则小屏下可能被大断点类错误覆盖。
Bootstrap 5 的响应式文本颜色类怎么写
Bootstrap 5 原生支持带断点后缀的文本颜色类，比如 text-sm-primary、text-md-success，但必须按断点顺序书写，否则会被覆盖。
常见错误是写成 text-lg-primary text-sm-muted——这样小屏下反而显示 primary，因为 text-lg-primary 的 CSS 规则优先级更高（它匹配所有 ≥992px 的屏幕，也隐式匹配小屏）。
- 正确写法：从最小断点开始，从小到大排列，例如
text-muted text-sm-primary text-md-success text-lg-warning - 断点含义：
text-（xs）、text-sm-（≥576px）、text-md-（≥768px）、text-lg-（≥992px）、text-xl-（≥1200px）、text-xxl-（≥1400px） - 注意：
text-primary本身无断点，等价于text-xs-primary，会作用于所有尺寸，除非被更大断点类覆盖 - 不支持
text-sm-muted text-md-primary这种“中间断点生效、两端失效”的逻辑——它只做“≥该断点起生效”，不是“仅在该断点区间生效”
为什么 fw-* 类加了但字体粗细没变
根本原因不是 Bootstrap 类没生效，而是字体文件本身不包含对应字重。浏览器只能模拟加粗（fake bold），导致文字发虚、宽度异常、边缘毛糙。
验证方式：打开 DevTools → Elements → Computed → 查看 font-weight 是否真变成 700，再点开 font-family 看实际加载的字体文件名（如 inter-var-latin.woff2），确认其 metadata 是否声明支持 weight 700。
- Google Fonts 必须显式声明多个字重，例如：
&family=Inter:wght@400;500;700&display=swap - 本地
@font-face需为每个字重单独定义，不能共用src；例如font-weight: 500和font-weight: 700要对应不同文件 -
fw-medium、fw-semibold等类名只是 CSS 映射，不打包字体资源；CDN 引入的bootstrap.min.css默认不含fw-500，需 Sass 编译扩展
想用 fw-500 或响应式 font-weight 怎么办
Bootstrap 默认只提供 fw-light（300）、fw-normal（400）、fw-semibold（600）、fw-bold（700）四档，且不支持断点后缀组合（如 fw-sm-bold 是无效类名）。
真要精细控制，必须手写媒体查询——这是唯一可靠方案，尤其当你需要在 800–1024px 区间用 font-weight: 500，或想配合 prefers-reduced-motion 降级时。
- 推荐写法：
.responsive-weight { font-weight: 400; }<br>@media (min-width: 768px) { .responsive-weight { font-weight: 500; } }<br>@media (min-width: 992px) { .responsive-weight { font-weight: 600; } } - 数字值建议只用整百数（300/400/500/600/700），避免无效 fallback（如 450 多数浏览器就近取整为 400 或 500）
- 加
transition: font-weight 0.2s可实现渐变效果，但旧版 Safari 不支持，慎用于关键路径
text-body-secondary 这类语义色类为什么没生效
text-body-secondary 是 Bootstrap 5.3+ 新增的语义颜色类，依赖 $theme-colors 和 $body-color 变量计算生成。如果你用的是 CDN 版本或未启用 Sass 编译，这类类名根本不会输出 CSS 规则。
常见现象：HTML 中写了 text-body-secondary，但 DevTools 里查不到对应样式，Computed 中颜色仍是继承值。
- CDN 用户请改用已有稳定类，如
text-muted（固定灰度）或text-secondary（主题 secondary 色） - Sass 用户需确认是否导入了完整变量链：
functions→variables→mixins→utilities/text -
text-body-*系列（如text-body-primary）并非官方标准类名，截至 2026 年 6 月仍属实验性或社区自定义，不要依赖
真正容易被忽略的点：响应式类本质是层叠规则，不是条件开关；字体粗细变化必须和字体资源绑定，光靠 CSS 类解决不了渲染问题；Sass 扩展类名只对编译产物有效，CDN 场景下一切以实际输出的 CSS 为准。
