Bootstrap柵格系統的認識和使用

2021-08-29 15:52:57 字數 588 閱讀 6822

1.最早的頁面設計是**,通過不同的行列來做對應的設計,但是這樣的設計太死板,而且隨著頁面內容的不斷複雜,維護修改也越來越困難,所以就到了div+css。

2.div通過對不同的內容進行化塊,再通過css設計,可以做到任意的排版和好看的樣式,是目前主流的開發頁面的技術

3.是bootstrap技術,柵格系統可以系統化,模組化的設計開發**,它採用12格(預設),16格,24格可以對頁面進行更加細緻的劃分,由於目前主流**大多數採用950px,960px的寬度,所以對應的柵格的寬度是固定的60px,40px,30px,對應的邊框間隙是20px、20px,10px。下邊通過乙個具體的**檢視,可以詳細的看一下注釋。

四個柵格

四個柵格

四個柵格

乙個柵格

乙個柵格

乙個柵格

乙個柵格

乙個柵格

乙個柵格

乙個柵格

乙個柵格

乙個柵格

乙個柵格

乙個柵格

乙個柵格

乙個柵格

這樣設計的 頁面布局會更加的美觀,合理,對於不同的裝置都可以兼顧到 

Bootstrap 柵格系統

目錄 1 簡介 2 柵格選項 3 列偏移 4 巢狀列 5 列排序 1 簡介 bootstrap內建了一套響應式 移動裝置優先的流式柵格系統,隨著螢幕裝置或視口 viewport 尺寸的增加,系統會自動分為最多12列。它包含了易於使用的預定義classe,還有強大的mixin用於生成更具語義的布局。2...

Bootstrap柵格系統

bootstrap基本模板 bootstrap 提供了一套響應式 移動裝置優先的流式柵格系統,隨著螢幕或視口 viewport 尺寸的增加,系統會自動分為最多12列。它包含了易於使用的預定義類,還有強大的mixin 用於生成更具語義的布局。頁面中的一行,比例可以自己定義,但必須保證是12列,如果缺少...

bootstrap 柵格系統

cdn 網路 託管 優點 減少伺服器請求 柵格系統的容器 固定寬居中 container 0 768移動端 768 992pad端 992 1200pc端 1200 pc端寬屏 xs sm md lg 100 750 970 1170 全屏 百分百 container fluid 注意 子元素若要實...