导语
在现代 Web 开发中，前端框架和库已经成为了开发者们的必备工具。而 Bootstrap 框架则成为了其中最受欢迎的一种。Jasny Bootstrap 是一个基于 Bootstrap 的第三方扩展库，可以为开发者提供一些额外的功能和组件，例如响应式导航菜单、文件上传控件等等。本文将介绍如何使用 npm 包 jasny-bootstrap 来引入和使用 Jasny Bootstrap，旨在帮助读者更好地理解和使用该库。
安装
首先，我们需要使用 npm 安装这个包。打开命令行工具（Windows 下可使用 PowerShell 或者 Git Bash），输入以下命令：
npm install jasny-bootstrap
如果你使用的是 yarn，则可以使用以下命令来安装：
yarn add jasny-bootstrap
安装完成后，该包将会出现在你的项目依赖中。
引入
接下来，我们需要在 HTML 文件中引入该库，以便在页面中使用相应的组件。通常情况下，你只需要引入 jasny-bootstrap.min.css 和 jasny-bootstrap.min.js 两个文件即可。例如：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------- --------------- ----- ---------------- --------------------------------------- ------- ------ ---- ---- ---- ---- ---- --- ------- ---------------------------------------------- ------- -------
请注意，你需要将 path/to/ 替换为实际文件的路径。
组件
下面介绍一些 Jasny Bootstrap 中较为常用的组件及其使用方法。
响应式导航菜单
Jasny Bootstrap 提供了一个响应式导航菜单组件，可以帮助我们在移动设备上更好地展示网站导航菜单。使用该组件时，我们只需要在 <nav> 元素上加上 navbar-default navbar-toggleable-sm slide-nav 类名即可。例如：
-- -------------------- ---- -------
---- ------------- -------------- -------------------- -----------
---- ------------------------
---- ---- --- ------ ------ ---- ---
---- --------------- -----------------
--- ---------- ------------
---- ---------- ----- ---- ---
-----
------
------
------文件上传控件
Jasny Bootstrap 还提供了一个增强版的文件上传控件，可以支持多文件上传、拖放上传等功能。使用该组件时，我们需要在 <input type="file"> 元素上加上 fileinput 类名，并在 JavaScript 中初始化该组件。例如：
<input type="file" class="fileinput" multiple>
$(function() {
$('.fileinput').fileinput();
});模态框
Jasny Bootstrap 中的模态框与 Bootstrap 原生的模态框略有不同，可以支持在模态框中放置表单、图片等元素。使用该组件时，我们需要在模态框元素上加上 modal 类名，并将其内部结构按照要求进行布局。例如：
-- -------------------- ---- -------
---- ------------ ----- --------------
---- ---------------------
---- ----------------------
---- ---------------------
--- ------------------------- ----------
------- ------------- ------------- -------------------------------------
------
---- -------------------
---- ----- ---- ------- ---- ---
------
---- ---------------------
------- ------------- ---------- ------------ -----------------------------------
------
------
------
-----
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------