一、背景介紹

什麼是柵格系統

Bootstrap 包含了一個響應式的、移動裝置優先的、不固定的網格系統， 可以隨著裝置或視口尺寸的大小的增加而適當地擴充套件到 12 列。 它包含了用於簡單的佈局選項的預定義類，也包含了用於生成更多語義佈局的功能強大的混合類。

當然也可以使用百分比，12列看作為100%，每一列為20%，就可以實現在一行擴展出5列的效果

二、知識剖析

網格選項

bootstrap使用了五種柵格選項來形成柵格系統，適合不同尺寸的螢幕裝置。

col-xs-*超小螢幕 手機 (<768px) （在bootstrap4裡面用col-）

col-sm-*小螢幕 平板 (≥576px)

col-md-*中等螢幕 桌面顯示器(≥768px)

col-lg-*中等螢幕 桌面顯示器 (≥992px)

col-xl- 超大桌面顯示器（≥1200px） （只有bootstrap4裡面有xl）

工作原理

.container實現固定的寬度並居中呈現,並和其它網格實現對齊 行(.row)是列(.col-*)的橫向組合和父容器(它們有效組織在.row下), 每列都有水平的padding值，用於控制它們之間的間隔，同時在負邊距的行上抵消，從而實現列中的所有內容在視覺上是左側對齊的體驗。

三、常見問題

bootstrap3和bootstrap4的區別

四、解決方案

bootstrap4它的原始碼是採用 Sass 語言編寫的

使用flex的佈局方式

全部使用了rem為單位（除了部分的margin和padding使用px）

Bootstrap 4 共有5種柵格類，依次是特小(col-)、小(col-sm-)、中(col-md-)、大(col-lg-)、特大(col-xl-)

偏移列通過 offset- 類來設定，例如：.offset-md-4 是把.col-md-4 往右移了四列格。

bootstrap3使用float的佈局方式

bootstrap3 共有4種柵格類，依次是特小(col-xs-)、小(col-sm-)、中(col-md-)、大(col-lg-)

bootstrap3裡面使用push和pull向左和向右移動

五、編碼實戰

六、拓展思考

container,row,col的關係

.container類用於固定寬度並支援響應式佈局的容器。 .row和.col類配合用於為其賦予合適的排列和內補。

七、參考文獻

八、更多討論

問 bootstrap3和bootstrap4有什麼區別？

答  bootstrap3和bootstrap4最大的區別就是4用的是flex佈局，3用的是float浮動，bootstrap4的柵格類特小(col-)，bootstrap3的柵格類特小(col-xs），bootstrap4新增加的柵格特大(col-xl-)，bootstrap4用offset來移動，bootstrap3用push和pull向左和向右移動

問 container,row,col有什麼關係？他們的工作原理是什麼？

答  .container類用於固定寬度並支援響應式佈局的容器。 .row和.col類配合用於為其賦予合適的排列和內補。

工作原理

.container實現固定的寬度並居中呈現,並和其它網格實現對齊 行(.row)是列(.col-*)的橫向組合和父容器(它們有效組織在.row下), 每列都有水平的padding值，用於控制它們之間的間隔，同時在負邊距的行上抵消，從而實現列中的所有內容在視覺上是左側對齊的體驗。

問  應該使用bootstrap3還是bootstrap4？

答 應該使用bootstrap3還是4，這個看個人，有的人覺得bootstrap3好用，有的人覺得bootstrap4好用，所以用3還是4，取決於個人。