大家好，我是IT修真院深圳分院第01期學員，一枚正直純潔善良的web程序員。
今天給大家分享一下，修真院官網CSS任務09，深度思考中的知識點——如何使用bootstrap柵格系統？
一、背景介紹
Bootstrap，來自Twitter，是目前很受歡迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它簡潔靈活，使得Web開發更加快捷。Bootstrap提供了優雅的HTML和CSS規范，它即是由動態CSS語言Less寫成。Bootstrap一經推出后頗受歡迎，一直是GitHub上的熱門開源項目，國內一些移動開發者較為熟悉的框架，如WeX5前端開源框架等，也是基于Bootstrap源碼進行性能優化而來。
二、知識剖析
2.1原理
網格系統的實現原理非常簡單，僅僅是通過定義容器大小，平分12份(也有平分成24份或32份，但12份是最常見的)，再調整內外邊距，最后結合媒體查詢，就制作出了強大的響應式網格系統。Bootstrap框架中的網格系統就是將容器平分成12份。
在使用的時候大家可以根據實際情況重新編譯LESS（或Sass）源碼來修改12這個數值（也就是換成24或32，當然你也可以分成更多，但不建議這樣使用）。
2.2使用規則
1)數據行(.row)必須包含在容器（.container）中，以便為其賦予合適的對齊方式和內距(padding)。
2）在行(.row)中可以添加列(.column)，但列數之和不能超過平分的總列數，比如12。
3）具體內容應當放置在列容器（column）之內，而且只有列（column）才可以作為行容器(.row)的直接子元素
2.3柵格選項
當屏寬小于768px（即小屏）時，列的劃分以.col-xs-后面的數字為準。如果沒定義.col-xs-，就會變成單列且寬度和row相等。
當屏寬在768px和992px之間（即平板屏）時，列的劃分以.col-sm-后面的數字為準。如果沒有定義col-sm-，以.col-xs-為準。
當屏寬在992px和1200px之間（即中屏）時，列的劃分以.col-md-后面的數字為準。如果沒有定義.col-md-，以col-sm-或col-xs-為準。
當屏寬大于1200px（即大屏）時，列的劃分以.col-lg-后面的數字為準。如果沒有定義.col-md-，以.col-md-或col-sm-或col-xs-為準。
三、常見問題
如何使用bootstrap柵格系統？
四、解決方案
網格系統用來布局，其實就是列的組合。Bootstrap框架的網格系統中有四種基本的用法。由于Bootstrap框架在不同屏幕尺寸使用了不同的網格樣式，在這一節中所涉及到的示例，我們都以中屏為例進行介紹，其他屏幕的使用也類似這一種。
1)列組合
列組合簡單理解就是更改數字來合并列（原則：列總和數不能超12），有點類似于表格的colspan屬性
效果圖：
2)列偏移
通過col-md-offset-*(其中星號代表移動的列組合數)來實現
偏移前：
偏移后：
3)列排序
列排序其實就是改變列的方向，就是改變左右浮動，并且設置浮動的距離。在Bootstrap框架的網格系統中是通過添加類名“col-md-push-*”和“col-md-pull-*” (其中星號代表移動的列組合數)實現列的向左或向右排序
排序前：
排序后：
4)列嵌套
Bootstrap框架的網格系統還支持列的嵌套。你可以在一個列中添加一個或者多個行（row）容器，然后在這個行容器中插入列
效果圖：
5.編碼實戰
詳見視頻
六、拓展思考
Bootstrap有哪些缺點？
個人認為，所謂優點和缺點，多數根據業務需求而定。比如bootstrap 2以后的版本不支持IE6。當你的網站需要支持ie6的時候，這時是缺點。當網站不需要支持ie6.減少了兼容代碼的處理，馬上又變成了優點。總體而已，Bootstrap屬于前端ui庫，通過現成的ui組件能夠迅速搭建前端頁面。同時還可以用less重新設計組件。對于前端技術一般的后臺工程師，省去了很多編寫前端處理時的痛苦。個人使用搭個博客什么的比較方便。相對于公司，直接使用Bootstrap感覺不多，大公司都有自己的前端開發設計人員，也會設計自己的css庫。當然，Bootstrap開源，對于學習如何組織css還是很有必要
七、參考文獻
八、更多討論
1.bootstrap柵格系統所定義的breakpoint為什么是480px 768px 992px 1200px？
2.bootstrap的柵格系統為什么是12列，有沒有18列，24列等等啊，采用12列有什么好處？
3.bootstrap有哪些常用組件？
感謝大家觀看
今天的分享就到這里啦，歡迎大家點贊、轉發、留言、拍磚~
你可以直接點擊此鏈接與我一起學習：邀請碼
