Bootstrap 5 提供了一种名为浮动标签（Floating Labels）的输入框样式，这种样式能够使表单输入更加美观且用户友好。通过使用浮动标签，输入框的标签会在用户输入时自动上浮到输入框上方，从而提供更多的空间用于输入文本。
使用浮动标签
创建浮动标签输入框
为了使用浮动标签功能，你需要在你的 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件。接着，在创建输入框时，只需要在 <input>、<textarea> 或 <select> 元素上添加 form-floating 类，并将标签 (<label>) 放置在输入框之前即可。
<div class="form-floating mb-3"> <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"> <label for="floatingInput">Email address</label> </div>
自定义浮动标签样式
你可以根据需要自定义浮动标签的样式，包括字体大小、颜色、边距等。例如，你可以通过修改 .form-control::placeholder 来改变浮动标签显示时的样式。
.form-control::placeholder {
color: #aaa;
opacity: 1; /* Firefox */
}使用不同的输入类型
浮动标签不仅适用于文本输入，还可以用于其他类型的输入，如密码、数字、日期等。只需确保将相应的 type 属性添加到输入元素中。
<div class="form-floating mb-3"> <input type="password" class="form-control" id="floatingPassword" placeholder="Password"> <label for="floatingPassword">Password</label> </div>
在表单中使用浮动标签
当你需要在一个表单中使用多个浮动标签时，可以将它们包裹在一个带有 class="form-floating" 的容器中。这样可以保持一致的样式和布局。
-- -------------------- ---- -------
------
---- -------------------- ------
------ ----------- -------------------- ----------------- -------------------
------ -------------------------------
------
---- -------------------- ------
------ ------------ -------------------- ------------------ --------------------
------ ---------------------------------
------
------- ------------- ---------- ----------------------------
-------响应式浮动标签
浮动标签在不同设备上表现良好，但如果你希望进一步调整其响应式行为，可以通过媒体查询来实现。例如，你可以为小屏幕设备设置不同的字体大小或间距。
@media (max-width: 576px) {
.form-control::placeholder {
font-size: 0.8rem;
}
}浮动标签的注意事项
虽然浮动标签看起来很酷，但在某些情况下可能会引起一些用户体验问题。例如，如果标签文字较长或者用户需要频繁查看提示信息，浮动标签可能不如静态标签直观。因此，在设计表单时，请考虑目标用户群体的需求和习惯。
实例演示
以下是一个完整的浮动标签表单实例，展示了如何在实际项目中应用浮动标签技术：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
----- --------------- ---------------------------- -------------------
---------------- - --------------
----- ------------------------------------------------------------------------------ -----------------
-------
-------------------------- -
------ -----
-------- -- -- ------- --
-
--------
-------
------
---- ---------------- ------
------
---- -------------------- ------
------ ----------- -------------------- ----------------- -------------------
------ -----------------------------
------
---- -------------------- ------
------ ------------ -------------------- ------------------ --------------------
------ --------------------------------
------
---- -------------------- ------
------ --------------- -------------------- --------------------- -----------------------
------ ---------------------------------
------
------- ------------- ---------- ------------------------
-------
------
------- -----------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------
-------
-------这个例子展示了如何在 Bootstrap 5 中实现一个简单的带有浮动标签的表单。你可以根据需要进行调整和扩展，以满足项目的具体要求。