Bootstrap 简明教程

Bootstrap - Placeholders

本章讨论占位符。占位符是指在输入栏或容器中显示的临时文本或图像，直到用户输入某些数据或加载实际内容。

This chapter discusses about placeholders. A placeholder refers to a temporary text or image that is displayed in an input field or container until the user enters some data or the actual content is loaded.

占位符通常用于提供预期的输入格式的提示或示例。它们用于应用程序的增强和自定义。

Placeholders are commonly used to provide hints or examples of the expected input format. They are used for the enhancement and customization of the application.

需要注意的一些重点：

Some key points to remember:

Placeholders are only displayed when the input field or container is empty.
The placeholders provide visual cues and improve the user experience.

How it works

Placeholders can be created using the class .placeholder and a grid column, such as .col-6 to set the width of the placeholder.
Once some content is been added to the textarea, the placeholder disappears and is replaced by the entered data.
Additional styling can be applied to the .btn*s via *::before, such that the height is respected.
The same pattern can be extended in other cases as well, or you can add within an element to show the height, when actual text is added.

Create placeholders

以下是如何创建一个占位符的示例：

Here’s an example of how to create placeholders:

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

You can edit and try running this code using the *Edit & Run *option.

<!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" 。我们看一个示例：

In order to make the placeholder hidden from the screen readers, use aria-hidden="true". Let us see an example:

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

You can edit and try running this code using the *Edit & Run *option.

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

Placeholder - Width

可以通过网格列类，如 col-6 、工具程序，如 w-50 或内联样式，如 style="width: 75%;" 修改占位符的宽度。

Width of the placeholders can be modified through grid column classes, such as col-6, utilities such as w-50, or inline styles such as style="width: 75%;".

让我们看一下修改占位符宽度的示例：

Let us see the example for modifying the width of the placeholders:

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

You can edit and try running this code using the *Edit & Run *option.

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

可以使用自定义颜色或工具程序类将颜色添加到占位符。 .placeholder 默认使用 currentColor 。

Color can be added to a placeholder using a custom color or utility class. The .placeholder uses currentColor by default.

让我们看一个为占位符设置颜色的示例：

Let us see an example for setting the color to the placeholder:

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

You can edit and try running this code using the *Edit & Run *option.

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

可以使用诸如 .placeholder-lg, .placeholder-sm, 或 .placeholder-xs 之类的修饰符自定义占位符的大小，因为占位符的大小取决于父元素的样式。

Sizing of placeholders can be customized using the modifiers, such as .placeholder-lg, .placeholder-sm, or .placeholder-xs, as the the size of the placeholders depend on the style of the parent element.

让我们看一下占位符大小的示例：

Let us see an example of sizing of placeholders:

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

You can edit and try running this code using the *Edit & Run *option.

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

可以使用类 .placeholder-glow 或 .placeholder-wave 使占位符动画化。

Placeholders can be animated using the classes .placeholder-glow or .placeholder-wave.

让我们看一个向占位符添加动画的示例：

Let us see an example of adding animation to the placeholders:

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

You can edit and try running this code using the *Edit & Run *option.

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