占位符 · Bootstrap 6.0 中文文档

关于

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

示例

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

卡片标题

一些快速的示例文本，用于扩展卡片标题并构成卡片内容的大部分。

去某个地方

HTML

          <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-solid theme-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-wave">
      <span class="placeholder col-6"></span>
    </h5>
    <p class="card-text placeholder-wave">
      <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 class="btn-solid theme-primary disabled placeholder col-6" aria-disabled="true"></a>
  </div>
</div>

它是如何工作的

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

我们对...应用额外的样式 .btn通过 ::before 确保 height 是受到尊重的。你可以根据需要将此模式扩展到其他情况，或添加一个   在元素内以反映实际文本显示在其位置时的高度。

HTML

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

<a class="btn-solid theme-primary disabled col-4" aria-disabled="true"></a>

使用 aria-hidden="true" 仅表示该元素应对屏幕阅读器隐藏。占位符的加载行为取决于作者实际使用占位符样式的方式、他们计划如何更新内容等。可能需要一些 JavaScript 代码来切换占位符的状态并通知辅助技术用户更新信息。

宽度

你可以通过网格列类、宽度工具或内联样式更改width。

HTML

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

颜色

默认情况下，placeholder 使用 currentColor。可以使用自定义颜色或工具类来覆盖此设置。

HTML

<span class="placeholder col-9"></span>

<span class="placeholder col-6 bg-primary"></span>
<span class="placeholder col-6 bg-accent"></span>
<span class="placeholder col-6 bg-success"></span>
<span class="placeholder col-6 bg-danger"></span>
<span class="placeholder col-6 bg-warning"></span>
<span class="placeholder col-6 bg-info"></span>
<span class="placeholder col-6 bg-inverse"></span>
<span class="placeholder col-6 bg-secondary"></span>

尺寸

.placeholder 的大小基于父元素的排版样式。使用尺寸修饰符 .placeholder-lg、.placeholder-sm 或 .placeholder-xs 来自定义它们。

HTML

<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-wave 作为默认加载动画。使用 .placeholder-pulse 作为不透明度脉冲。旧的 .placeholder-glow 类仍然作为 .placeholder-pulse 的兼容别名。

HTML

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

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

文本

添加 .placeholder-wave 对内联元素应用加载动画到文本上。

正在处理…

HTML

<span class="placeholder-wave fg-3">Working on it…</span>

CSS

变量

scss/_placeholder.scss

// stylelint-disable-next-line scss/dollar-variable-default
$placeholder-tokens: defaults(
  (
    --placeholder-opacity-max: .18,
    --placeholder-opacity-min: .1,
  ),
  $placeholder-tokens
);

// stylelint-disable-next-line scss/dollar-variable-default
$placeholder-wave-tokens: defaults(
  (
    --placeholder-wave-opacity-max: 1,
    --placeholder-wave-opacity-min: .4,
  ),
  $placeholder-wave-tokens
);