JavaScript插件的概述
引用JavaScript插件后可以套用通用的HTML格式就能实现酷炫的交互特效
JavaScript插件是依托在jQuery10+的基础上,所以要使用它前提是必须先引入jQuery库
JavaScript插件总共有12种，过渡效果、模态框、下拉菜单、滚动监听、轮播图、按钮等
JavaScript插件的引入方式
一次性全部引入（使用 bootstrap.js 或压缩版的 bootstrap.min.js）
JavaScript 插件可以单个引入
data属性
data属性API是Bootstrap中的一等API，你可以仅仅通过data属性API就能使用所有的Bootstrap插件，无需写一行Javascript代码。这是首选的使用方式
关闭 data 属性 API 的方法
$(document).off('.data-api')
动画过渡效果
可以单独引入transition.js
过渡效果全部使用了css3语法，IE6-IE8不支持动画过渡效果
组件使用动画过渡效果
模态框（Modal）的滑动和渐变效果
选项卡（Tab）的渐变效果
警告框（Alert）的渐变效果
旋转轮播（Carousel）的滑动效果
9.4.1.模态框插件制作弹出的对话框
模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集。
用法
通过 data 属性或 JavaScript 调用模态框插件，可以根据需要动态展示隐藏的内容。模态框弹出时还会为 <body> 元素添加 .modal-open 类，从而覆盖页面默认的滚动行为，并且还会自动生成一个 .modal-backdrop 元素用于提供一个可点击的区域，点击此区域就即可关闭模态框。
通过 data 属性
不需写 JavaScript 代码也可激活模态框。通过在一个起控制器作用的元素（例如：按钮）上添加 data-toggle="modal" 属性，或者 data-target="#foo" 属性，再或者 href="#foo" 属性，用于指向被控制的模态框。
9.4.2.选项卡插件制作页面的选项卡
选项卡（Tab）组件
它是Bootstrap提供的一种非常常用的功能和平时使用的Windows操作系统里的选项卡设置一样，单击一个选项，下面就显示对应的选项卡面板
选项卡有两部分组成，CSS选项卡组件+底部可以切换的选项卡面板
选项卡导航和选项卡面板要同时有
导航链接里要设置data-toggle="tab"，并且还要设置data-target或是href="选择符"，以便单击的时候能找到该选择符所对应的tab-pane面板
tab-pane要放在tab-content里面，要有id且值必须和data-target的值或href的值相同
9.4.3.轮播图插件制作页面的轮播图
旋转轮播（Carousel）
又叫做轮播图或焦点图
其主要显示效果就像各大网站的多幅滚动的广告一样，比如京东首页的大图片
默认情况下是循环向左轮播，如果单击某个小圆点时，会直接显示单击的那张图
轮播图是Bootstrap插件中声明用法相对复杂的一个，所以先理解它的HTML结构
9.4.4.滚动监听插件给网页元素添加监听
滚动监听(ScrollSpy)插件是根据滚动的位置自动更新导航条中相应的导航项
滚动监听两种用法
对一个固定高度的元素进行滚动监听，然后对相应的菜单进行高亮显示
对整个页面（body）进行滚动监听