占位符

为您的组件或页面使用加载占位符以指示某些内容可能仍在加载。

关于

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

例子

在下面的示例中,我们采用一个典型的卡片组件并使用占位符重新创建它以创建“加载卡片”。 两者之间的大小和比例相同。

...
《蓝公案》

名《鹿洲公案》、《公案偶记》,作者是清代循吏蓝鼎元,共两卷二十四则。主要叙述了作者处理政务,审判案件,破除迷信的经历,有较高的史学价值。

阅读详细
<div class="card" style="width: 18rem;">
        <img src="images/gallery/1.jpg" class="card-img-top" alt="...">

        <div class="card-body">
          <h5 class="card-title">《蓝公案》</h5>
          <p class="card-text">名《鹿洲公案》、《公案偶记》,作者是清代循吏蓝鼎元,共两卷二十四则。主要叙述了作者处理政务,审判案件,破除迷信的经历,有较高的史学价值。</p>
          <a href="#" class="btn btn-primary">阅读详细</a>
        </div>
      </div>

      <div class="card" style="width: 18rem;" aria-hidden="true">
        <img src="images/gallery/2.jpg" 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 类和网格列类(例如 .col-6)创建占位符以设置宽度。 它们可以替换元素内的文本或作为修饰符类添加到现有组件中。

我们通过 ::before.btns 应用额外的样式以确保高度得到尊重。 您可以根据需要将此模式扩展到其他情况,或添加一个   在元素内反映实际文本在其位置呈现时的高度。

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

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

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

默认情况下,placeholder 使用 currentColor。 这可以用自定义颜色或实用程序类覆盖。

<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>
动画

使用 .placeholder-glow.placeholder-wave 为占位符设置动画,以更好地传达对正在主动加载的内容的感知。

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

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