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），避免拉伸 - 段落建议拆成多行：
- 避免对
placeholder使用或 bg-*，它们会覆盖默认灰阶
加载完成时如何平滑替换？别用 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类）
真实项目里最常被忽略的是占位符与真实内容的盒模型一致性——padding、margin、line-height 差一点，替换瞬间就会“抖一下”。动手前先用 DevTools 把骨架屏和最终内容并排测量一遍。
