Bootstrap 5 的 placeholder 类仅提供基础灰色块和闪烁动画，缺乏骨架屏所需的结构模拟、层级区分及响应式适配能力；需结合 placeholder-glow/wave、响应式尺寸类、逐节点替换及盒模型一致性控制来实现平滑骨架屏。
Bootstrap 5 的 placeholder 类不支持骨架屏语义
Bootstrap 5 内置的 placeholder 类（如 placeholder col-6）只是简单渲染灰色块+闪烁动画，没有骨架屏所需的结构模拟能力——它不区分头像、段落、标题层级，也不能响应内容宽度变化。直接用它做骨架屏，加载完成后 DOM 替换会明显“跳变”，体验差。
用 placeholder-glow + 自定义结构模拟真实布局
真正可用的骨架屏必须和最终内容 DOM 结构一致，仅替换子元素为占位符。Bootstrap 提供了 placeholder-glow（匀速淡入淡出）和 placeholder-wave（波浪动画）两种基础动效，但需手动组合：
- 用
placeholder+ 尺寸类（如placeholder col-12、placeholder w-25 p-2）模拟文字块，注意col-*需在row内才生效 - 头像用
placeholder rounded-circle+ 固定宽高（如w-12 h-12），避免拉伸 - 段落建议拆成多行：
<span class="placeholder col-10"></span><br><span class="placeholder col-6"></span> - 避免对
placeholder使用text-*<code> 或 <code>bg-*<code>，它们会覆盖默认灰阶</li> </ul> <H3>加载完成时如何平滑替换？别用 <code>innerHTML
直接清空容器再写入完整 HTML，会导致占位符瞬间消失、内容突然弹出。正确做法是逐个节点替换：
- 给每个占位符加唯一
data-placeholder属性（如data-placeholder="avatar"） - 用
document.querySelector('[data-placeholder="avatar"]')定位，再用replaceWith()插入真实元素 - 若用 Vue/React，确保骨架屏组件与真实组件共享相同 key 和容器结构，让 diff 算法自然过渡
- 切忌在骨架屏 DOM 上绑定事件或初始化 JS 插件——它们会在替换后丢失且无法自动恢复
移动端适配和性能要注意什么？
Bootstrap 的
placeholder默认无响应行为，col-6在手机上仍占半屏，可能溢出。实际中要：- 用响应式尺寸类：如
placeholder col-12 col-md-6，确保小屏下占满宽度 - 禁用低性能设备的动画：
@media (prefers-reduced-motion: reduce) { .placeholder-glow, .placeholder-wave { animation: none; } } - 骨架屏 HTML 不要嵌套过深，超过 3 层 div 容易触发重排；优先用
flex布局替代row/col减少 wrapper 节点 - 如果骨架屏由服务端渲染（SSR），确保占位符 class 不被 CSS-in-JS 工具误删（比如某些插件会剔除未使用的
placeholder类）
- 给每个占位符加唯一
