学习bootstrap插件的时候，很多时候要看着版本2里面的介绍，不然多多少少的会懵逼一两次
Bootstrap-JS插件
bootstrap.js提供了各种各样的JS特效。如果只想要其中的某种特效，只要引种其中某一个单独的文件即可
一、模态框 modal.js
1.静态
结构为：(modal) > (modal-dialog) > (modal-content )> (modal-header + modal-body + modal-footer)
<div class="modal show" tabindex="-1" >
<div class="modal-dialog" >
<div class="modal-content">
<!-- content可忽略 -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<h4>标题</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 -->
2.动态
在我们之前的静态基础上加上一个激活按钮即可,静态的ID要和按钮的data-target绑定
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
激活按钮
</button>
3.尺寸
我们modal元素的下一层元素 modal-dialog就起到了控制尺寸大小的作用，在此基础上，还有两个状态，更大和更小
<div class="modal fade" tabindex="-1" >
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" >
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
4.禁止动画效果
只要在modal标签元素中，去掉 fade 类即可
5.通过JS调用
modal元素添加属性tabindex="-1"
| 参数 | 类型 | 默认值 | 功能 |
|---|---|---|---|
| keyboard | boolean | true | 键盘上的 esc 键被按下时关闭模态框。 |
| show | boolean | false | 模态框初始化之后就立即显示出来 |
$('#myModal').modal(参数)
二、下拉菜单 dropdown.js
见css组件-下拉菜单部分
三、滚动监听 scrollspy.js
只需将data-spy="scroll"添加到被监听的页面元素上（大部分情况是添加到body上），再用data-target=".navbar"将导航绑定。
<body data-spy="scroll" data-target=".navbar">...</body>
<div class="navbar navbar-default">...</div>
必须为导航条中的链接指定相应的目标id。
<body>
...
<div id="home">home</div>
...
</body>
<div class="navbar navbar-default">
<ul class="nav navbar-nav">
<li><a href="#home">home</a></li>
...
</ul>
</div>
四、标签页（选项卡）tab.js
1.html结构
要在a标签中的href属性或者data-target中指定目标内容
<ul class="nav nav-tabs">
<li class="active"><a href="#home">主页</a></li>
...
<li><a href="#" data-target="#news">新闻</a></li>
</ul>
在目标内容中写入相应的ID名
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
...
<div class="tab-pane" id="news">...</div>
</div>
2.属性调用
在a标签中将data-toggle属性设置为：tab或者pill指定相应内容
<ul class="nav nav-tabs">
<li><a href="#home" data-toggle="tab">首页</a></li>
...
<li><a href="#news" data-toggle="tab">新闻</a></li>
</ul>
3.JavaScript调用
通过JavaScript启动标签页（每个标签都需要被单独激活），需要给导航添加一个ID值
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
五、工具提示 tooltip.js
1.html结构
a标签或者按钮标签,为data-toggle属性添加属性值tooltip
<a href="#" data-toggle="tooltip" title="水果之王">苹果</a>
2.激活
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
3.方向
为data-placement属性添加left、right、top、bottom方向属性值
<a href="#" data-toggle="tooltip" data-placement="right" title="水果之王">苹果</a>
六、弹出框 popover.js
1.基础代码
title属性添加标题，data-content属性添加文本内容，data-toggle绑定弹出框
<button type="button" class="btn btn-lg btn-danger"
title="我想吃水果" data-toggle="popover"
data-content="可是冰箱里空空如也，明天中午就去买">
点我弹出/隐藏弹出框
</button>
2.激活
$(function () {
$('[data-toggle="popover"]').popover()
})
3.方向
用法和工具提示一样：data-placement="left/right/top/bottom"
4.可消失的弹出框
为了更好的跨浏览器和跨平台效果，你必须使用 a 标签，不能使用 button 标签，并且，还必须包含 data-trigger="focus" 和 tabindex 属性。
<a tabindex="0" class="btn btn-lg btn-danger" data-toggle="popover"
data-trigger="focus" title="标题" data-content="这是一大堆的内容">
可消失的弹出框
</a>
七、折叠 collapse.js
data-toggle绑定collapse,如果是button则用data-target连接内容ID
<button class="btn btn-success" data-toggle="collapse" data-target="#MyCont">按钮</button>
<a class="btn btn-primary" data-toggle="collapse" href="#Mycont" >按钮</a>
内容类名为.collapse，ID值要和按钮响应。.well标签包裹着弹出的内容
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
八、轮播图 carousel.js
使用data属性可以很容易的控制轮播的位置。data-slide内可以包含prev 或 next，他们可以改变当前帧。另外，使用data-slide-to可以传递某个帧的下标，例如data-slide-to="2"，这样就可以直接跳转到这个指定的帧 -- 下标从0开始计算
<div id="myCarousel" class="carousel slide">
<!-- 指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 内容 -->
<div class="carousel-inner">
<div class="active item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<!-- 导航 -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
