占位符
为组件或页面使用加载占位符来指示可能仍在加载的内容。更新于: 2023-04-30 14:28:21 查看: 522
发布于: 2021-9-6 15:48 发布者: 大米
概述
占位符可用于增强应用程序的体验。它们只用 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 href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
</div>
</div>
工作原理
创建占位符通过.placeholder
类和网格列类(例如,.col-6
)设置宽度。它们可以替换元素中的文本,或者作为修饰符类添加到现有组件中。
We apply additional styling to .btn
s 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
usescurrentColor
. 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>