今天給大家分享一下，深度思考中的知識(shí)點(diǎn)——如何使用BOOTSTRAP 柵格系統(tǒng)？
一、背景介紹
今天小課堂分享的內(nèi)容主要是講，Bootstrap中的柵格系統(tǒng)(Grid System)
Bootstrap，來(lái)自 Twitter，是如今最流行的前端框架之一，Bootstrap功能強(qiáng)大，簡(jiǎn)單易學(xué)，很符合實(shí)際應(yīng)用場(chǎng)景。 它是一個(gè)CSS/HTML框架。由動(dòng)態(tài)CSS語(yǔ)言Less寫成。Bootstrap一經(jīng)推出后大受歡迎，一直是GitHub上的熱門開(kāi)源項(xiàng)目。bootstrap為我們提供了一套完整的流體柵格系統(tǒng)，而且隨著屏幕或者視扣尺寸的增加，系統(tǒng)會(huì)自動(dòng)分成最多12列，通過(guò)類名使用非常便捷。
二 .知識(shí)剖析
2.1 bootstrap中柵格系統(tǒng)的原理是采取12列的柵格體系，根據(jù)主流設(shè)備的尺寸進(jìn)行分段，每段寬度固定并且浮動(dòng)，通過(guò)百分比和媒體查詢實(shí)現(xiàn)響應(yīng)式布局。
2.2使用柵格系統(tǒng)
三、常見(jiàn)問(wèn)題
3.1單元格的類如何選擇和使用
單元格一共有四種：
.col-xs-: 無(wú)論屏幕寬度如何，單元格都在一行，寬度按照百分比設(shè)置
.col-sm-: 屏幕大于768px時(shí)，單元格在一行顯示，屏幕小于768px時(shí)，獨(dú)占一行
.col-md-: 屏幕大于992px時(shí)，單元格在一行顯示，屏幕小于992px時(shí)，獨(dú)占一行
.col-lg-: 屏幕大于1200px時(shí)，單元格在一行顯示，屏幕小于1200px時(shí)，獨(dú)占一行
3.2 柵格系統(tǒng)中的“15px”
相信細(xì)心的同學(xué)已經(jīng)發(fā)現(xiàn)bootstrap的柵格系統(tǒng)在padding、margin中大量出現(xiàn)了15px這個(gè)值，讓我們探討一下這個(gè)15px到底是什么東西以及它的作用是什么。
首先是Container的padding-left和padding-right為15px
這個(gè)padding是為了使其中的內(nèi)容不會(huì)緊貼于瀏覽器邊緣
其次是row的兩側(cè)有-15px的margin
這個(gè)負(fù)margin把row推出了Container的15px，使其與之重疊
最后是列（col）也有左右兩個(gè)15px的padding
因?yàn)镃ontainer和row的15px導(dǎo)致重疊，所以列的左右padding防止col的內(nèi)容直接接觸邊界
那么問(wèn)題來(lái)了
去掉Container和row的15px，只是單純?cè)O(shè)置col的左右padding是不是也可以達(dá)到預(yù)期的效果？
接著往下看
單純的從常規(guī)的row、col中發(fā)出這樣的質(zhì)疑的確是情理之中的
但是Bootstrap的柵格系統(tǒng)還有一個(gè)嵌套列，當(dāng)我們使用嵌套類的時(shí)候，這三個(gè)15px就保證了嵌套列的正常實(shí)現(xiàn)
當(dāng)設(shè)置了container,row,column后，如果要在column中嵌套column。首先要把被嵌套的column放到row中，把row放到作為容器的column中，而不需要再放置到一個(gè)新的container中，被嵌套的col就充當(dāng)了container。
而又因?yàn)閏ol和container有相同的padding15px，所以在實(shí)現(xiàn)上保證了一致性
四、擴(kuò)展思考
Bootstrap 有哪些缺點(diǎn)？
1、Bootstrap 自帶的樣式權(quán)值很高，在開(kāi)發(fā)中需要大量的代碼用于覆蓋原有樣式。
2、不兼容IE8以下瀏覽器,有兼容需求的就不能使用bootstrap了。
五.參考文獻(xiàn)
