View on GitHub

佔位符 (Placeholders)

為你的元件或頁面使用加載佔位符來呈現可能在載入的內容。

六角學院的 Bootstrap 5 課程上線囉，立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

On this page

關於

Placeholder 可以用於增加應用程式的體驗。他們只使用 HTML 和 CSS 來建構，這意味著不需使用 JavaScript 來創建他們。但是，將會需要一些自定義 JavaScript 來切換他們的可見性。他們的外觀、顏色和大小可以通過通用類別輕鬆客製化。

範例

在下面的範例中，採用一個典型的卡片元件並使用 placeholder 重製來製作 “加載卡片”。兩者的大小和比例相同。

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) 設定 width 來製作 placeholder。他們可以替換元素內的文字或是作為修飾符類別添加到現有的元件中。

我們通過 ::before 將額外的樣式應用到 .btn 來確保 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" 僅表示該元素應該對螢幕閱讀器隱藏。Placeholder 的加載行為取決於作者如何實際使用 placeholder 樣式、計畫如何更新內容等。可能需要一些 JavaScript 程式碼來交換 placeholder 的狀態並通知 AT 使用者更新。

Width

你可以通過網格類別、寬度通用類別或是行內樣式改變 width。

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

Color

在預設情況下，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>

Sizing

.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 為 placeholder 製作動畫，來更好地傳達某些內容正在積極加載的感覺。

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

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

Sass

Variables

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