大家好，我是IT修真院武漢分院第10期學員余佳貝，一枚正直善良的web程序員。
今天給大家分享一下，修真院官網css任務9，深度思考中的知識點——如何使用bootstrap柵格系統？
1.背景介紹
Bootstrap 是由 Twitter 公司(全球最大的微博)的兩名技術工程師研發的一個基于HTML、CSS、JavaScript 的開源框架。該框架代碼簡潔、視覺優美，可用于快速、簡單地構建基于 PC 及移動端設備的 Web 頁面需求。Bootstrap 最為重要的部分就是它的響應式布局也就是我今天要分享的柵格系統（網格系統），通過這種布局可以兼容 PC 端、PAD以及手機移動端的頁面訪問。
2.知識剖析
2.1原理
網格系統的實現原理非常簡單，它會隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。
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)、小屏(>=768px)、中屏(>=992px)和大屏(>=1200px)。而內層.container 容器的自適應寬度為：自動、750px、970px 和 1170px。自動的意思為，如果你是手機屏幕，則全面獨占一行顯示
3.常見問題
如何使用bootstrap柵格系統？
4.解決方案
網格系統用來布局，其實就是列的組合。Bootstrap框架的網格系統中有四種基本的用法。由于Bootstrap框架在不同屏幕尺寸使用了不同的網格樣式，在這一節中所涉及到的示例，我們都以中屏為例進行介紹，其他屏幕的使用也類似這一種
1.列組合
列組合簡單理解就是更改數字來合并列（原則：列總和數不能超12）
2.列偏移
有時我們可以設置列偏移，讓中間保持空隙 ,通過 col-md-offset-來實現
3.排序
可以把兩個列交換位置，push 向左移動，pull 向右移動
4.列嵌套
也可以嵌套，嵌滿也是 12 列
5.編碼實戰
6.擴展思考
Bootstrap 有哪些缺點？
雖然bootstrap自適應效果很好，但是缺點是不方便修改樣式，對細節的不好把握，而且Bootstrap 是由 Twitter 的開發者開發來系統化他們網站應用的樣式。當你的網站應用的樣式和他們不一樣，這意味著你不得不覆蓋掉他們的樣式來。大多數網站的樣式并不像 Twitter 那樣。因此，如果他們用Bootstrap來布局 ，會覆蓋掉很多樣式 ，也不太好維護
7.參考文獻
參考文獻：W3C Bootstrap 教程https://www.w3cschool.cn/bootstrap
8.更多討論
1.bootstrap有哪些常用組件？
2.bootstrap的柵格系統為什么最多12列，采用12列有什么好處嗎？
