Bootstrap5中的Placeholders（占位符）组件

Bootstrap 5中的Placeholders组件是一个非常实用的功能，它主要用于在用户等待页面或组件加载完成时提供视觉上的反馈。通过使用Placeholders，你可以创建一种“加载中”的视觉效果，从而提升用户的体验。

如何使用

在Bootstrap 5中，创建Placeholders的方式非常简单。你只需要在元素上添加.placeholder类和一个网格列类（例如.col-6）来设置其宽度。这些Placeholders可以替换元素内的文本，也可以作为现有组件的修饰类添加。

<p aria-hidden="true">
  <span class="placeholder col-6"></span>
</p>
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>
<p aria-hidden="true">
  <span class="placeholder col-6"></span>
</p>

<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>
<p aria-hidden="true">
  <span class="placeholder col-6"></span>
</p>

<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>

示例

以Bootstrap的卡片组件为例，你可以创建一个加载中的卡片，其大小和比例与正常卡片完全相同。在加载中的卡片中，你可以使用带有.placeholder类的<span>元素来替换标题、文本和按钮等内容的文本。

<div class="card">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
<div class="card" aria-hidden="true">
  <img src="..." class="card-img-top" alt="...">
  <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>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-6"></span>
      <span class="placeholder col-8"></span>
    </p>
    <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
  </div>
</div>
<div class="card">
  <img src="..." class="card-img-top" alt="...">

  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card" aria-hidden="true">
  <img src="..." class="card-img-top" alt="...">
  <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>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-6"></span>
      <span class="placeholder col-8"></span>
    </p>
    <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
  </div>
</div>
<div class="card">
  <img src="..." class="card-img-top" alt="...">

  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card" aria-hidden="true">
  <img src="..." class="card-img-top" alt="...">
  <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>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-6"></span>
      <span class="placeholder col-8"></span>
    </p>
    <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
  </div>
</div>

在上面的示例中，我们可以看到两个卡片组件。第一个是正常的卡片，包含了标题、文本和一个按钮。第二个卡片则是一个加载中的卡片，它的标题、文本和按钮都被替换为了带有.placeholder类的<span>元素。这些<span>元素还使用了网格列类（例如.col-6、.col-7等）来设置它们的宽度，从而模拟出加载中的视觉效果。

宽度

宽度可以通过网格列类（grid column classes）、宽度工具类（width utilities）或内联样式（inline styles）来设置。

<!-- 使用网格列类设置宽度 -->
<span class="placeholder col-6"></span>
<!-- 使用宽度工具类设置宽度 -->
<span class="placeholder w-75"></span>
<!-- 使用内联样式设置宽度 -->
<span class="placeholder" style="width: 25%;"></span>
<!-- 使用网格列类设置宽度 -->
<span class="placeholder col-6"></span>

<!-- 使用宽度工具类设置宽度 -->
<span class="placeholder w-75"></span>

<!-- 使用内联样式设置宽度 -->
<span class="placeholder" style="width: 25%;"></span>
<!-- 使用网格列类设置宽度 -->
<span class="placeholder col-6"></span>

<!-- 使用宽度工具类设置宽度 -->
<span class="placeholder w-75"></span>

<!-- 使用内联样式设置宽度 -->
<span class="placeholder" style="width: 25%;"></span>

颜色

默认情况下，placeholder使用currentColor作为其颜色，这意味着它将继承其父元素的文本颜色。不过，你可以使用自定义颜色或Bootstrap提供的背景颜色工具类来覆盖这个颜色。

<!-- 默认颜色 -->
<span class="placeholder col-12"></span>
<!-- 使用背景颜色工具类 -->
<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
<span class="placeholder col-12 bg-dark"></span>
<!-- 默认颜色 -->
<span class="placeholder col-12"></span>

<!-- 使用背景颜色工具类 -->
<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
<span class="placeholder col-12 bg-dark"></span>
<!-- 默认颜色 -->
<span class="placeholder col-12"></span>

<!-- 使用背景颜色工具类 -->
<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
<span class="placeholder col-12 bg-dark"></span>

尺寸

placeholder的尺寸基于其父元素的排版样式。你可以使用尺寸修改器来定制它们：.placeholder-lg（大）、.placeholder-sm（小）或.placeholder-xs（极小）。

<!-- 大尺寸 -->
<span class="placeholder col-12 placeholder-lg"></span>
<!-- 默认尺寸 -->
<span class="placeholder col-12"></span>
<!-- 小尺寸 -->
<span class="placeholder col-12 placeholder-sm"></span>
<!-- 极小尺寸 -->
<span class="placeholder col-12 placeholder-xs"></span>
<!-- 大尺寸 -->
<span class="placeholder col-12 placeholder-lg"></span>

<!-- 默认尺寸 -->
<span class="placeholder col-12"></span>

<!-- 小尺寸 -->
<span class="placeholder col-12 placeholder-sm"></span>

<!-- 极小尺寸 -->
<span class="placeholder col-12 placeholder-xs"></span>
<!-- 大尺寸 -->
<span class="placeholder col-12 placeholder-lg"></span>

<!-- 默认尺寸 -->
<span class="placeholder col-12"></span>

<!-- 小尺寸 -->
<span class="placeholder col-12 placeholder-sm"></span>

<!-- 极小尺寸 -->
<span class="placeholder col-12 placeholder-xs"></span>

动画

你可以使用.placeholder-glow或.placeholder-wave动画类来更好地传达正在积极加载的感知。

<!-- 使用glow动画 -->
<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>
<!-- 使用wave动画 -->
<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>
<!-- 使用glow动画 -->
<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

<!-- 使用wave动画 -->
<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>
<!-- 使用glow动画 -->
<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

<!-- 使用wave动画 -->
<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>

自定义

除了Bootstrap提供的类之外，你还可以使用CSS来进一步自定义placeholder的外观。例如，你可以调整边框、圆角、阴影等属性。

/* 自定义placeholder样式 */
.placeholder {
  border: 1px dashed #ccc; /* 添加边框 */
  border-radius: 5px; /* 调整圆角 */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}
/* 自定义placeholder样式 */
.placeholder {
  border: 1px dashed #ccc; /* 添加边框 */
  border-radius: 5px; /* 调整圆角 */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}
/* 自定义placeholder样式 */
.placeholder {
  border: 1px dashed #ccc; /* 添加边框 */
  border-radius: 5px; /* 调整圆角 */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

总结

总的来说，Bootstrap 5中的Placeholders组件是一个非常实用且易于使用的功能，它可以帮助你提升应用的用户体验，让用户在等待页面或组件加载时不再感到无聊或焦虑。