在前端开发中，bootstrap 和 jQuery 可谓是必不可少的工具，它们为我们提供了诸多优秀的 UI、交互效果等等。而 bootstrap-jquery 这个 npm 包则把这两个工具结合了起来，为我们提供了更加便捷的开发方式。本文将介绍如何使用 bootstrap-jquery 这个 npm 包，并提供详细的学习和指导意义。
安装 bootstrap-jquery
在使用 bootstrap-jquery 这个 npm 包之前，我们需要先用 npm 安装它。
npm install bootstrap-jquery
引入 bootstrap-jquery
安装好之后，我们需要在我们的 HTML 文件中引入 bootstrap-jquery。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------- ------ ----------------
----- ---------------- ---------------------------------------------------------
-------
------
---- ---- ---- ---- ---- ---- ---
------- ------------------------------------------------------
------- --------------------------------------------------------------------------
-------
-------首先，我们引入了 bootstrap 的 CSS 文件。注意，我们直接引入的是 node_modules/bootstrap/dist/css/bootstrap.min.css，而不是 node_modules/bootstrap-jquery/dist/css/bootstrap.min.css，这是因为 bootstrap-jquery 会自动使用 bootstrap 的 CSS 文件，我们不需要再额外引入。
接下来，在 body 结束标签前引入了 jQuery 和 bootstrap-jquery 的 JS 文件。同样的，我们只需要引入 bootstrap-jquery 的 JS 文件，就可以自动引入 jQuery，因此不需要再额外引入 jQuery。
使用 bootstrap-jquery
使用 bootstrap-jquery 的方式与使用纯 jQuery 的方式类似，只需要在 JavaScript 代码中引用 $，然后调用对应的方法即可。
Alert
Alert 可以用来在页面中显示一条消息，比如提示用户操作结果、警告等等。Bootstrap 为我们提供了美观的 Alert 样式，并结合 jQuery，还可以实现关闭按钮等等功能。
-- -------------------- ---- -------
---- ------------ ---------- ----------------- ---- ----- -------------
----------------------- ---- -- - ---------------- ------
------- ------------- ----------------- ----------------------- ----------------------------
------
------- ---------- ----------- ----- ------------------ --------------
--------
---------------------------- -
------------------------------- -
--------------------------
---
---
---------上面代码中，我们首先在 HTML 中定义了一个 Alert，其中 alert-dismissible 和 fade 等类可以让 Alert 拥有关闭按钮和淡入淡出效果。Alert 还有不同类型的样式，比如 alert-info 表示信息提示，alert-danger 表示警告，等等。更多关于 Alert 的用法可以参考 Bootstrap 官方文档。
接下来，在 JavaScript 中，我们首先等待页面加载完成，然后添加一个按钮的点击事件，每次点击按钮，就调用 $('.alert').alert('show') 方法，将 Alert 显示出来。
Modal
Modal 是一种弹窗效果，可以用于显示一些重要的信息、操作、表单等等。Bootstrap 为我们提供了强大的 Modal 组件，并结合了 jQuery 来实现弹出、关闭等功能。
-- -------------------- ---- -------
------- ---------- ----------- ----- ------------------ --------------
---- ------------ ----- ------------ ------------- ------------------------------ -------------------
---- ---------------------
---- ----------------------
---- ---------------------
--- ------------------- ----------------------- ----------
------- ------------- ----------------- ----------------------- ----------------------------
------
---- -------------------
---- -- - ---------------- ------
------
---- ---------------------
------- ------------- ---------- -------------- --------------------------------------
------- ------------- ---------- ----------------- ----------------
------
------
------
------
--------
---------------------------- -
------------------------------- -
----------------------------
---
---
---------上面代码中，我们首先添加了一个按钮，用于触发 Modal 的弹出操作。注意，我们并没有在 HTML 中定义任何 Modal 相关的内容，而是在 JavaScript 中动态添加的。
接下来，我们在 HTML 中定义了一个 Modal，其中 modal-dialog、modal-content、modal-header、modal-body、modal-footer 等类可以把 Modal 分成不同的部分，而 data-bs-dismiss="modal" 可以让按钮实现关闭 Modal 的效果。
最后，在 JavaScript 中，我们依然等待页面加载完成，然后添加一个按钮的点击事件，每次点击按钮，就调用 $('#myModal').modal('show') 方法，将 Modal 显示出来。
总结
本文介绍了如何使用 bootstrap-jquery 这个 npm 包，并演示了如何使用 Alert 和 Modal 这两个组件。bootstrap-jquery 能够帮助我们更加便捷地使用 bootstrap 和 jQuery，提高开发效率。如果您想了解更多关于 bootstrap-jquery 的内容，可以参考官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c81ccdc64669dde4ce3