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