l-1

WEB教程

主页/Bootstrap V5.3 中文手册/组件集合 Components/Placeholders 占位符

Bootstrap V5.3 中文手册

Placeholders 占位符

为您的组件或页面使用加载占位符（骨架加载器）来指示某些内容可能仍在加载中。

大约

占位符可用于增强应用程序的体验。它们仅使用 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 class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
  </div>
</div>

运作方式

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

我们对 s via 应用额外的样式，以确保遵守 。您可以根据需要将此模式扩展到其他情况，或者在元素中添加 a 以反映实际文本在其位置呈现时的高度。.btn::beforeheight&nbsp;

[HTML全文] 
<p aria-hidden="true">
  <span class="placeholder col-6"></span>
</p>

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

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

宽度

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

[HTML全文] 
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>

颜色

默认情况下，使用 .这可以使用自定义颜色或实用程序类覆盖。placeholdercurrentColor

[HTML全文] 
<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

[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-glow.placeholder-wave

[HTML全文] 
<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

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

CSS系统

Sass 变量

scss/_variables.scss 
$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;

声明：该Bootstrap v5.3 内容来自Bootstrap v5.3官方网站；中文翻译是使用Microsoft Edge浏览器免费翻译而来，且部分存在结合了Deepseek及人工翻译。