本篇約定Bootstrap簡寫為BT
BT的受歡迎程度是大家有目共睹的，用它可以快速的搭建出網站。很早就接觸過這個框架，其中的柵格系統，css模塊化以及js插件做的相當不錯，由於工作中較少使用也一直沒有好好梳理下，這篇文章就來好好分析一下這個系統。
BT雖然很好，但也不是沒有缺點，由於框架很多都是模塊化的，只能這么用，當您的網站比較多樣化，界面復雜的話就不太適合使用，此時您需要大量重寫代碼，維護比較麻煩，此外這個系統的CSS內容也比較多，很多內容是根本用不到的，對於帶寬不是很理想的情況下就會造成浪費，當然BT的css模塊化還是相當不錯的。下面總結幾點本人覺得非常不錯的點。
柵格系統（結構）
BT的優勢之一就是可以根據用戶屏幕尺寸調整頁面，使其在各個尺寸上都表現良好。實現這個功能依賴兩個東西，一個是view，另一個是max-width，min-width。
BT柵格系統的本質就是通過CSS3的媒體查詢實現的，如果您熟練使用max-width等媒體查詢屬性的話就可以拋開BT，定制屬於自己的響應式網站。BT將屏幕尺寸分為四類，超小屏幕<768px，小屏幕 平板>=768px，中等屏幕 桌面顯示器>=992px以及大屏幕 大桌面顯示器>=1200px。每一列又被平均分成了12格，每一個8.33333333%，12格就無限接近於100%。
這里要特別提一下的就是BT的盒模型，BT強制把所有元素的盒模型都設置成了border-box，這是IE首創的，用於混雜模式下顯示網頁，但W3C認為這個屬性是個逗逼一直沒采用，但最后發現自己才是逗逼，因此在CSS3中新增了這個屬性。border-box盒模型的尺寸包含了padding+border+content ，content-box盒模型的尺寸僅僅包含content部分，設置padding，border還的重新計算包含塊尺寸，使用上要比border-box麻煩的多。
類前綴使用是掌握柵格系統最重要的部分，類前綴分四個超小屏幕.col-xs-*，小屏幕 平板.col-sm-*，中等屏幕 桌面顯示器>.col-md-*以及大屏幕 大桌面顯示器.col-lg-*，以下代碼即可實現不同屏幕呈現不同的顯示方式：
<div class="row">
<div class="col-xs-12 col-md-6"></div>
<div class="col-xs-12 col-md-6"></div>
</div>
這段代碼的意思是，在超小屏幕下分兩行顯示，桌面顯示器則並行顯示。更詳細的應用大家可以參考BT的官方文檔，這里就不再贅述。
CSS模塊化（表現）
BT預先定義了很多CSS類，使用的時候直接給class賦予對應的類名即可，如text-left，text-align，.table等。最有代表性的就是btn類，BT定義了一個.bt的基礎類，如果還想要其他樣式可以在這個基礎類上進行擴展，實現不同的視覺效果。
.btn類之所以典型在於他的樣式定義，CSS大牛和菜鳥的區別表現在三個方面，文件大小，后期維護以及hack，大牛的CSS文件都比較小（具體多少為小要看項目的大小）；后期維護容易，能快速定位，修改一個樣式需要動的地方比較少；hack使用也少。相反菜牛則會出一個龐大的文件，后期維護一團亂麻，改一個樣式需要改很多地方，hack，內聯，important滿天飛。
CSS很多值都是有相互依賴關系的，比如em，我們都知道em是相對單位，瀏覽器渲染的時候是必須明確到具體值的，因此必須進行計算。正因為這些相對單位我們才可以實現模塊化，.btn類就是利用相對單位和字體大小之間的關系實現的，將按鈕的line-height，padding，border-radius設置為相對單位，字體大小設置為絕對單位，需要大按鈕的時候增加字體，需要小按鈕的時候減小字體，案例代碼如下：
.btn{ display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle;}
這里的line-height會根據font-size計算出相應的值，修改font-size按鈕就會相應的變大變小，一個小小的改動就實現了視覺上的變化是不是很方便
BT的CSS系統令人稱道的地方還有很多，想CSS更進一步的話可以研究下他的思路，您也可以單獨提取出來放到自己樣式庫中，以后做項目的時候可以快速使用。
JavaScript插件（交互）
BT的JavaScript插件非常豐富，既可以用現成的也可以自己擴充，BT提供了一個集成板的BT.js您可以直接拿過來使用也可以單個使用引入*.js即可。
JS插件優秀的地方在於，哪怕是不懂JS的開發人員也可以使用，只要按照官方文檔提供的格式寫即可，比如模態框，您只要按要求設置好class，data-toggle，data-target即可，一句JS都不用寫，是不是很方便。
BT的插件開發模式基本都是相似的，先定義一個類，實現主體功能，然后是個Plugin函數，再把這個函數擴展到JQuery原型上，最后通過委托的方式給特定元素綁定事件。
不足：
對IE兼容也存在不小的問題，BT將所有的元素盒模型都設置成了border-box，這是IE混雜模式下的盒模型，光這點就導致了不能兼容IE。此外還用到了大量的H5標簽以及CSS3語法，這些語法標簽兼容性方面同樣存在不小的問題，當然網上存在很多兼容IE的辦法，但需要引入其他文件，有些還不小，勢必導致加載速度變慢，影響用戶體驗。
BT對IE6，7的兼容性肯定不好，對IE8的支持也需要一些額外的文件。
IE8的媒體查詢需要response.js的配合才能實現
BT 不支持 IE 古老的兼容模式。為了讓 IE 瀏覽器運行最新的渲染模式下，建議將此 <meta> 標簽加入到你的頁面中：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
按 F12 鍵打開 IE 的調試工具，就可以看到 IE 當前的渲染模式是什么。
最后：
BT官方文檔列出了一個編碼規范，值得各個開發團隊參考，下面羅列一下比較重要的：
HTML
語法：
用兩個控制代替制表符（tab）--這是唯一能保證在所有環境下保持一致的的展現方法
嵌套元素應當縮進一次（兩個空格）
CSS
聲明順序：
相關屬性聲明應該歸為一組，並按照下面的順序書寫：
1、定位 Positioning
2、盒模型 Box Model
3、格式排版 Typographic
4、視覺 Visual
5、雜項 Misc
由於定位可以從正常的文檔流中移除元素，並且還能覆蓋盒模型相關的樣式，因此排在首位。盒模型排在第二，因為它決定了組件的尺寸和位置。
其他屬性只是影響組件的內部或者是不影響前兩組屬性，因此排在后面
完整規范網址：http://codeguide.bootcss.com/#html-syntax
總結：
BT屬於前端UI庫，可以快速搭建前端頁面，還可以使用saas重新設計組件，，比較適合前端一般的后端工程師，大中型企業用的不多。BT源碼對於前端學習非常有必要。