Bootstrap 简明教程
Bootstrap - Floating Labels
本章将讨论 Bootstrap 浮动标签。浮动标签是指浮动在输入字段上方的表单标签。
This chapter will discuss about Bootstrap floating labels. Floating labels refer to form labels that float over the input fields.
Basic example
-
To allow floating labels with Bootstrap’s textual form fields, include a pair of <input class="form-control"> and <label> elements in .form-floating.
-
Each <input> must have a placeholder since the technique for CSS-only floating labels employs the :placeholder-shown pseudo-element. The <input> needs to be placed first to make use of a sibling selector like (~).
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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> 元素将自动对其位置调整为浮动在输入字段的上方。
When a value is already assigned, <label> elements will automatically align their position to float over the input field.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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 等表单验证样式，可在用户提交不正确数据时为其提供视觉反馈。
By using form validation styles like is-invalid, you can provide visual feedback to users when they submit incorrect data.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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>Textareas
带有类 .form-control 的 <textarea> 的高度会自动设置为与 <input> 的高度相同。
The height of <textarea> with the class .form-control is automatically set to have the same height as <input>.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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）。在下面的示例中，我们使用了内联样式。
Don’t use the rows attribute if you want to customize the height of your <textarea>. Instead, specify a height explicitly (either inline or using customized CSS). In the below example we have used inline styling.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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>Selects
-
Floating labels are only accessible on .form-selects, in addition to .form-control.
-
The same concepts apply to them, except unlike <input>*s, they always display the *<label> in its floated state. Size-based and multiple selects are not supported.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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>Disabled
在输入中添加 disabled 布尔属性。这会给输入、文本区或选择器一个灰显外观。它还会移除指针事件并防止聚焦。
Add the disabled boolean attribute on an input. This gives grayed-out appearance to an input, textarea, or select. It also removes pointer events, and prevents focusing.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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>Readonly plaintext
在从可编辑 <input> 切换到普通文本值而不更改页面布局时， .form-control-plaintext 可能有用。
When switching from an editable <input> to a plaintext value without changing the page layout, .form-control-plaintext can be useful.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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 groups
同样地，浮动标签支持 .input-group 。
Similarly, floating labels support .input-group.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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>当使用 .input-group 和 .form-floating 以及表单验证时， -feedback （它是一个验证类，用于在提交表单前向用户提供有价值的反馈）应该放置在 .form-floating 外部但 .input-group 内部。
The -feedback (it is a validation class to provide valuable feedback to users before submitting the form.) should be positioned outside of the .form-floating but inside of the .input-group when using .input-group and .form-floating along with form validation.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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>Layout
-
When using a grid system, the implementation of floating labels layout becomes beneficial as it enables the placement of form elements within column classes.
-
There is no pre-defined classes in bootstrap, so we must utilize form classes and position them according to our requirement.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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>