大家好，我是IT修真院北京分院web第31期學員金立劍
【js-2】BootStrap柵格系統
分享人：金立劍
目錄
1.背景介紹
2.知識剖析
3.解決方案
4.編碼實戰
5.擴展思考
6.參考文獻
7.更多討論
1.背景介紹
Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。Bootstrap提供了優雅的HTML和CSS規范，它即是由動態CSS語言Less寫成。Bootstrap一經推出后頗受歡迎，一直是GitHub上的熱門開源項目，國內一些移動開發者較為熟悉的框架，如WeX5前端開源框架等，也是基于Bootstrap源碼進行性能優化而來。
2.知識剖析
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)的直接子元素
4 類似 .row 和 .col-sm-4 這種預定義的類，可以用來快速創建柵格布局。
5 通過為“列（column）”設置 padding 屬性，從而創建列與列之間的間隔
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-為準。
3.解決方案
1) 列組合
列組合簡單理解就是更改數字來合并列（原則：列總和數不能超12），有點類似于表格的colspan屬性
2) 列偏移
通過 col-md-offset-*來實現
3) 列排序
列排序其實就是改變列的方向，就是改變左右浮動，并且設置浮動的距離。在Bootstrap框架的網格系統中是通過添加類名“col-md-push-*”和“col-md-pull-*” (其中星號代表移動的列組合數) 實現列的向左或向右排序
4) 列嵌套
Bootstrap框架的網格系統還支持列的嵌套。你可以在一個列中添加一個或者多個行（row）容器，然后在這個行容器中插入列
4.編碼實戰
5.擴展思考
Bootstrap 有哪些缺點？
個人認為，所謂優點和缺點，多數根據業務需求而定。比如 bootstrap 2以后的版本不支持IE6。當你的網站需要支持ie6的時候，這時是缺點。當網站不需要支持ie6.減少了兼容代碼的處理，馬上又變成了優點。總體而已，Bootstrap 屬于前端 ui 庫，通過現成的ui組件能夠迅速搭建前端頁面。同時還可以用less重新設計組件。對于前端技術一般的后臺工程師，省去了很多編寫前端處理時的痛苦。個人使用搭個博客什么的比較方便。相對于公司，直接使用 Bootstrap 感覺不多，大公司都有自己的前端開發設計人員，也會設計自己的css庫。當然，Bootstrap開源，對于學習如何組織css還是很有必要
6.參考文獻
7.更多討論
1.bootstrap柵格系統所定義的breakpoint 為什么是480 768 992 1200？
xs: < 575.98px，適應豎屏下的手機
iPhone 6p 的對應分辨率寬度為 414px，鮮有比這個還寬的手機；
題中說的 480px，應該是 Bootstrap 2.x 年代的時候的事了，當時 iPhone 的尺寸是是 320*480px，正常情況下來說是夠用的
還是有人希望橫豎屏展示不一致的效果，所以還是使用了 500 以上的寬度進行區分
實際上我覺得這個尺寸以 576 來判斷有些過寬，我這邊實踐上用的更多是以 375 作為標準設計然后以 414 以下作判斷橫豎屏依據
sm: 576px ~ 767.98px，適應較小的橫屏下的手機。
比如 iPhone 6 的分辨率高度 667px, 6 plus 為 736px，一般不會突破 768 的天際。然而 iPhone X 是 812px…… 但安全區域還是只有 734px，所以也還算勉強在范圍內；
數值上可以看到 320*16/9 = 568.88，這意味著有些等效寬度 320px 的小一點的 Android 手機上是橫屏也拿不到這個尺寸范圍的；
這個值向上對齊到 12 columns 網格就是 576，而且是很漂亮的 48 * 12 網格；
比較慘的大概是 iPhone 5 的尺寸，高度為 568，差了一點點
好像 V3 版本本來用的就是 540 左右的數值，應該就是為了適應 iPhone 5 / 小屏 Android 的橫屏，只是后來改掉了，大概也是覺得現在這種手機比較少了
576 還很好記，因為視頻 SDTV 格式剛好也是用 576i 的分辨率，而且挺多字幕組也喜歡輸出 576p 格式的視頻，因為剛好在 1024 寬的 iPad 上可以 16:9 展示，完美 :D
md: 768px~991.98px，適應 iPad mini 以上的尺寸的豎屏展示；768 剛好就是 iPad 的豎屏高度
正常情況下來說 640px 就夠了（360*640 是挺常見的大屏手機用的分辨率），但因為 6 plus 雖然用的還是 1920p 寬的屏幕但卻等效分辨率用的 736 px，所以…… 1280 * 720p 的平板哭暈在廁所，不過還好 1280 * 800 的不受影響
lg: > 992px，適應橫屏下的 iPad 及以上平板設備的尺寸；
比較讓我困惑的是為什么不用 996px，起碼能被 12 整除；估計是為了避免個別 PC / 平板應用邊框過粗以及滾動條的原因使得內容縮緊，所以留出 28px 的寬度避免被擠壓；
此外，有些老一點的 VGA 電視或者投影儀只能展示 1024 * 768，這種場景下就還是得適配這個寬度了；
其實在這個場景下個人用 960px 寬度更多一點，計算起來比較整齊，24 / 16 / 12 欄網格都能用，這可是個經典的網格設計寬度；
xl: > 1200px：適應 1280 以上的場景，通常為PC / Mac使用；現在 iPad Pro 也已經超過這個尺寸了
2.bootstrap的柵格系統為什么是12列，有沒有18列，24列等等啊，采用12列有什么好處？
因為12是1，2，3，4，6的最小公倍數，所以12列柵格系統相對較靈活，支持將一行分成1列，2列，3列，4列，6列。若是想要支持5列，那1，2，3，4，5的最小公倍數是60，而60這個數對于柵格系統來說顯然太大了。18能均分4列不？24能做的12都能做，所以12是最好的選擇。
3.bootstrap有哪些常用組件？
下拉菜單，摁鈕組，導航，標簽，列表，巨幕......
