雖然是基於不純的目的來學習它,但想必也對大家有所幫助。
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引入的嚴格模式
$(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。本文完。
