Bootstrap - 浮动标签

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

基本示例

要允许 Bootstrap 的文本表单字段使用浮动标签，请在.form-floating中包含一对<input class="form-control">和<label>元素。
每个<input>必须有一个占位符，因为纯 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/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="form-floating mb-3 mt-2">
            <input type="text" class="form-control" id="floatingUsername" placeholder="tutorialspoint@example.com">
            <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/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>
        <form class="form-floating mt-2">
            <input type="email" class="form-control" id="floatingInputValue" placeholder="tutorialspoint@example.com" value="tutorialspoint@example.com">
            <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/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>
        <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/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="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/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="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/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="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>

残疾人

在输入上添加禁用的布尔属性。这会为输入、文本区域或选择提供灰色外观。它还会删除指针事件并阻止聚焦。

例子

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

    <!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/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="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="tutorialspoint@example.com" 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/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="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/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="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">tutorialspoint@example.com</span>
        </div>
    </body>
    </html>

-feedback （它是一个验证类，用于在提交表单之前向用户提供有价值的反馈。）应位于 .form -floating之外，但在使用.input-group和.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/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="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/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="row g-2">
            <div class="col-md">
              <div class="form-floating">
                <input type="email" class="form-control" id="floatingGrid" placeholder="tutorialspoint@example.com" value="tutorialspoint@example.com">
                <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>