Bootstrap 中的 <abbr> 标签通过 title 属性实现语义化缩写，自动添加底部虚线边框和 hover 提示；必须使用 <abbr> 原生标签包裹缩写词，且 title 值为纯文本，缺一则无效。
Bootstrap 中的 <abbr> 缩写类怎么用
Bootstrap 对 <abbr> 元素做了语义化增强，不是新增类名，而是直接复用原生 HTML 标签 + title 属性。只要写 <abbr title="HyperText Markup Language">HTML</abbr>，Bootstrap 就会自动添加底部虚线边框，并在 hover 时显示完整文本。
常见错误是漏掉 title 属性——没它，虚线和提示都不会出现；或者误加 class="abbr"，Bootstrap 并不识别这个类，纯属冗余。
- 必须用
<abbr>标签包裹缩写词，不能用<span>模拟 -
title值需为纯文本，避免含 HTML 实体或换行符 - 响应式场景下，
abbr的 tooltip 不会自适应宽度，长说明建议改用data-bs-toggle="tooltip"手动初始化
text-* 类处理文字的典型陷阱
像 text-primary、text-muted 这类颜色类只作用于当前元素及其子元素的文本色，但不会重置字体大小、粗细或行高——这点常被忽略，导致和 lead 或 h2 混用时样式错乱。
例如：<p class="text-primary lead">这段文字会变蓝+变大+加粗，但若父容器有 <code>font-size: 0.875rem，lead 的放大效果会被压缩。
-
text-center等对齐类仅影响文本流，对 flex / grid 子项无效，需配合justify-content或text-align上级容器 -
text-uppercase是纯视觉转换，不改变 DOM 中的实际值，表单提交或 JS 获取textContent仍是原始大小写 - 在 RTL（如阿拉伯语）布局中，
text-right实际会变成“逻辑右”，即内容贴容器 end 边，无需手动切text-end
fs-* 和 text-* 混用时的字体缩放冲突
fs-*（如 fs-4、fs-6）基于 CSS 自定义属性（--bs-font-size-base）和 rem 计算，而 text-* 类不干预字体尺寸。两者叠加时，fs-* 优先级更高，但若同时存在内联 style="font-size: 14px"，就会覆盖 fs-*。
更隐蔽的问题是：Bootstrap 5.3+ 的 fs-* 默认带 !important，在调试时容易误判为“无法覆盖”，其实只需用更高权重的选择器（如 p.fs-5.my-class）或直接修改 CSS 变量即可。
-
fs-1~fs-6对应 2.5rem ~ 1rem，但实际像素值随根字体变化，不适合需要绝对像素控制的场景 - 搭配
fw-bold使用时，注意部分字体（如系统默认 sans-serif）可能无对应字重，浏览器会模拟加粗，造成渲染模糊 - 在打印媒体（
@media print）中，fs-*不会自动降级，需额外声明font-size覆盖
为什么别依赖 small 标签做副标题
<small> 是语义化标签，表示旁注、版权信息等次要内容，Bootstrap 仅将其字号设为 85%、颜色变浅，但它不提供响应式缩放能力——fs-* 类才支持断点适配（如 fs-sm-3 fs-md-4）。
真实项目里，副标题常需随视口变化字号，而 <small> 一旦嵌套在 h2 里，其 85% 是相对于 h2 当前计算后的字体大小，不是根字体，导致多层嵌套后尺寸失控。
- 替代方案：用
<span class="fs-6 text-muted">替代<small>，显式控制字号层级 - 若坚持用
<small>，确保父元素未设置font-size，否则缩放比例会套娃 - 辅助技术（如读屏器）对
<small>无特殊处理，重要副标题建议用aria-label补充说明
