Bootstrap 5.3+ 占位符需配合 aria-hidden="true" 或 input 的 placeholder 属性才能生效，尺寸与动画类可共存，但背景色类会覆盖透明效果，响应式须用栅格类而非内联样式。
Bootstrap 5.3+ 内置了原生 placeholder 工具类，不需要额外 JS 或自定义 CSS 就能快速生成加载态占位符——但必须用对类名和结构，否则会失效或显示异常。
占位符类名必须配合 placeholder 属性或 aria-hidden="true"
Bootstrap 的 placeholder 类（如 placeholder-glow、placeholder-wave）只作用于带 aria-hidden="true" 的元素，或本身是 input 且含 placeholder 属性的控件。单纯加类不会生效。
-
<div class="placeholder col-6 placeholder-sm"></div>→ ❌ 无效（缺少aria-hidden） -
<div class="placeholder col-6 placeholder-sm" aria-hidden="true"></div>→ ✅ 正确 -
<input type="text" class="form-control" placeholder="Loading...">→ ✅ 自动应用默认占位样式（无需额外类） - 若想给文字段落加波浪动画，得用
<p class="placeholder-glow"><span class="placeholder col-8" aria-hidden="true"></span></p>
placeholder 类的尺寸和颜色不能混搭使用
尺寸类（placeholder-sm / placeholder-lg）和动画类（placeholder-glow / placeholder-wave）可以共存，但颜色类（bg-primary 等）会覆盖占位符的透明底色逻辑，导致动画失效或变实色块。
- ✅ 推荐组合：
placeholder placeholder-wave placeholder-sm - ❌ 避免：
placeholder bg-dark（bg-dark强制设背景色，遮盖了渐变动画） - ⚠️ 若需语义化颜色，改用
text-primary控制文字色（仅对含文字的占位有效），而非背景类 - 尺寸类本质是设置
height和font-size，所以placeholder-sm在h1里不会缩放，要确保父容器行高兼容
响应式占位符要靠栅格类，不是媒体查询
Bootstrap 占位符不自带响应式断点，col-6、col-md-4 这类栅格类才是控制宽度的关键。直接写 width: 50% 会破坏动画渲染节奏，尤其在 Safari 中易卡顿。
- ✅ 正确：
<div class="placeholder col-12 col-md-6 placeholder-lg" aria-hidden="true"></div> - ❌ 错误：
<div class="placeholder" style="width: 50vw;" aria-hidden="true"></div>（动画可能跳帧或不触发） - 注意：占位符高度由
line-height和font-size共同决定，placeholder-lg对<textarea></textarea>无效，它只适配行内级元素
最常被忽略的是 aria-hidden="true" —— 它不是可选装饰，而是 Bootstrap 占位符 CSS 选择器的必要条件；漏掉这句，整个动画就静止了。
