骨架屏必须与真实内容DOM结构对齐，因为.placeholder仅控制背景色和动画，不控制尺寸；若层级、宽高比例不一致，加载完成时会出现高度突变和视觉“跳变”。
直接用 .placeholder 类就能搭出可用的骨架屏，但光加类不够——骨架结构必须和真实内容 DOM 层级、宽高比例一致，否则加载完成时会“跳变”。
为什么 skeleton 必须和真实内容 DOM 结构对齐
Bootstrap 5 的 .placeholder 只控制背景色和动画，不控制尺寸。如果你在卡片里用 <div class="placeholder col-12"></div> 占位，但真实内容是 <h5></h5><p></p> 两行，那加载后高度突变，用户会明显感知“抖动”。
- 骨架元素必须和真实内容使用相同的父容器（比如都包在
.card-body内） - 每个占位块要对应真实元素的语义层级：标题用
.placeholder-lg，段落用.placeholder-sm，图片区域用.placeholder+style="aspect-ratio: 16/9;" - 避免用
.w-100或.col-*硬撑宽度——改用style="width: 80%;"模拟文字长度更自然
怎么用原生 CSS 补足 Bootstrap 5 placeholder 的短板
.placeholder 默认只有闪烁灰块，没有圆角、阴影或间距控制。你需要少量自定义 CSS 覆盖：
- 给骨架卡片加
border-radius和box-shadow，和真实卡片保持一致 - 用
::after伪元素模拟图标占位（如菜单项旁的小箭头），避免留白错位 - 表格骨架别只套
.table——每列<td>都要加.placeholder，并设置min-width防止列宽塌缩 - 禁用所有交互：
pointer-events: none; user-select: none;，否则骨架区域可能意外触发 hover 效果
常见错误：把 skeleton 当成 loading 状态来用
骨架屏（skeleton）和 loading spinner 是两种不同策略：.spinner-border 适合按钮点击后的瞬时反馈，而 .placeholder 是页面级内容未就绪时的视觉占位。混用会导致体验断裂。
立即学习“前端免费学习笔记（深入）”；
- 列表页首次加载 → 用骨架屏（
.placeholder+ 结构匹配 DOM） - 分页切换或搜索触发刷新 → 用按钮内嵌
.spinner-border+disabled，同时列表保持旧数据不闪退 - 上传文件进度 → 必须用
<div class="progress">，不能用 placeholder，因为进度可量化 - 骨架屏出现时间超过 1.5 秒还没替换，说明接口或渲染链路有问题，不是样式能解决的
最易被忽略的一点：骨架 DOM 必须和服务端返回的真实 HTML 结构完全一致——包括空格、换行、注释位置。Vue/React 框架里容易因条件渲染导致结构差异，这时得用 v-show 或 hidden 控制显隐，而不是 v-if 销毁重建。
