Bootstrap 简明教程

Bootstrap - Placeholders

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

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

需要注意的一些重点：

占位符仅在输入栏或容器为空时显示。
占位符提供视觉提示，改善用户体验。

How it works

可以使用类 .placeholder 及网格列（例如 .col-6 ）创建占位符，以设置占位符的宽度。
一旦将一些内容添加到文本区域，占位符就会消失，并由输入数据替换。
可以对 .btn*s via *::before 应用附加样式，以便 height 得到保留。
同样的模式在其他情况下也可以扩展，或者你可以在一个元素中添加   以在添加实际文本时显示高度。

Create placeholders

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

Example

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

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

Example

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

<!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%;" 修改占位符的宽度。

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

Example

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

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

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

Example

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

<!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 之类的修饰符自定义占位符的大小，因为占位符的大小取决于父元素的样式。

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

Example

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

<!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 使占位符动画化。

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

Example

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

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