BOOSTRAP 3.0 網格(GRID)工作原理

JowayYoung 發布于2019-08-30 14:00 / 1149人閱讀

摘要：網格是實現響應式頁面設計的利器，但至于它的工作原理，大多數時候對開發人員應該是一個黑盒。而中間的列進行偏移時，效果是將前一列與當前列一分為二。明白了網格系統的以上工作原理，我項目當中頁面布局的異常都得到了合理的解釋。

BOOTSTRAP CSS 網格是實現響應式頁面設計的利器，但至于它的工作原理，大多數時候對開發人員應該是一個黑盒。很少有人想知道它背后是如何工作的。直到你自已設計的頁面無法滿足一個復雜的需求，或者設計出來的頁面顯示怎么也達不到你的預期。你真的會像丈二和尚摸不著頭腦。直到我看到了一篇國外開發人員寫的文章，它提示了一些BOOTSTRAP 3.0框架中GRID的一些工作原理，這邊簡單做一個歸納總結，供大家參考。

容器 ( container)

容器的左內邊距是15px，如下圖給粉紅部分顯示

容器的寬度動態地取決于屏幕寬度

行(row)

列column應該包含在行row里面，最多可添加到12的列。它還充當包裝器，因為所有列都向左浮動,如果浮動異常，行與行之間也不會有重疊。

行每邊都有15px的負邊距，如下圖中藍色所示。它正好抵消了外部容器的15px的左內邊距。理解這點至關重要，有助于理解后續列 column的排列方式。以及自已設計的頁面布局出現異常的時候。它使得行內的列可以貼著屏幕邊距為起點，計算左內邊距

不要在容器外使用行，那將不起作用

列(column)

列現在有15px的內邊距，以黃色顯示。這樣一來就可以做到2點：

兩側列沿著容器對齊（由于行的-15px)

列與列的內容之間永遠保持著30px的間隙

不要在行外使用列，那將不起作用

列的內容

有了上述行和列的內邊距互相抵消，這樣每一列的內容，無管是最2邊的列，還是中間的列，對于整個屏幕來說，都是平等對待的，同時還能控制在同一行當中，即15px + ??px+ 15px的獨立單元，這便是container > row > column 的內邊距設置的巧妙之處。

嵌套

可以在列中創建新的網格系統，記得只能在列中使用行，不能使用容器：
這樣外層列對于內層行來說，與最外層的容器與行來說的關系是一樣的。
也就是說此時，列的作用與容器的作用相同，形成一個遞歸關系。

偏移（offset)

偏移比較好理解，它只是將列的左外邊距增加相應的若干個單位長度。只唯一需要注意的是，針對最左側列進行偏移時，偏移的起始位置，如下圖所示，是從行的-15px外開始的。其實這也好理解，因為外部的行的起始位置是-15px,畢竟內邊距也屬于行的一部分。而中間的列進行偏移時，效果是將前一列與當前列一分為二。

推和拉（push and pull)

為什么使用推/拉？根據屏幕尺寸的變大變小，翻轉當前布局。
特別適用于將列重新排列，當屏幕從移動設計布局變到桌面設計，因為它允許你在屏幕大小變動時，打破HTML默認的：自頂向下，從左至右的布局方式。

特別需要注意的是，pull和push實際上移動了列的位置，而不是改變列的左右邊距，如下圖所示，這樣一來，如果push/pull一個列，而不是push/pull其相鄰列的話，會出列與列內容重疊在一起的情況。

因此，每當你pull/push一列的時候，相應的鄰近的列也要做一個互補的push/pull的操作。

?
明白了網格系統的以上工作原理，我項目當中頁面布局的異
常都得到了合理的解釋。如果覺得還是很難理解，那就切記要按照
container ->row ->column->row->column這種方式去組織界面的網格元素。

云服務器 GPU云服務器工作原理網絡工作原理爬蟲工作原理 cdn工作原理

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115697.html

【圖片版】CSS網格布局（Grid）完全教程

摘要：簡言網格布局是一套二維的頁面布局系統，它的出現將完全顛覆頁面布局的傳統方式。例用屬性和定義網格，同時定義網格線名稱。例一組區域名稱要放在單引號或雙引號內，每一個名稱之間以空格分隔。例本例中，是通過隱式網簡言 CSS網格布局（Grid）是一套二維的頁面布局系統，它的出現將完全顛覆頁面布局的傳統方式。傳統的CSS頁面布局一直不夠理想。包括table布局、浮動、定位及內聯塊等方式，從本質...

ddongjian0000 2019-08-29 15:14 評論0 收藏0
Bootstrap網格系統

摘要：柵格系統中的列是通過指定到的值來表示其跨越的范圍。實例下圖是一個柵格系統，共有四行。然后在根目錄中，使用命令，可以自動將源代碼編譯成，放在目錄中。什么是Bootstrap Bootstrap是一個用于快速開發Web應用程序和網站的前端框架，它包括HTML,CSS,JS等。它是由Twitter開發，現在成為Github上最為流行的前端開發框架。它提供了一套響應式，移動設備優先的流式柵格...

ISherry 2019-08-30 13:07 評論0 收藏0
你不需要基于 CSS Grid 的柵格布局系統

摘要：在過去的幾個星期里，我開始看到基于的布局框架和柵格系統的出現。你可能傾向于明確給出所有元素的位置，或是盡可能依賴于自動布局。 showImg(https://segmentfault.com/img/remote/1460000010188997); 在過去的幾個星期里，我開始看到基于 CSS Grid 的布局框架和柵格系統的出現。我們驚訝它為什么出現的這么晚。但除了使用 CSS Gr...

anonymoussf 2019-08-01 17:20 評論0 收藏0