BS5 Placeholder 占位符

学习使用 Placeholder 组件在内容加载时显示占位提示，提升用户体验。 · 难度：入门 · +15XP

Placeholder 简介

Placeholder 是 Bootstrap 5 新增的组件，用于在内容加载时显示灰色占位块，模拟最终内容的布局。它通常与卡片或列表配合使用。

基本用法

代码示例

<div class='card'>
  <div class='card-body'>
    <h5 class='card-title placeholder-glow'>
      <span class='placeholder col-6'></span>
    </h5>
    <p class='card-text placeholder-glow'>
      <span class='placeholder col-7'></span>
      <span class='placeholder col-4'></span>
    </p>
    <a class='btn btn-primary disabled placeholder col-3'></a>
  </div>
</div>

练习提示

在右侧代码中，创建一个卡片并添加 placeholder-glow 和 placeholder 类来模拟加载状态。尝试替换为 placeholder-wave 观察动画差异。