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