Bootstrap 简明教程
Bootstrap - Floating Labels
本章将讨论 Bootstrap 浮动标签。浮动标签是指浮动在输入字段上方的表单标签。
Basic example
-
要允许 Bootstrap 的文本表单字段浮动标签，请在 .form-floating 中包含一对 <input class="form-control"> 和 <label> 元素。
-
每个 <input> 必须有一个 placeholder ，因为仅限 CSS 浮动标签的技术使用 :placeholder-shown 伪元素。 <input> 需要首先放置才能使用同级选择器（如 (~)）。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!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> 元素将自动对其位置调整为浮动在输入字段的上方。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!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 等表单验证样式，可在用户提交不正确数据时为其提供视觉反馈。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!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> 的高度相同。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!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）。在下面的示例中，我们使用了内联样式。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!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
-
浮动标签仅在 .form-selects 上可用，除此以外，还可以使用 .form-control 。
-
相同概念适用于它们，但不同于 <input>*s, they always display the *<label> 处于浮动状态。不支持基于大小和多重选择。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!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 布尔属性。这会给输入、文本区或选择器一个灰显外观。它还会移除指针事件并防止聚焦。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!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 可能有用。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!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 。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!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 内部。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!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
-
使用网格系统时，浮动标签布局的实现变得有利，因为它可以将表单元素放置在列类中。
-
Bootstrap 中没有预定义的类，因此我们必须利用表单类并根据我们的要求对其进行定位。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!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>