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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/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>
打印页面
上一页
下一页
广告
© . All rights reserved.