前言
Bootstrap 是一款流行的前端框架，其通过提供一系列开箱即用的 UI 组件、丰富的样式库及响应式布局等等优点，已经被广泛应用在各种 web 应用中。而在使用 Bootstrap 时候，通过 NPM 安装方式使用其最新版是最为推荐的。
不过在一些老旧项目中，因为种种原因，我们需要使用 Bootstrap2 。而在此方面，可以使用一个 npm 包叫做 bootstrap2-umd。下文将详细介绍这个 npm 包的使用教程，包括如何安装、如何使用、需要注意的问题以及示例代码等等。
安装
要使用 bootstrap2-umd，你需要在本地安装 Node.js（至少需要 v8.0.0）。安装完成后，通过 npm 进行全局安装。
$ npm install -g bootstrap2-umd
全局安装完毕后，你可以通过命令行来检查 bootstrap2-umd 是否成功安装。在终端中输入：
$ bootstrap2-umd -v
如果成功输出 bootstrap2-umd 当前版本号，则说明你已成功安装了此包。
使用
要使用 bootstrap2-umd，你需要在 HTML 中将其引入，同时还需要引入 jQuery。一般而言，应该在代码中使用 script 标签来引入这些必要的依赖：
<!-- 引入 jQuery --> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <!-- 引入 bootstrap2-umd --> <script src="//cdn.bootcss.com/bootstrap2-umd/2.3.2/bs2-umd.min.js"></script> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap2-css/2.3.2/bootstrap.min.css"> <!-- 引入自定义的样式文件 --> <link rel="stylesheet" href="custom.css">
当然，你也可以通过 ES6 的方式来进行加载：
import $ from 'jquery'; import 'bootstrap2-umd'; import 'bootstrap2-css/bootstrap.min.css'; import './custom.css';
问题和解决
js/css 文件引入顺序问题
使用 bootstrap2-umd 时，缺乏必要的 js/css 文件引入顺序也是常见的错误。
确保在 HTML 中先引入 jQuery，然后是 bs2-umd.min.js，而其余样式 css 文件应该在其之后。如果使用了自定义的样式文件，应该在最后进行引入。
IE8 兼容
Bootstrap2 对 IE8 的支持是以 UMD (Universal Module Definition) 模块为基础的，在非浏览器环境下诸如 Node.js 中运行时，也是能够正常使用的。
示例代码
以下是一个简单的示例代码，使用 Bootstrap2 的导航菜单功能，同时通过 jQuery 实现鼠标的 hover 效果：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------------- ------------
----- ---------------- ----------------------------------------------------------------
------- ------------------------------------------------------
------- ---------------------------------------------------------------------
-------
--------------- -------------- -
-------- ------
-
--------
-------
------
---- ---------------
---- ---------------------
---- ------------------
--- ------------
------ ----------------------
------ -----------------------
--- -----------------
-- -------- ----------------------- ------------------------------- -- ----------------------
--- ----------------------
------ ------------------------
------ ---------------- ---------------
--- ---------------------
------ ------------------ ---- -------------
-----
-----
-----
------
------
------
-------
-------总结
bootstrap2-umd 是 Bootstrap2 的一个 npm 包，为一些老旧项目提供了方便的使用方式。通过本文介绍的安装及使用方式，你可以简单地将其应用到你的项目中。同时，我们也介绍了在使用中常见的问题，希望你在使用时能够把这些问题避免掉。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c83ccdc64669dde4dec