bootstrap 5 不提供骨架屏组件，仅靠 bg-light 和 rounded 无法实现，因其缺乏渐变动画、透明度过渡、深色模式适配及溢出隐藏；需用自定义 css 配合栅格类实现。
Bootstrap 5 本身不提供骨架屏（skeleton loader）的内置组件或类，必须靠自定义 CSS 实现；它只提供基础布局工具（如 col、bg-light、rounded），不能直接生成脉冲动画或渐变遮罩效果。
为什么不能只用 Bootstrap 5 的 bg-light + rounded 模拟骨架屏？
单纯用 bg-light 填色 + 圆角，只是静态占位，缺少关键特征：
- 没有从左到右的线性渐变移动动画（模拟光扫效果）
- 无法控制透明度过渡和闪烁节奏，视觉上不像“正在加载”
-
bg-light是固定色值（#f8f9fa），在深色主题下对比度失效 - 所有元素默认无
overflow: hidden，圆角容器内子元素会溢出破坏形状
如何用纯 CSS 写一个兼容 Bootstrap 5 布局的骨架屏？
核心是复用 Bootstrap 的栅格和间距类，仅覆盖关键样式：背景动画、尺寸约束、主题适配。推荐以下最小可行写法：
.skeleton {
background: linear-gradient(90deg, transparent, rgba(128, 128, 128, 0.1), transparent);
background-size: 200% 100%;
animation: loading 1.5s infinite;
border-radius: 0.25rem; /* 匹配 Bootstrap 的 .rounded */
}
<p>@keyframes loading {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}</p><p>/<em> 配合 Bootstrap 栅格时，需重置 overflow </em>/
.skeleton-card > * {
overflow: hidden;
}
</p>
使用时直接套在 Bootstrap 结构里：
<div class="card skeleton-card">
<div class="card-img-top skeleton" style="height: 180px;"></div>
<div class="card-body">
<h5 class="card-title skeleton" style="height: 1.2em;"></h5>
<p class="card-text skeleton" style="height: 1em; margin-top: 0.5em;"></p>
</div>
</div>
容易被忽略的三个细节
这些点不处理，骨架屏会在真实项目中“露馅”：
- 必须给
skeleton元素设height或min-height，否则在 Flex/Grid 容器中高度塌陷（Bootstrap 的col默认不设高） - 动画用
background-position而非transform，避免触发重排；linear-gradient的透明区间要足够宽，否则动画卡顿 - 深色模式下，
rgba(128, 128, 128, 0.1)在暗背景上不可见，应改用color-scheme: light dark媒体查询或 CSS 自定义属性动态切换
真正麻烦的是响应式骨架——不同断点下，卡片结构变化，骨架元素的 height 和 border-radius 得跟着媒体查询调整，没人能靠一套 CSS 覆盖所有 Bootstrap 5 的 col-md-4、col-lg-3 组合场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
