bootstrap 5 已彻底移除 .placeholder 类，不再支持 .placeholder-lg 等占位符样式；推荐用 opacity + background-color 手写骨架屏，并配合 aria-busy 和 aria-live 实现语义化加载态。
Placeholder 组件在 Bootstrap 5 中已移除，别再找 placeholder 类
Bootstrap 5 官方彻底删掉了 .placeholder 这套占位符类（比如 .placeholder-lg、.placeholder-wave），它不是被“改名”或“迁移到新模块”，而是直接废弃。如果你在文档里搜不到、在 CSS 文件里 grep 不到、用 DevTools 看不到对应样式——不是你漏看了，是它真没了。
常见错误现象：class="placeholder placeholder-lg bg-primary" 在 Bootstrap 5 页面上完全没效果；升级项目后原本的骨架屏突然变空白或错位。
- Bootstrap 4.6 支持
.placeholder，但 5.0+ 彻底移除 - 官方替代方案是推荐用
background-color+aspect-ratio或padding-top模拟骨架，配合自定义动画 - 第三方库如
react-placeholder或vue-skeleton-loader仍可工作，但它们和 Bootstrap 无关
想实现骨架屏？用 opacity + background-color 手写更可控
Bootstrap 5 把占位符逻辑交还给开发者，反而更适合按需定制。关键不是“复刻旧样式”，而是用现代 CSS 实现更轻量、更语义的加载态。
使用场景：列表项加载中、头像/卡片占位、响应式图文区块。
- 基础骨架块：
<div class="bg-secondary" style="opacity: 0.3; width: 100px; height: 100px;"></div> - 文字行模拟：用多个
<span class="d-block bg-secondary" style="opacity: 0.2; width: 70%; height: 1rem; margin-bottom: 0.5rem;"></span> - 避免用
color: transparent—— 屏幕阅读器可能跳过，也不利于可访问性 - 动画建议用
@keyframes配合background-image: linear-gradient(...)模拟波纹扫光，比旧版.placeholder-wave性能更好
如果必须兼容老代码，加一行 CSS 就能“复活” Placeholder
不是所有项目都能立刻重构骨架逻辑。这时最省事的办法，是自己补上 Bootstrap 4 风格的 .placeholder 规则，不依赖 JS、不影响打包体积。
性能影响几乎为零；兼容性覆盖所有支持 CSS 变量的浏览器（Chrome 49+、Firefox 31+、Safari 9.1+）。
- 复制这段进你的 SCSS 或 CSS 文件末尾即可：
.placeholder { background-color: currentColor; opacity: 0.3; } .placeholder.btn::before { content: ""; display: inline-block; width: 100%; height: 100%; } @media (prefers-reduced-motion: reduce) { .placeholder { animation: none; } } - 需要波纹动效？补一句：
.placeholder-wave { animation: placeholderWave 2s ease-in-out infinite; }，再定义@keyframes placeholderWave - 注意：不要用
!important覆盖 Bootstrap 原生类，优先级靠后即可生效
用 aria-busy 和 aria-live 配合，才是真正的加载态语义
视觉占位只是表象，用户真正需要的是“系统正在处理”的明确信号。纯 CSS 占位符无法传达状态变化，容易让屏幕阅读器用户困惑。
使用场景：表单提交、分页加载、搜索建议下拉。
- 给容器加
aria-busy="true"，加载完成时设为"false"或移除属性 - 搭配
aria-live="polite"的提示文案（如<div aria-live="polite" class="visually-hidden">正在加载评论...</div>） - 别只依赖
opacity变化——键盘用户看不到透明度变化，也听不到，得靠 ARIA 显式声明 - Bootstrap 5 的
.visually-hidden类可用，但aria-busy需手动控制，JS 里更新
