導入JavaScript插件
Bootstrap除了包含豐富的Web組件之外，如前面介紹的下拉菜單、按鈕組、導航、分頁等。他還包括一些JavaScript的插件。
Bootstrap的JavaScript插件可以單獨導入到頁面中，也可以一次性導入到頁面中。因爲在Bootstrap中的JavaScript插件都是依賴於jQuery庫，所以不論是單獨導入還一次性導入之前必須先導入jQuery庫。
一次性導入：
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>
特別聲明：jQuery版本庫也可以加載你本地的jQuery版本。
單獨導入：
爲方便單獨導入特效文件，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”
上述單獨插件的下載可到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）的滑動和漸變效果”源代碼例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>導入JavaScript插件</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-primary" type="button">點擊我</button>
<div class="modal fade" 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>