bootstrap导入JavaScript插件
导入JavaScript插件
Bootstrap除了包含丰富的Web组件之外，如前面介绍的下拉菜单、按钮组、导航、分页等。他还包括一些JavaScript的插件。
Bootstrap的JavaScript插件可以单独导入到页面中，也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库，所以不论是单独导入还一次性导入之前必须先导入jQuery库。
一次性导入：
Bootstrap提供了一个单一的文件，这个文件包含了Bootstrap的所有JavaScript插件，即bootstrap.js（压缩版本：bootstrap.min.js）。
具体使用如下（或见右侧代码编辑器28-29行）：
<!—导入jQuery版本库，因为Bootstrap的JavaScript插件依赖于jQuery-->
<scriptsrc="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!—-一次性导入所有Bootstrap的JavaScript插件（压缩版本）-->
<scriptsrc="js/bootstrap.min.js"></script>
特别声明：jQuery版本库也可以加载你本地的jQuery版本。
单独导入：
为方便单独导入特效文件，BootstrapV3.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”
上述单独插件的下载可到github去下载（https://github.com/twbs/bootstrap）。
动画过渡（Transitions）
这一小节我们先来讲“动画过渡（Transitions）”这个插件的使用，源文件：transition.js
Bootstrap框架默认给各个组件提供了基本动画的过渡效果，如果要使用，有两种方法：
☑调用统一编译的bootstrap.js；
☑调用单一的过渡动画的JavaScript插件文件transition.js（右侧第29行引入Bootstrap上对外公布的transition.js的地址）。
transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过渡效果。不过需要注意的是，这些过渡动画都是采用CSS3来实现的，所以IE6-8浏览器是不具备这些过渡动画效果。
默认情况之下，Bootstrap框架中以下组件使用了过渡动画效果：
☑模态弹出窗（Modal）的滑动和渐变效果；
☑选项卡（Tab）的渐变效果；
☑警告框（Alert）的渐变效果；
☑图片轮播（Carousel）的滑动效果。
“模态弹出窗（Modal）的滑动和渐变效果”源代码例子。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>导入JavaScript插件</title>
<linkrel="stylesheet"href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<buttonclass="btnbtn-primary"type="button">点击我</button>
<divclass="modalfade"id="mymodal">
<divclass="modal-dialog">
<divclass="modal-content">
<divclass="modal-header">
<buttontype="button"class="close"data-dismiss="modal"><spanaria-hidden="true">×</span><spanclass="sr-only">Close</span></button>
<h4class="modal-title">模态弹出窗标题</h4>
</div>
<divclass="modal-body">
<p>模态弹出窗主体内容</p>
</div>
<divclass="modal-footer">
<buttontype="button"class="btnbtn-default"data-dismiss="modal">关闭</button>
<buttontype="button"class="btnbtn-primary">保存</button>
</div>
</div><!--/.modal-content-->
</div><!--/.modal-dialog-->
</div><!--/.modal-->
<scriptsrc="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<scriptsrc="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script>
<scriptsrc="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script>
<script>
$(function(){
$(".btn").click(function(){
$("#mymodal").modal("toggle");
});
});
</script>
</body>