javascript插件
javascript插件：
一次性导入：
Bootstrap提供了一个单一的文件，这个文件包含了Bootstrap的所有JavaScript插件，即bootstrap.js（压缩版本：bootstrap.min.js）。
具体使用如下（或见右侧代码编辑器28-29行）：
<!—导入jQuery版本库，因为Bootstrap的JavaScript插件依赖于jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!—- 一次性导入所有Bootstrap的JavaScript插件（压缩版本） -->
<script src="js/bootstrap.min.js"></script>
单独导入：
动画过渡（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”
1）模拟弹窗
一般包括几个容器一层套一层
model >model-dialog>model-content>model-header = model-body = model-footer
法一：
模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和data-target（bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle="" 或者 data-dismiss=“”）。
注解：data-toggel是触发器，data-target:实跳转到某个东西，data-dismiss是该容器消失
例如：
<!-- 触发模态弹出窗的元素 -->
<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">点击我会弹出模态弹出窗</button>
<!-- 模态弹出窗 -->
<div class="modal fade" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态弹出窗内容 -->
</div>
</div>
</div>
注意：“data－toggle”必须设置为model
“data－target”一般设置为id，因为id是唯一的
法二：
可以使用a标签自带的href代替“data－target”
<!-- 触发模态弹出窗的元素 -->
<a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >点击我会弹出模态弹出窗</a>
<!-- 模态弹出窗 -->
<div class="modal fade" id="mymodal" >
<div class="modal-dialog" >
<div class="modal-content" >
<!-- 模态弹出窗内容 -->
</div>
</div>
</div>
2）为弹框增加过渡效果
给model增加类名fade
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">
小的模态弹出窗
</button><div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<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>
</div>
</div>
3）data参数说明
4）参数设置
用法：$('#myModal').on('hidden.bs.modal', function (e) {
// 处理代码...
})