資訊專欄INFORMATION COLUMN
摘要：網(wǎng)格是實(shí)現(xiàn)響應(yīng)式頁(yè)面設(shè)計(jì)的利器，但至于它的工作原理，大多數(shù)時(shí)候?qū)﹂_發(fā)人員應(yīng)該是一個(gè)黑盒。而中間的列進(jìn)行偏移時(shí)，效果是將前一列與當(dāng)前列一分為二。明白了網(wǎng)格系統(tǒng)的以上工作原理，我項(xiàng)目當(dāng)中頁(yè)面布局的異常都得到了合理的解釋。
BOOTSTRAP CSS 網(wǎng)格是實(shí)現(xiàn)響應(yīng)式頁(yè)面設(shè)計(jì)的利器，但至于它的工作原理，大多數(shù)時(shí)候?qū)﹂_發(fā)人員應(yīng)該是一個(gè)黑盒。很少有人想知道它背后是如何工作的。直到你自已設(shè)計(jì)的頁(yè)面無(wú)法滿足一個(gè)復(fù)雜的需求，或者設(shè)計(jì)出來(lái)的頁(yè)面顯示怎么也達(dá)不到你的預(yù)期。你真的會(huì)像丈二和尚摸不著頭腦。直到我看到了一篇國(guó)外開發(fā)人員寫的文章，它提示了一些BOOTSTRAP 3.0框架中GRID的一些工作原理，這邊簡(jiǎn)單做一個(gè)歸納總結(jié)，供大家參考。
容器 ( container)容器的左內(nèi)邊距是15px，如下圖給粉紅部分顯示
容器的寬度動(dòng)態(tài)地取決于屏幕寬度
行(row)列column應(yīng)該包含在行row里面 ，最多可添加到12的列。它還充當(dāng)包裝器，因?yàn)樗辛卸枷蜃蟾?dòng),如果浮動(dòng)異常，行與行之間也不會(huì)有重疊。
行每邊都有15px的負(fù)邊距，如下圖中藍(lán)色所示。它正好抵消了外部容器的15px的左內(nèi)邊距。理解這點(diǎn)至關(guān)重要，有助于理解后續(xù)列 column的排列方式。以及自已設(shè)計(jì)的頁(yè)面布局出現(xiàn)異常的時(shí)候。它使得行內(nèi)的列可以貼著屏幕邊距為起點(diǎn)，計(jì)算左內(nèi)邊距
不要在容器外使用行，那將不起作用
列(column)
列現(xiàn)在有15px的內(nèi)邊距，以黃色顯示。這樣一來(lái)就可以做到2點(diǎn)：
兩側(cè)列沿著容器對(duì)齊（由于行的-15px)
列與列的內(nèi)容之間永遠(yuǎn)保持著30px的間隙
不要在行外使用列，那將不起作用
列的內(nèi)容有了上述行和列的內(nèi)邊距互相抵消，這樣每一列的內(nèi)容，無(wú)管是最2邊的列，還是中間的列，對(duì)于整個(gè)屏幕來(lái)說(shuō)，都是平等對(duì)待的，同時(shí)還能控制在同一行當(dāng)中，即15px + ??px+ 15px的獨(dú)立單元，這便是container > row > column 的內(nèi)邊距設(shè)置的巧妙之處。
可以在列中創(chuàng)建新的網(wǎng)格系統(tǒng)，記得只能在列中使用行，不能使用容器：
這樣外層列對(duì)于內(nèi)層行來(lái)說(shuō)，與最外層的容器與行來(lái)說(shuō)的關(guān)系是一樣的。
也就是說(shuō)此時(shí)，列的作用與容器的作用相同，形成一個(gè)遞歸關(guān)系。
偏移比較好理解，它只是將列的左外邊距增加相應(yīng)的若干個(gè)單位長(zhǎng)度。只唯一需要注意的是，針對(duì)最左側(cè)列進(jìn)行偏移時(shí)，偏移的起始位置，如下圖所示，是從行的-15px外開始的。其實(shí)這也好理解，因?yàn)橥獠康男械钠鹗嘉恢檬?15px,畢竟內(nèi)邊距也屬于行的一部分。而中間的列進(jìn)行偏移時(shí)，效果是將前一列與當(dāng)前列一分為二。
推和拉（push and pull)為什么使用推/拉？根據(jù)屏幕尺寸的變大變小，翻轉(zhuǎn)當(dāng)前布局。
特別適用于將列重新排列，當(dāng)屏幕從移動(dòng)設(shè)計(jì)布局變到桌面設(shè)計(jì)，因?yàn)樗试S你在屏幕大小變動(dòng)時(shí)，打破HTML默認(rèn)的：自頂向下，從左至右的布局方式。
特別需要注意的是，pull和push實(shí)際上移動(dòng)了列的位置，而不是改變列的左右邊距，如下圖所示，這樣一來(lái)，如果push/pull一個(gè)列，而不是push/pull其相鄰列的話，會(huì)出列與列內(nèi)容重疊在一起的情況。
因此，每當(dāng)你pull/push一列的時(shí)候，相應(yīng)的鄰近的列也要做一個(gè)互補(bǔ)的push/pull的操作。
?
明白了網(wǎng)格系統(tǒng)的以上工作原理，我項(xiàng)目當(dāng)中頁(yè)面布局的異
常都得到了合理的解釋。如果覺(jué)得還是很難理解，那就切記要按照
container ->row ->column->row->column這種方式去組織界面的網(wǎng)格元素。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/115697.html
摘要：簡(jiǎn)言網(wǎng)格布局是一套二維的頁(yè)面布局系統(tǒng)，它的出現(xiàn)將完全顛覆頁(yè)面布局的傳統(tǒng)方式。例用屬性和定義網(wǎng)格，同時(shí)定義網(wǎng)格線名稱。例一組區(qū)域名稱要放在單引號(hào)或雙引號(hào)內(nèi)，每一個(gè)名稱之間以空格分隔。例本例中，是通過(guò)隱式網(wǎng) 簡(jiǎn)言 CSS網(wǎng)格布局（Grid）是一套二維的頁(yè)面布局系統(tǒng)，它的出現(xiàn)將完全顛覆頁(yè)面布局的傳統(tǒng)方式。傳統(tǒng)的CSS頁(yè)面布局 一直不夠理想。包括table布局、浮動(dòng)、定位及內(nèi)聯(lián)塊等方式，從本質(zhì)...
摘要：柵格系統(tǒng)中的列是通過(guò)指定到的值來(lái)表示其跨越的范圍。實(shí)例下圖是一個(gè)柵格系統(tǒng)，共有四行。然后在根目錄中，使用命令，可以自動(dòng)將源代碼編譯成，放在目錄中。 什么是Bootstrap Bootstrap是一個(gè)用于快速開發(fā)Web應(yīng)用程序和網(wǎng)站的前端框架，它包括HTML,CSS,JS等。它是由Twitter開發(fā)，現(xiàn)在成為Github上最為流行的前端開發(fā)框架。它提供了一套響應(yīng)式，移動(dòng)設(shè)備優(yōu)先的流式柵格...
摘要：在過(guò)去的幾個(gè)星期里，我開始看到基于的布局框架和柵格系統(tǒng)的出現(xiàn)。你可能傾向于明確給出所有元素的位置，或是盡可能依賴于自動(dòng)布局。 showImg(https://segmentfault.com/img/remote/1460000010188997); 在過(guò)去的幾個(gè)星期里，我開始看到基于 CSS Grid 的布局框架和柵格系統(tǒng)的出現(xiàn)。我們驚訝它為什么出現(xiàn)的這么晚。但除了使用 CSS Gr...
閱讀 2491·2021-10-09 09:59
閱讀 2270·2021-09-23 11:30
閱讀 2661·2019-08-30 15:56
閱讀 1204·2019-08-30 14:00
閱讀 3004·2019-08-29 12:37
閱讀 1327·2019-08-28 18:16
閱讀 1710·2019-08-27 10:56
閱讀 1084·2019-08-26 17:23
