占位符 Placeholders
占位符用灰色的短条模拟正在加载的内容，让用户提前感知页面布局。它只需要 HTML 与 CSS，配合少量 JavaScript 即可完成「加载骨架 → 真实内容」的切换。
基础占位与宽度
placeholder 本身没有宽度，需要借助网格列类（如 col-6）、宽度工具类（如 w-75）或内联样式指定宽度，通常放在 <p> 等文本元素内模拟一行文字。
HTML 示例
颜色
占位符默认使用 currentColor 灰色；叠加 bg-* 背景工具类即可换成语义色，与真实内容中的配色保持一致。
HTML 示例
尺寸
占位符的高度随父元素排版样式走，使用 placeholder-lg、placeholder-sm 修饰符可以直接得到更大或更小的行高。
HTML 示例
按钮占位
把 placeholder 叠加到按钮上（同时加 disabled 与 aria-disabled="true"），按钮就变成一块不可点的灰色占位条，尺寸与真实按钮完全一致。
HTML 示例
模拟加载（真实交互）
给占位符加 placeholder-glow 呼吸动画，表示内容正在加载；点击下方「重新加载」按钮，卡片会先切到占位骨架，1.5 秒后替换为真实内容。
王晓萌 · 前端工程师
2024 年 3 月加入团队，负责组件库与设计系统建设，主导了三次大型版本升级。
HTML 示例