佔位符

為您的組件或頁面使用加載佔位符以指示某些內容可能仍在加載。

在本頁面

關於

佔位符可用於增強應用程序的體驗。它們僅使用 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得到尊重。您可以根據需要將此模式擴展到其他情況，或者 在元素內添加一個以反映實際文本在其位置呈現時的高度。

html

<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網格列類、寬度實用程序或內聯樣式。

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

薩斯

變量

$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;