bootstrap 5推荐使用opacity-工具类（如opacity-0至opacity-100）替代内联样式，语义清晰、复用性高；需区分opacity与disabled语义，响应式版本需手动启用sass配置，注意可访问性与动画性能。
Bootstrap 5里直接用opacity-工具类就行，别自己写style="opacity: .5"
Bootstrap 5内置了完整的opacity-响应式工具类，覆盖0–100%常用透明度值，比如opacity-0、opacity-25、opacity-50、opacity-75、opacity-100。这些类直接作用于opacity CSS属性，语义清晰、复用性高。
常见错误是手动加内联样式或自定义CSS——不仅破坏工具类一致性，还容易和disabled状态、visibility混淆。Bootstrap的opacity-类只管透明度，不影响交互或布局流。
-
opacity-0会让元素完全不可见但依然占据空间、可被聚焦（不是display: none） - 不支持小数步进（如
opacity-33），只有预设五档；需要更细粒度得自己扩展Sass变量或额外类 - 在IE中无效（Bootstrap 5已放弃IE支持，这点不用纠结）
opacity-类和disabled状态的区别必须分清
很多人以为给按钮加opacity-50就等于“禁用”，其实不是：opacity-只改透明度，不阻止点击、不修改pointer-events、也不影响表单控件的disabled语义。真正禁用一个按钮，该用disabled属性或btn-disabled类（如果用了btn组件）。
- 视觉上想变灰+半透明？可以组合用：
btn disabled opacity-75，但注意disabled本身已有默认透明度，叠加可能过淡 - 仅需视觉弱化（比如非活跃Tab项），用
opacity-50就够了，保留可点击能力 - 用
opacity-0隐藏元素时，记得检查是否还需aria-hidden="true"以兼顾读屏器
响应式透明度：opacity-md-0这类类名能用，但得确认Sass配置
Bootstrap 5默认只生成基础opacity-类，响应式版本（如opacity-sm-50）需要在自定义Sass中显式启用$enable-responsive-utilities并确保opacity被包含在$utilities映射里。CDN或预编译CSS通常不带这些。
- 如果你用的是官方CDN的
bootstrap.min.css，opacity-md-0这类类名不会生效 - 自己编译Sass时，在
_custom.scss里加：$utilities: map-merge($utilities, ("opacity": map-merge(map-get($utilities, "opacity"), ("responsive": true)))); - 响应式opacity实际使用场景少——多数时候透明度不需要随断点变化，强行加反而增加维护负担
透明度动画要小心：opacity能硬件加速，但别和transform混用触发重排
Bootstrap 5没提供opacity过渡动画类，但你可以安全地自己加transition: opacity .2s。因为opacity是CSS合成属性，浏览器会把它交给GPU处理，不触发布局（Layout）或绘制（Paint）。
- 避免同时对
opacity和width/height做过渡——后者会强制重排，拖慢性能 - 如果想配合淡入淡出+位移，优先用
transform: translateX()而不是left，保证全链路合成 - 用
opacity-0+invisible（Bootstrap的.invisible类）组合实现“不可见但占位”，比纯opacity-0更稳妥，尤其在动画结束态需要彻底隐藏时
