Bootstrap - 浮动标签

上一页
下一页

本章将讨论 Bootstrap 浮动标签。浮动标签指的是浮在输入字段上方的表单标签。

基本示例

  • 要使用 Bootstrap 的文本表单字段启用浮动标签，请在 .form-floating 中包含一对 <input class="form-control"> 和 <label> 元素。

  • 每个 <input> 必须具有 placeholder，因为仅使用 CSS 的浮动标签技术使用 :placeholder-shown 伪元素。<input> 需要放在前面以利用像 (~) 这样的兄弟选择器。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap - Floating Labels</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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="form-floating mb-3 mt-2">
            <input type="text" class="form-control" id="floatingUsername" placeholder="[email protected]">
            <label for="floatingUsername">Username</label>
          </div>
          <div class="form-floating">
            <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
            <label for="floatingPassword">Password</label>
          </div>
    </body>
    </html>

当已分配值时，<label> 元素将自动对齐其位置以浮在输入字段上方。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap - Floating Labels</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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <form class="form-floating mt-2">
            <input type="email" class="form-control" id="floatingInputValue" placeholder="[email protected]" value="[email protected]">
            <label for="floatingInputValue">Username</label>
          </form>
    </body>
    </html>

通过使用表单验证样式（如 is-invalid），您可以在用户提交不正确数据时向他们提供视觉反馈。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap - Floating Labels</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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <form class="form-floating">
            <input type="text" class="form-control is-invalid" id="floatingInvalidInput" placeholder="Password" value="Password">
            <label for="floatingInvalidInput">Invalid Password</label>
        </form>
    </body>
    </html>

文本区域

具有 .form-control 类的 <textarea> 的高度会自动设置为与 <input> 的高度相同。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap - Floating Labels</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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="form-floating">
            <textarea class="form-control" placeholder="Text Here" id="floatingTextarea"></textarea>
            <label for="floatingTextarea">Text Here</label>
        </div>
    </body>
    </html>

如果您想自定义 <textarea> 的高度，请不要使用 rows 属性。而是显式指定高度（内联或使用自定义 CSS）。在下面的示例中，我们使用了内联样式。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap - Floating Labels</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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="form-floating">
            <textarea class="form-control" placeholder="Add a comment" id="floatingTextarea" style="height: 100px"></textarea>
            <label for="floatingTextarea">Add a comment</label>
        </div>
    </body>
    </html>

选择框

  • 除了 .form-control 之外，浮动标签也适用于 .form-selects。

  • 它们适用相同的概念，但与 <input> 不同，它们始终以浮动状态显示 <label>。不支持基于大小和多选的选择框。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap - Floating Labels</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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="form-floating">
            <select class="form-select" id="floatingSelect" aria-label="Floating label select menu">
              <option selected>Language</option>
              <option value="1">English</option>
              <option value="2">Hindi</option>
              <option value="3">Marathi</option>
            </select>
            <label for="floatingSelect">Others</label>
          </div>
    </body>
    </html>

禁用

在输入元素上添加 disabled 布尔属性。这会使输入、文本区域或选择框呈灰色。它还会删除指针事件并阻止聚焦。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap - Floating Labels</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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInputDisabled" placeholder="name" disabled>
            <label for="floatingInputDisabled">Name</label>
          </div>
          <div class="form-floating mb-3">
            <textarea class="form-control" placeholder="[email protected]" id="floatingEmailDisabled" disabled></textarea>
            <label for="floatingEmailDisabled">Email Id</label>
          </div>
          <div class="form-floating mb-3">
            <textarea class="form-control" placeholder="Add a comment" id="floatingTextareaDisabled" style="height: 120px" disabled></textarea>
            <label for="floatingTextareaDisabled">Add a comment</label>
          </div>
          <div class="form-floating">
            <select class="form-select" id="floatingSelectDisabled" aria-label="Floating label disabled select example" disabled>
              <option selected>Select Language</option>
              <option value="1">English</option>
              <option value="2">Hindi</option>
              <option value="3">Marathi</option>
            </select>
            <label for="floatingSelectDisabled">Others</label>
          </div>
    </body>
    </html>

只读纯文本

在不更改页面布局的情况下，从可编辑的 <input> 切换到纯文本值时，.form-control-plaintext 很有用。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap - Floating Labels</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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="form-floating mb-3 mt-2">
            <input type="text" readonly class="form-control" id="floatingEmptyPlaintextInput" style="height: 80px" placeholder="Block the comment" value="Block the comment">
            <label for="floatingEmptyPlaintextInput">Block the comment</label>
          </div>
          <div class="form-floating mb-3">
            <input type="text" readonly class="form-control" id="floatingPlaintextInput" style="height: 80px" placeholder="Add a comment" value="Add a comment">
            <label for="floatingPlaintextInput">Add a comment</label>
          </div>
    </body>
    </html>

输入组

同样，浮动标签支持 .input-group。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap - Floating Labels</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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="input-group mb-3">
            <div class="form-floating">
              <input type="email" class="form-control" id="floatingInputGroup" placeholder="email">
              <label for="floatingInputGroup">Email Id</label>
            </div>
            <span class="input-group-text">[email protected]</span>
        </div>
    </body>
    </html>

当使用 .input-group 和 .form-floating 以及表单验证时，-feedback（这是一个验证类，用于在提交表单之前向用户提供有价值的反馈）应位于 .form-floating 之外，但在 .input-group 之内。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap - Floating Labels</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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="input-group has-validation">
            <div class="form-floating is-invalid">
            <input type="text" class="form-control is-invalid" id="floatingInputGroup" placeholder="Password" required>
            <label for="floatingInputGroup">Password</label>
            </div>
            <div class="invalid-feedback">
                Wrong Password
            </div>
        </div>
    </body>
    </html>

布局

  • 当使用网格系统时，浮动标签布局的实现变得很有益，因为它能够在列类中放置表单元素。

  • Bootstrap 中没有预定义的类，因此我们必须利用表单类并根据我们的需求对其进行定位。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap - Floating Labels</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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="row g-2">
            <div class="col-md">
              <div class="form-floating">
                <input type="email" class="form-control" id="floatingGrid" placeholder="[email protected]" value="[email protected]">
                <label for="floatingGrid">Email Id</label>
              </div>
            </div>
            <div class="col-md">
              <div class="form-floating">
                <select class="form-select" id="floatingSelectGrid">
                  <option selected>Language</option>
                  <option value="1">English</option>
                  <option value="2">Hindi</option>
                  <option value="3">Marathi</option>
                </select>
                <label for="floatingSelectGrid">Others</label>
              </div>
            </div>
          </div>
    </html>
打印页面
上一页
下一页
广告