整理自慕课笔记
Bootstrap V3.2中提供了12种JavaScript插件，他们分别是：
* 动画过渡（Transitions）:对应的插件文件“transition.js”
* 模态弹窗（Modal）:对应的插件文件“modal.js”
* 下拉菜单（Dropdown）：对应的插件文件“dropdown.js”
* 滚动侦测（Scrollspy）：对应的插件文件“scrollspy.js”
* 选项卡（Tab）：对应的插件文件“tab.js”
* 提示框（Tooltips）：对应的插件文件“tooltop.js”
* 弹出框（Popover）：对应的插件文件“popover.js”
* 警告框（Alert）：对应的插件文件“alert.js”
* 按钮（Buttons）：对应的插件文件“button.js”
* 折叠/手风琴（Collapse）：对应的插件文件“collapse.js”
* 图片轮播Carousel：对应的插件文件“carousel.js”
* 自动定位浮标Affix：对应的插件文件“affix.js”
动画过渡（Transitions）
transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过渡效果。不过需要注意的是，这些过渡动画都是采用CSS3来实现的，所以IE6-8浏览器是不具备这些过渡动画效果。
默认情况之下，Bootstrap框架中以下组件使用了过渡动画效果：
* 模态弹出窗（Modal）的滑动和渐变效果；
* 选项卡（Tab）的渐变效果；
* 警告框（Alert）的渐变效果；
* 图片轮播（Carousel）的滑动效果。
模态弹出框（Modals）
使用
<body>
<button class="btn btn-primary" type="button">点击我</button>
<div class="modal" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">模态弹出窗标题</h4>
</div>
<div class="modal-body">
<p>模态弹出窗主体内容</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script>
<script>
$(function(){
$(".btn").click(function(){
$("#mymodal").modal("toggle");
});
});
</script>
</body>结构分析
Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：
* 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮
* 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容
* 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮
模态弹出窗的结构如下:
<div class="modal show">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">模态弹出窗标题</h4>
</div>
<div class="modal-body">
<p>模态弹出窗主体内容</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->实现原理
bootstrap中的“模态弹出框”有以下几个特点：
1、模态弹出窗是固定在浏览器中的。
2、单击右侧全屏按钮，在全屏状态下，模态弹出窗宽度是自适应的，而且modal-dialog水平居中。
3、当浏览器视窗大于768px时，模态弹出窗的宽度为600px。
详见这里: Bootstrap 模态弹出框（Modals）
下拉菜单（Dropdown）
和模态弹出窗一样，Bootstrap框架中的下拉菜单也支持JavaScript方法触发下拉菜单显示。使用JavaScript触发下拉菜单和声明式原理是基本类似的，不同的是使用JavaScript方法可以按照自己的方式省略一些元素或者样式。同样用一个简单的示例来做演示：
<ul class="nav nav-pills">
<li class="dropdown">
<a href="##" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
<li role="presentation"><a href="##">CSS3</a></li>
<li role="presentation"><a href="##">HTML5</a></li>
<li role="presentation"><a href="##">Sass</a></li>
</ul>
</li>
<li class="active"><a href="##">前端论坛</a></li>
<li><a href="##">关于我们</a></li>
</ul>使用JavaScript调用dropdown()方法后，单击激活按钮，会弹出下拉菜单，再次单击的时候会收起下拉菜单。
$(function(){
$(".dropdown-toggle").dropdown();
})滚动监控器
1、当用户鼠标滚动时，滚动条的位置会自动更新导航条中相应的导航项。
2、用户拖动滚动条，当滚动到@mdo时，上面的@mdo导航项就会高亮显示
设计
第一步：导入依赖
使用滚动监控器，首要的条件是在页面中加载对应的插件。在这里你可以加载合并好的bootstrap.js或者其独立的插件文件scrollspy.js。
第二步：设计一个带有下拉菜单的导航条
分别为导航条和下拉菜单项定义一个锚点链接，锚点分别为“#blog”,“html”,“#css”,“#sass”,“#js”,“php”,“#about”。同时为导航条定义一个id值“navbar-menu”（id名称可自由定义），方便滚动监控。
第三步：设计监控对象
这里将监控对象内容都放置在一个div名为scrollspy（这个类名可自由定义）的容器中，其中放了多个子内容框。每个子内容框有一个标题，而且每个标题的ID值与导航菜单项中的锚点链接名相对应，并且注意加入“data-target=”#navbar-menu””属性（这个属性值要与前面的nav标签的id名称保持一致）
第四步：为监控对象定义样式
设置容器scrollspy大小（设置高度目的是为了产生垂直滚动条）。
.scrollspy{
height:500px;
font-size:20px;
overflow:auto;
}声明属性触发滚动监控
为监控对象设置被监控的data属性：data-spy=”scroll”，指定监控的导航条：data-target=”#navbar-menu”。同时定义监控过程中滚动条偏移位置data-offset=”60”。代码如下：
<div class="scrollspy" data-spy="scroll" data-target="#navbar-menu" data-offset="60">
…
</div>现在浏览器中预览，则可以看到当滚动div.scrollspy的滚动条时，导航条会实时监控并更新当前被激活的菜单项. 如果导航里有下拉菜单，并且滚动区域的内容到达下拉菜单子项所对应的区域，除了菜单高亮以外，子菜单的父元素dropdown也会高亮.
在body中加监控
除了这种方法之外，还可以直接在body上进行滚动条监控，此时要将滚动监控器移到body上，而且导航nav一定要在body内部。如下所示：
<body data-spy="scroll" data-target="#navbar-menu">
<div class="navbar navbar-default navbar-fixed-top" id="navbar-menu">
</div>
<h3 id="blog">Blog</h3>
<p>…</p>
</body>注意：导航条必须设置为顶部固定样式（navbar-fixed-top）。
JavaScript方法触发滚动监控器
在Bootstrap框架中，使用JavaScript方法触发滚动监控器相对来说较为简单，只需要指定两个容器的名称即可。比如下面的结构：
<nav id="navbar-menu" class="navbar navbar-default navbar-static" role="navigation">
…
</nav>
<div class="scrollspy" id="scrollspy">
…
</div>JavaScript触发可以这样写：
$(function(){
$("#scrollspy").scrollspy({
target: "#navbar-menu"
});
})Bootstrap的滚动监控还提供了一个方法scrollspy(“refresh”)。当滚动监控所作用的DOM有增加或删除页面元素的操作时，需要调用下面的refresh方法：
$(function(){
$("[data-spy='scroll']").each(function(){
var $spy=$(this).scrollspy("refresh");
})
})需要注意的是，这种refresh方法只对声明式用法有效。另外滚动监控除了options参数“target”之外，还提供了一个offset参数，此参数默认值为10。默认情况下，滚动内容距离滚动容器10px以内的话，就高一片面前显示所对应的菜单项。
选项卡（Tabs）
Bootstrap框架中的选项卡主要有两部分内容组成：
* 选项卡组件（也就是菜单组件），对应的是 Bootstrap的 nav-tabs）
* 底部可以切换的选项卡面板，在 Bootstrap 中通常 tab-pane 来表示
选项卡的结构
一个选项卡主要包括两个部分，其一是菜单项，其二是内容面板。拿下面的示例来做演示。其HTML结构如下：
<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li class="active"><a href="#bulletin" role="tab">公告</a></li>
<li><a href="#rule" role="tab">规则</a></li>
<li><a href="#forum" role="tab">论坛</a></li>
<li><a href="#security" role="tab">安全</a></li>
<li><a href="#welfare" role="tab">公益</a></li>
</ul>
<!-- 选项卡面板 -