大家好，我是IT修真院成都分院第7期的學員韓建名，一枚正直純潔善良的WEB前端程序員。
1.背景介紹
Bootstrap，來自 Twitter，是如今最流行的前端框架之一，Bootstrap功能強大，簡單易學，很符合實際應(yīng)用場景。它是一個CSS/HTML框架。由動態(tài)CSS語言Less寫成。Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開源項目。bootstrap為我們提供了一套完整的流體柵格系統(tǒng)，而且隨著屏幕或者視扣尺寸的增加，系統(tǒng)會自動分成最多12列，通過類名使用非常便捷。bootstrap中柵格系統(tǒng)的原理是采取12列的柵格體系，根據(jù)主流設(shè)備的尺寸進行分段，每段寬度固定并且浮動，通過百分比和媒體查詢實現(xiàn)響應(yīng)式布局。
2.知識剖析
bootstrap中柵格系統(tǒng)的原理是采取12列的柵格體系，根據(jù)主流設(shè)備的尺寸進行分段，每段寬度固定并且浮動，通過百分比和媒體查詢實現(xiàn)響應(yīng)式布局。
3.常見問題
（1）如何使用柵格系統(tǒng)？
（2）單元格的類如何選擇和使用
（3）柵格系統(tǒng)中的“15px”
4.解決方案
（1）第一步：創(chuàng)建柵格系統(tǒng)的容器
解釋：為了寄予柵格系統(tǒng)合適的排列和padding，要把每一行“row”包含在一個容器中，而這個容器我們用class名為“container”或者“container-fluid”,這兩個class是Bootstrap為我們事先設(shè)計好的.container是固定寬度，居中顯示。下面是Bootstrap中.container類的代碼
.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}? ?
?@media (min-width: 768px){.container{width: 750px;}}??
? @media (min-width: 992px){.container{width: 970px;}}? ?
?@media (min-width: 1200px){.container{width: 1170px;}}? ?
?.container-fluid是 100% 寬度：下面是Bootstrap中.container-fluid類的代碼
.conyainer-fluid{padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;}
第二步：創(chuàng)建合適的柵格系統(tǒng)每一個“row”代表一行，而內(nèi)部的“col-md-數(shù)字”代表一個單元格；Bootstrap把每一行分成12等份，“col-md-數(shù)字”中的“數(shù)字”從1-12中取，數(shù)字等于幾，就占幾份；合理的選擇單元格的數(shù)字配置，再往單元格中添加我們想要的內(nèi)容，這樣一個柵格系統(tǒng)就完成了！
（2）單元格一共有四種：
.col-xs-:? 無論屏幕寬度如何，單元格都在一行，寬度按照百分比設(shè)置，適用于手機。
.col-sm-:? 屏幕大于768px時，單元格在一行顯示，屏幕小于768px時，獨占一行，適用于平板。
.col-md-:? 屏幕大于992px時，單元格在一行顯示，屏幕小于992px時，獨占一行，適用于桌面顯示器。
.col-lg-:? 屏幕大于1200px時，單元格在一行顯示，屏幕小于1200px時，獨占一行，適用于大型桌面顯示器
（3）相信細心的同學已經(jīng)發(fā)現(xiàn)bootstrap的柵格系統(tǒng)在padding、margin中大量出現(xiàn)了15px這個值，讓我們探討一下這個15px到底是什么東西以及它的作用是什么。首先是Container的padding-left和padding-right為15px，這個padding是為了使其中的內(nèi)容不會緊貼于瀏覽器邊緣。其次是row的兩側(cè)有-15px的margin。這個負margin把row推出了Container的15px，使其與之重疊。最后是列（col）也有左右兩個15px的padding。因為Container和row的15px導致重疊，所以列的左右padding防止col的內(nèi)容直接接觸邊界。那么問題來了，去掉Container和row的15px，只是單純設(shè)置col的左右padding不是也可以達到預期的效果嗎？單純的從常規(guī)的row、col中發(fā)出這樣的質(zhì)疑的確是情理之中的，但是Bootstrap的柵格系統(tǒng)還有一個嵌套列，當我們使用嵌套類的時候，這三個15px就保證了嵌套列的正常實現(xiàn)。當設(shè)置了container,row,column后，如果要在column中嵌套column。首先要把被嵌套的column放到row中，把row放到作為容器的column中，而不需要再放置到一個新的container中，被嵌套的col就充當了container。而又因為col和container有相同的padding15px，所以在實現(xiàn)上保證了一致性。
5.編碼實戰(zhàn)
以上說到的問題包括相關(guān)代碼，同學們可以親自去試試喲~
6.拓展思考
Bootstrap 有哪些缺點？
1、Bootstrap 自帶的樣式權(quán)值很高，在開發(fā)中需要大量的代碼用于覆蓋原有樣式。
2、不兼容IE8以下瀏覽器,有兼容需求的就不能使用bootstrap了。
7.參考文獻
http://www.cnblogs.com/JerryTao/p/5476027.html
http://www.jb51.net/article/86469.html
