占位符

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

更新于: 2023-04-30 14:28:21 查看: 609

发布于: 2021-9-6 15:48 发布者: 大米

概述

占位符可用于增强应用程序的体验。它们只用 html 和 css 构建，这意味着你不需要任何 javascript 来创建它们。然而，你需要一些自定义的 javascript 来切换它们的可见性。它们的外观、颜色和尺寸可以很容易地通过我们的实用程序类定制。

示例

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

Placeholder
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)设置宽度。它们可以替换元素中的文本，或者作为修饰符类添加到现有组件中。

We apply additional styling to .btns via ::before to ensure the height is respected。您可以根据需要扩展此模式以适应其他情况，或者在元素中添加一个 & nbsp; 以反映实际文本在其位置呈现时的height。 

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

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

宽度

You can change the width through grid column classes, width utilities, or inline styles. 

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

颜色

By default, the placeholder uses currentColor. This can be overriden with a custom color or utility class. 

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

大小

The size of .placeholders are based on the typographic style of the parent element. Customize them with sizing modifiers: .placeholder-lg, .placeholder-sm, or .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>

动画

Animate placehodlers with .placeholder-glow or .placeholder-wave to better convey the perception of something being actively loaded. 

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

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


扫描二维码，手机查看
声明：部分数据/图片来源互联网，不代表Hluse Doc.,真实性请妥善甄别。
收藏 邀请