Bootstrap - 佔位符

上一頁
下一頁

本章討論佔位符。佔位符是指在輸入欄位或容器中顯示的臨時文字或影像，直到使用者輸入某些資料或載入實際內容。

佔位符通常用於提供預期輸入格式的提示或示例。它們用於增強和自定義應用程式。

一些需要記住的關鍵點

  • 僅當輸入欄位或容器為空時才顯示佔位符。

  • 佔位符提供視覺線索並改善使用者體驗。

工作原理

  • 可以使用類.placeholder和網格列（例如.col-6）來建立佔位符，以設定佔位符的寬度。

  • 一旦向文字區域添加了一些內容，佔位符就會消失，並被輸入的資料替換。

  • 可以透過::before向.btn應用附加樣式，以便尊重高度。

  • 相同的模式也可以擴充套件到其他情況下，或者您可以在元素中新增 以顯示高度，當新增實際文字時。

建立佔位符

這是一個建立佔位符的示例

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Placeholders</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h4>Placeholders example</h4>
      <div class="card">
        <img src="/bootstrap/images/template.jpg" class="card-img-top" alt="...">

        <div class="card-body">
          <h5 class="card-title">Card without placeholders</h5>
          <p class="card-text">An example showing a card without the placeholders.</p>
          <a href="#" class="btn btn-primary">Go</a>
        </div>
      </div>
      <div class="card" aria-hidden="true">
        <img src="/bootstrap/images/template.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">
            Card with placeholders
          </h5>
          <p class="card-text">
            <span class="placeholder col-2"></span>
            <span class="placeholder col-4"></span>
            <span class="placeholder col-6"></span>
            <span class="placeholder col-5"></span>
            <span class="placeholder col-8"></span>
          </p>
          <a class="btn btn-primary disabled placeholder col-2"></a>
        </div>
      </div>
  </body>
</html>

為了使佔位符對螢幕閱讀器隱藏，請使用aria-hidden="true"。讓我們看一個例子

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap - Placeholders</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="container">
          <h4>Placeholder hidden</h4>
          <p><span class="placeholder col-7"></span></p>
          <p><span class="placeholder col-4"></span></p>
          <p aria-hidden="true">
            <span class="placeholder col-6"></span>
          </p>
          <span class="placeholder col-4"></span>
        </div>
    </body>
</html>

佔位符 - 寬度

可以透過網格列類（例如col-6）、實用工具類（例如w-50）或內聯樣式（例如style="width: 75%;"）來修改佔位符的寬度。

讓我們看看修改佔位符寬度的示例

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap - Placeholders</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="container">
          <h4>Placeholders example - width</h4>
          <p><span class="placeholder col-2"></span></p>
          <p><span class="placeholder col-4 w-25"></span></p>
          <p><span class="placeholder col-4 w-50"></span></p>
          <p><span class="placeholder" style="width: 75%;"></span></p>
        </div>
    </body>
</html>

佔位符 - 顏色

可以使用自定義顏色或實用工具類向佔位符新增顏色。.placeholder預設使用currentColor。

讓我們看看設定佔位符顏色的示例

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap - Placeholders</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container">
        <h4>Placeholders example - color</h4>
        <p><span class="placeholder col-7"></span></p>
        <p><span class="placeholder col-4 bg-primary"></span></p>
        <span class="placeholder col-4 bg-info"></span>
        <p><span class="placeholder col-6 bg-danger"></span></p>
        <p><span class="placeholder col-8 bg-warning"></span></p>
      </div>
    </body>
</html>

佔位符 - 大小

可以使用修飾符（例如.placeholder-lg, .placeholder-sm,或.placeholder-xs）自定義佔位符的大小，因為佔位符的大小取決於父元素的樣式。

讓我們看看佔位符大小的示例

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap - Placeholders</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container">
        <h4>Placeholders example - sizing</h4>
        <p><span class="placeholder col-2 "></span></p>
        <p><span class="placeholder col-4 placeholder-lg"></span></p>
        <p><span class="placeholder col-4 placeholder-sm"></span></p>
        <p><span class="placeholder col-6 placeholder-xs"></span></p>
      </div>
    </body>
</html>

佔位符 - 動畫

可以使用類.placeholder-glow或.placeholder-wave為佔位符新增動畫。

讓我們看看向佔位符新增動畫的示例

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap - Placeholders</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container">
        <h4>Placeholders example - animation</h4>
        <!--placeholder-glow-->
        <p class="placeholder-glow">
          <span class="placeholder col-10"></span>
        </p>
        <!--no animation-->
        <p><span class="placeholder col-10 "></span></p>
        <!--placeholder-wave-->
        <p class="placeholder-wave">
          <span class="placeholder col-10"></span>
        </p>
      </div>
    </body>
</html>
列印頁面
上一頁
下一頁
廣告