占位符(Placeholders)

在组件或页面上，使用占位符提示可能仍在加载内容。

本页导航↓

关于

占位符的使用，可以增强应用程序的体验。BootStrap 5的占位符组件是基于HTML和CSS构建的，不依赖任何JavaScript。但是，您需要一些自定义JavaScript来切换它们的可见性。而外观、颜色、大小等则可以通过css类来轻松定义。

示例

下面是一个经典的卡片示意，我们使用占位符组件来重构，以表示“卡片加载中”，二者大小和比例（栅格）变无二样。

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 href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
          </div>
        </div>

细节原理

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

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

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

Width宽度定义

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

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

Color颜色定义

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>

Sizing规格定义

.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>

Animation动画响应

系统有两种动画特效，分别是.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>

Sas

变量

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