bootstrap柵格佈局以及bootstrap3和bootstrap4的區別
一、背景介紹
什麼是柵格系統
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,取決於個人。