在前端开发中，表单是非常常见的组件，而 bootstrap-floating-labels 这个 npm 包可以帮助我们更方便地实现表单输入框的浮动标签效果，提高用户体验。
安装
在项目中使用 npm 包安装 bootstrap-floating-labels，可以通过以下命令来完成：
npm install bootstrap-floating-labels --save
使用
- 在 HTML 文件中引入样式和 JS 文件：
-- -------------------- ---- ------- ------ ----- ---------------- -------------------------------- -- ----- ---------------- ------------------------------------------------ -- ------- ------ ------- ------------------------------------- ------- ---------------------------------------- ------- --------------------------------------------------- ------- -------------------------------------------------------- -------
- 在需要使用浮动标签效果的表单输入框中添加
floating-labels类：
<div class="form-floating"> <input type="email" class="form-control floating-labels" id="inputEmail" placeholder="Email"> <label for="inputEmail">Email address</label> </div>
- 初始化浮动标签效果：
$('input.floating-labels').floatinglabel();示例代码
-- -------------------- ---- -------
--------- -----
------
------
-------------------------------- ------------
----- ---------------- ------------------------------------------------------------------------------ --
----- ---------------- ---------------------------------------------------------------------------------------------------- --
-------
------
---- ------------------
----------------------------- ---------
------
---- ----------------- -----------------
------ ----------- -------------------- -------------- -------------------
------ ----------------------------
------
---- ----------------- -----------------
------ ------------ -------------------- --------------- --------------------
------ ------------------------------
------
---- ----------------- -----------------
--------- -------------------- ----------------- ---------------------------------
------ ----------------------------------
------
------- ------------- ---------- ----------------------------
-------
------
------- ----------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------------------------
--------
-------------------------------------------
----------------------------------------------
---------
-------
-------深入理解
通过查看 bootstrap-floating-labels 的源码，可以深入理解它是如何实现浮动标签效果的。
在输入框得到焦点时，会给它的父元素 div 添加 is-focused 类；在输入框的值不为空时，会给父元素 div 添加 has-value 类。然后通过 CSS 来控制标签的位置和样式。
.form-group.is-focused label, .form-group.has-value label {
transform: translateY(-1.5rem) scale(0.8);
}而 floatinglabel 方法则是在所有有 floating-labels 类的输入框上 bind 了 focusin、focusout 和 input 三个事件，控制样式变化。
指导意义
使用 bootstrap-floating-labels 可以提高表单输入框的可用性和用户体验，更好地引导用户输入。在实际项目中，可以直接应用该 npm 包，也可以根据源码实现类似的效果，可以学到大量的 CSS、JS 技巧。
同时，需要注意浮动标签效果可能影响到输入框的布局和样式，需要做好兼容性和调试工作，确保在各种设备和浏览器下都能正常运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672e30520b171f02e1da7