- Bootstrap框架重要特性
一套完整的基礎CSS插件。
豐富的預定義樣式表琉雳。
一組基于jQuery的JS插件集。
一個非常靈活的響應式（Responsive）柵格系統(tǒng)，并且崇尚移動先行（Mobile First）的思想图呢。
- Bootstrap下載地址
Bootstrap框架的文件和源碼可以在其官方網(wǎng)站（www.getbootstrap.com）下載。打開網(wǎng)站的首頁，單擊Download Bootstrap按鈕蛤织，跳轉到下載頁面赴叹。
3. HTML標準模板
HTML標準模板如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap基礎模板</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https:// code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
官方網(wǎng)站還提供了各種布局的基本模板供大家使用，大家可以到如下地址進行訪問查看：http://getbootstrap.com/getting-started/
- CSS基本語法
Bootstrap的CSS組件的核心就是選擇器的定義以及在各自優(yōu)先級上的處理指蚜。
4.1 優(yōu)先級
如何確定CSS的優(yōu)先級乞巧？這里我們要先引入一個機制，分別用4個數(shù)字（a摊鸡，b绽媒，c，d）表示優(yōu)先級組合免猾，比如1是辕，1，1掸刊，1和0，1赢乓，0忧侧，1。它們的意思分別是：
第一個數(shù)字（a）表示style屬性牌芋，優(yōu)先級最高蚓炬。由于一般都是class樣式，所以該值一般都是0躺屁。
第二個數(shù)字（b）是該CSS選擇器上的id數(shù)量的總和肯夏，一般都是1個。
第三個數(shù)字（c）是用在該CSS選擇器上的其他屬性CSS選擇器以及偽類的總和犀暑。這里包括class（.btn）和屬性CSS選擇器（比如li[id=red]）驯击。
第四個數(shù)字（d）計算元素（就像table、p耐亏、div等）和偽元素（就像first-child等）徊都。
通用CSS選擇器（*）是0優(yōu)先級。
如果兩個CSS選擇器有同樣的優(yōu)先級广辰，在樣式表中后面的那個起作用暇矫。
計算下面兩個選擇器的優(yōu)先級：
leftbar li#first { color: red; } #leftbar li:first-child{ color: blue; }
結果肯定是第1個比第2個優(yōu)先級高，因為第1個的優(yōu)先級是0择吊，2李根，0，1几睛，而第2個是0房轿，1，0，2冀续。
4.2 選擇器
每一條CSS樣式的定義都由兩部分組成琼讽，形式如下：選擇器{樣式}。在{}之前的部分就是“選擇器”钻蹬。“選擇器”指明了應用這些“樣式”的網(wǎng)頁元素凭需。
1.屬性選擇器
Bootstrap的CSS組件里使用了很多屬性選擇器，比如[data-toggle^=button]粒蜈、[data-toggle=toggle]等。屬性選擇器有多種用法
2.子選擇器
CSS里的子元素用符號“>”表示枯怖。如下示例是表示擁有table樣式的表格，其thead元素內(nèi)的tr元素如果有th的話度硝，則應用該樣式。
.table > thead > tr > th { vertical-align: bottom; border-bottom: 2px solid #dddddd; }
3.兄弟選擇器
兄弟元素分為兩種蕊程，一種是臨近兄弟，一種是普通兄弟藻茂。臨近兄弟的選擇符用“+”表示。比如導航條里要設置兩個li之間的外邊距辨赐，則需要如下定義：
.nav-pills > li + li { margin-left: 2px; /* 加大左外邊距 / }
如果只想查找某一個指定元素后面的兄弟節(jié)點（而不限制于臨近節(jié)點），可以使用普通兄弟節(jié)點的符號“～”掀序。比如：
.article h1 ~ p { font-size: 13px; }
4.3 偽類
CSS3提供了非常多的可用偽類，但是Bootstrap只用了常用的幾個森枪，這里我們只簡單列一下常用的偽類和其對應的意思视搏，具體如表1-5所示。
舉個例子县袱，按鈕組里浑娜，除第一個按鈕、最后一個按鈕和帶有dropdown-toggle樣式的元素外式散，其他btn樣式的按鈕都不能設置圓角筋遭。我們應該這么定義：
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0; }
4.4 display屬性
這個屬性用于定義建立布局時元素生成的框的類型。對于HTML等文檔類型，如果使用display時不謹慎會很危險漓滔，因為可能違反HTML中已經(jīng)定義的顯示層次結構编饺。表1-6是display支持的常見屬性值和意義。
4.5 媒體查詢
媒體查詢是進行響應式設計的核心要素响驴，其功能非常強大透且。這里我們只列出Bootstrap用到的功能，具體可以訪問http://www.w3.org/TR/css3-mediaqueries/進行查看豁鲤。
Bootstrap主要用到min-width秽誊、max-width，以及and語法琳骡，用于在不同的分辨率下設置不同的CSS樣式锅论。
@media (max-width: 767px) { /在小于768像素的屏幕里,這里的樣式才生效/ } @media (min-width: 768px) and (max-width: 991px) { /在768和991像素之間的屏幕里,這里的樣式才生效/ } @media (min-width: 992px) and (max-width: 1199px) { /在992和1199像素之間的屏幕里,這里的樣式才生效/ } @media (min-width: 1200px) { /在大于1200像素的屏幕里,這里的樣式才生效/ }
5.JavaScript基本語法
主要介紹JavaScript的基本用法。理解這些用法以后楣号，就可以按照Bootstrap的開發(fā)規(guī)范去開發(fā)自己的各種插件了最易。
5.1 ||和&&運算符
Java Script中的||和&&兩個運算符，與其他語言相比略有不同炫狱，其符合如下規(guī)則：
?||表示藻懒，如果第一個元素可以轉換為true，則返回第一個元素的值毕荐，否則查詢第二個元素的值束析。如果多個||一起用艳馒，則按順序優(yōu)先級判斷憎亚。
?&&則相反，如果第一個元素可以轉換為false弄慰，才返回第一個元素的值第美，否則返回第二個元素的值，多個&&一起用時陆爽，也是按順序優(yōu)先級判斷什往。
說得嚴謹一些就是：
?a && b&& c&&d：返回第一個可轉換為false的元素值。
?a||b||c||d：返回第一個可轉換為true的元素值慌闭。
上述運算符的轉換規(guī)則如下：
?對象為true
?非零數(shù)字為true
?非空字符串為true
?其他為false
5.2 立即調(diào)用的函數(shù)表達式
在JS里别威，function在定義的時候就可以通過在后面加一個小括號的形式立即進行調(diào)用。比如：
(function () { / code / } ()); // 推薦使用這個
(function () { / code / })(); // 這個也是可以用的
(function () { / code / } (1)); // 傳入?yún)?shù)1
(function () { / code / })(2); // 傳入?yún)?shù)2
Bootstrap的所有的JS插件都使用了這個模式驴剔。比如在alert.js文件里有以下代碼：
+function ($) { "use strict"; }(jQuery);
這個文件的意思是聲明一個function，然后立即執(zhí)行丧失，并且在執(zhí)行的時候傳入jQuery對象作為參數(shù)。這么做的好處是训堆，此時function內(nèi)部的$已經(jīng)是局部變量了坑鱼，不會再受外部作用域的影響了权薯。
function前面的+號和分號的功能是一樣的盟蚣，主要是防止定義了不符合規(guī)定的代碼。比如上面的這段代碼若沒加+號阐枣，則代碼連接在一起執(zhí)行就會出錯奄抽。這樣就消除了出錯的可能性逞度。不習慣的話，改成這樣也行：
;function ($) { "use strict"; }(jQuery);
5.3 原型
在Bootstrap的JS插件里俊戳，所有的插件都是利用了類似下面的代碼：
Alert.prototype.close = function (e) { /...*/ }
上面的代碼就是在Alert函數(shù)上定義一個名為close的原型方法馆匿。至于什么叫原型渐北，原型有什么好處，這里我們不會深入講解恃锉，只是舉一個例子呕臂，簡單理解一下就好诵闭。
var Calculator = function () {}; Calculator.prototype.add = function (a, b) { return a + b; } var cal = new Calculator(); var sum = cal.add(1, 2);
由于這些內(nèi)容不是本書的重點，所以這里只需要知道Calculator的實例能調(diào)用原型上的add方法就可以了（就像Java和C#里定義的普通方法一樣）瘟芝。
6. jQuery基本用法
本小節(jié)主要是介紹與jQuery相關的用法，讀者在深入了解這些特性以后晤郑，就可以按照Bootstrap的開發(fā)規(guī)范去開發(fā)自己的各種插件了造寝，而不需要精通jQuery的全部用法诫龙。
在學習jQuery相關的用法之前，首先要確保所有的CSS選擇器都能在jQuery里使用签赃，比如$('[data-toggle^=button]')锦聊。如果遇到任何不明白的選擇器孔庭，請查詢CSS相關的語法材蛛。
6.1 事件綁定
jQuery的on和off分別用于綁定和禁用事件。例如：
$('td').on("click", function (event) { // 綁定abc元素上的click事件,單擊時彈出提示 alert(1); }); $('td).off('click'); // 禁用abc元素上的click事件
但是對于Bootstrap框架构资，它對jQuery的on和off的使用稍有不同。它使用了另外一種語法迹淌，例如：
$(document).on('click.bs.carousel.data-api','td',function (e){}; $(document).off('.carousel.data-api');
上述的on在使用時，中間多了一個參數(shù)耙饰，而且選擇器變成了document苟跪。它的好處是只在document上綁定一個單擊事件，利用冒泡的機制笋额，在單擊的時候檢查是否是td元素兄猩，如果是才處理鉴未。而前面我們把td作為選擇器的時候，一個頁面有多少td元素就會綁定多少個click事件淹真，這樣性能會大大降低连茧。這種3個參數(shù)的模式稱為享元模式梅屉。
6.2 事件命名空間
另外坯汤，還需要注意的是，這里的事件后面都跟了一些字符串惰聂，我們簡單稱它們?yōu)閹в忻臻g的事件搓幌。比如，你聲明如下這樣的代碼：
$('#abc').on("click.tomxu", function (event) { alert(1); });
一般別人觸發(fā)click事件处铛，都是這樣做的：
$('#abc').trigger('click');
執(zhí)行上述代碼撤蟆，在click時家肯，所有綁定的click事件回調(diào)都會被執(zhí)行盟猖。但是如果觸發(fā)的時候，你不想影響其他click觸發(fā)代碼圃泡，這時候就可以只觸發(fā)自己定義的click事件愿险，以求不會對別人綁定的click回調(diào)產(chǎn)生影響辆亏，這時可以這樣做扮叨。
$("#abc").trigger('click.tom.xu');
6.3 $.data()
很多JS插件里都使用了$(selector).data()方法，它的意思是收集指定元素上的所有以data-開頭的自定義屬性碍沐，并合并成為一個對象字面量累提。
對于以data-開頭的自定義屬性斋陪，相信大家都知道它是HTML5新支持的語法无虚。比如：
<div id="abc" data-role="aaa" data-toggle="toggle" data-xxx="tom"></div>
如果要獲取data-role里aaa這個值衍锚，則需要調(diào)用如下代碼：
$("'#abc").data("role");
如果是不帶參數(shù)的$("'#abc").data()戴质；，則表示一次性將所有以data-開頭的參數(shù)都收集起來斗埂，其結果和用如下方式聲明一個value變量是一樣的。
var value = { role: 'aaa', toggle: 'toggle', xxx: 'tom' };
Bootstrap中的很多JS插件都是利用了這個特性男娄，在HTML元素上定義了一些必要的參數(shù)，比如要不要使用動畫建瘫、是否開啟鍵盤事件等啰脚。大家在分析JS插件的option選項參數(shù)時即可看到各個參數(shù)的詳細解釋粒梦。
7. HTML5輔助設計
在Bootstrap組件里匀们，很多示例里都出現(xiàn)了不是以data-開頭的自定義屬性准给，我們稱之為輔助屬性露氮。這些屬性是HTML5新提出的概念畔规，用于支持殘障人士、老年人详民、文化水平不高或暫時患病的人使用屏幕閱讀器進行頁面訪問。這種逐漸增強和易訪問的豐富Internet應用程序簡稱CSS兔综。示例如下：
<div role="navigation " aria-labelledby="myModalLabel" aria-hidden="true"></div>
上述示例中的aria-hidden="true"表示對屏幕閱讀器隱藏該div元素涧窒，我們稱該aria-hidden為CSS狀態(tài)屬性锭亏。
示例中的aria-labelledby="myModalLabel"告訴屏幕閱讀器戴已，這是一個modal，一般用在區(qū)域元素上伐坏，它的值一般和標題或是標簽元素的ID對應桦沉。
假定屏幕閱讀器遇到包含role=navigation的頁面且其上還有一個div元素永部，屏幕閱讀器就會知道該div元素用于導航苔埋，用戶將能直接使用導航功能而非通過所有鏈接選擇標簽蜒犯。role支持的屬性值组橄。
更多關于CSS的詳細內(nèi)容，可以閱讀下面兩篇文章：
