雖然是基於不純的目的來學習它，但想必也對大家有所協助。
bootstrap雖然掛著twitter的名字，但實質上只是twitter的兩個員工自己的項目。
bootstrap不是單純一個項目，它的許多組件，包括CSS部分，JS部分，還是最原始的less部分要依賴其他項目才能運作。不過CSS已經有合并版了，JS我們也只需要匯入jQuery。因此想跟著學習的人，到這裡把源碼部分CSS下載回來，jQuery使用1.83就行了。
或者搭建以下這樣的架子：
<!DOCTYPE html><html> <head> <title>bootstrap學習 by 司徒正美</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <script src="http://code.jquery.com/jquery-1.8.3.min.js" > </script> <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"/> <script> </script> </head> <body> </body></html>
本系列只專註於其JS組件部分。我們先看它實現動畫的最核心部分。bootstrap近乎潔癖地只選擇CSS3的transition這實現它的動畫，因此在IE678看不到效果。加之它的CSS部分也不打算寫哈hack，在IE78下顯得非常寒磣。因此大陸前端想使用這架構需要再三斟酌了！
第一篇是解說bootstrap-transition.js這檔案，可以自己到github中下回來看。我這裡文法高亮了，可能在源碼上插入些東西，不能直接拷貝使用。
!function ($) { "use strict"; // ecma262v5引入的strict 模式 $(function () { $.support.transition = (function () { var transitionEnd = (function () { var el = document.createElement('bootstrap')//建立一個自訂標籤做測試 , transEndEventNames = {//用於檢測CSS3 transition結束時的回調名 'WebkitTransition' : 'webkitTransitionEnd' , 'MozTransition' : 'transitionend' , 'OTransition' : 'oTransitionEnd otransitionend'//opera比較噁心，舉棋不定 , 'transition' : 'transitionend' } , name for (name in transEndEventNames){ if (el.style[name] !== undefined) { return transEndEventNames[name] } } }()) return transitionEnd && { end: transitionEnd } })() })}(window.jQuery);
總而言之，這檔案是為bootstrap其他JS組件提供一個通用的特性檢測。由於CSS3的限制，因此它提供的特效也很有限，最常用的就是fade。本文完。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
