in English
占位符
为您的组件或页面使用加载占位符以指示某些内容可能仍在加载。
在本页面
关于
占位符可用于增强应用程序的体验。它们仅使用 HTML 和 CSS 构建,这意味着您不需要任何 JavaScript 来创建它们。但是,您将需要一些自定义 JavaScript 来切换它们的可见性。它们的外观、颜色和尺寸可以通过我们的实用程序类轻松定制。
例子
在下面的示例中,我们采用一个典型的卡片组件并使用占位符重新创建它以创建“加载卡片”。两者之间的大小和比例相同。
<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
. 它们可以替换元素内的文本或作为修饰符类添加到现有组件中。
.btn
我们对s via应用额外的样式以::before
确保其height
得到尊重。您可以根据需要将此模式扩展到其他情况,或者
在元素中添加一个以反映实际文本在其位置呈现时的高度。
<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"
only 表示该元素应该对屏幕阅读器隐藏。占位符的
加载行为取决于作者将如何实际使用占位符样式、他们计划如何更新内容等。可能需要一些 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>
浆纱
s的大小.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>
萨斯
变量
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;