占位符（Placeholders）

为组件或页面使用加载占位符，以显示某些内容仍在加载中。

On this page

关于

占位符可用于增强应用程序的体验。它们仅使用 HTML 和 CSS 构建，这意味着您不需要任何 JavaScript 就能创建它们。不过，您需要一些自定义 JavaScript 来切换它们的可见性。它们的外观、颜色和大小可以通过我们的实用工具类轻松定制。

示例

在下面的示例中，我们使用了一个典型的卡片组件，并通过应用占位符重新创建了一个 “加载卡片”。两者的大小和比例相同。

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

<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 class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
  </div>
</div>

工作原理

使用.placeholder类和网格列类（如.col-6）创建占位符，以设置宽度。它们可以替换元素内的文本，也可以作为修改类添加到现有组件中。

我们通过 ::before 对 .btn 应用了额外的样式，以确保 height 得到尊重。您可以根据需要在其他情况下扩展此模式，或在元素中添加   以反映实际文本呈现时的高度。

html

<p aria-hidden="true">
  <span class="placeholder col-6"></span>
</p>

<a class="btn btn-primary disabled placeholder col-4" aria-disabled="true"></a>

使用aria-hidden="true"仅表示对屏幕阅读器来说该元素应该是隐藏的。占位符的加载行为取决于作者将如何实际使用占位符样式、计划如何更新等。可能需要一些 JavaScript 代码来交换占位符的状态，并通知 AT 用户更新。

宽度

您可以通过网格列类、宽度实用程序或内联样式来更改 width。

html

<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>

颜色

默认情况下，placeholder 使用 currentColor。可以使用自定义颜色或实工具类重载该选项。

html

<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-ssm 或 .placeholder-xs。

html

<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对占位符进行动画处理，以更好地表达正在积极加载的内容。

html

<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>

CSS

Sass 变量

scss/_variables.scss

$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;