動畫過渡（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>
</html> ![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)