資訊專欄INFORMATION COLUMN
摘要：提供了一套響應(yīng)式移動(dòng)設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)，隨著屏幕或視口尺寸的增加，系統(tǒng)會自動(dòng)分為最多列。三網(wǎng)格系統(tǒng)工作原理網(wǎng)格系統(tǒng)通過一系列包含內(nèi)容的行和列來創(chuàng)建頁面布局。下面列出了網(wǎng)格系統(tǒng)是如何工作的行必須放置在內(nèi)，以便獲得適當(dāng)?shù)膶R和內(nèi)邊距。
一、什么是網(wǎng)格（Grid)?Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)(Grid System)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動(dòng)分為最多12列。
在平面設(shè)計(jì)中，網(wǎng)格是一種由一系列用于組織內(nèi)容的相交的直線（垂直的、水平的）組成的結(jié)構(gòu)（通常是二維的）。它廣泛應(yīng)用于打印設(shè)計(jì)中的設(shè)計(jì)布局和內(nèi)容結(jié)構(gòu)。在網(wǎng)頁設(shè)計(jì)中，它是一種用于快速創(chuàng)建一致的布局和有效地使用 HTML 和 CSS 的方法。
一句話概括：網(wǎng)頁設(shè)計(jì)中的網(wǎng)格用于組織內(nèi)容，讓網(wǎng)站易于瀏覽，并降低用戶端的負(fù)載。
二、什么是Bootstrap網(wǎng)格系統(tǒng)（Grid System）？三、網(wǎng)格系統(tǒng)工作原理Bootstrap 包含了一個(gè)響應(yīng)式的、移動(dòng)設(shè)備優(yōu)先的、不固定的網(wǎng)格系統(tǒng)，可以隨著設(shè)備或視口大小的增加而適當(dāng)?shù)財(cái)U(kuò)展到 12 列。它包含了用于簡單的布局選項(xiàng)的預(yù)定義類，也包含了用于生成更多語義布局的功能強(qiáng)大的混合類。
網(wǎng)格系統(tǒng)通過一系列包含內(nèi)容的行和列來創(chuàng)建頁面布局。下面列出了 Bootstrap 網(wǎng)格系統(tǒng)是如何工作的：
行必須放置在 .container class 內(nèi)，以便獲得適當(dāng)?shù)膶R（alignment）和內(nèi)邊距（padding）。
使用行row來創(chuàng)建列的水平組。
內(nèi)容應(yīng)該放置在列內(nèi)，且唯有列可以是行的直接子元素。
預(yù)定義的網(wǎng)格類，比如 .row 和 .col-xs-4，可用于快速創(chuàng)建網(wǎng)格布局。LESS 混合類可用于更多語義布局。
列通過內(nèi)邊距（padding）來創(chuàng)建列內(nèi)容之間的間隙。該內(nèi)邊距是通過 .rows 上的外邊距（margin）取負(fù)，表示第一列和最后一列的行偏移。
網(wǎng)格系統(tǒng)是通過指定您想要橫跨的十二個(gè)可用的列來創(chuàng)建的。例如，要?jiǎng)?chuàng)建三個(gè)相等的列，則使用三個(gè) .col-xs-4。
下面是 Bootstrap 基本的網(wǎng)格結(jié)構(gòu)：
......
注意：列 必須放在
行元素下，且行元素里邊只能包含列子元素，不能跟其他的子標(biāo)簽元素，否則，布局樣式會亂掉。 四、布局實(shí)戰(zhàn)代碼：
Bootstrap 實(shí)例 - 布局偏移列-@corwien 區(qū)塊一 （col-md-8 col-md-offset-1）區(qū)塊二 （col-md-3）區(qū)塊三 （col-md-8 col-md-offset-1）區(qū)塊四 （col-md-4）區(qū)塊五（col-md-12）區(qū)塊六（col-md-3）區(qū)塊七（col-md-6）區(qū)塊八（col-md-3）說明：灰色區(qū)域?yàn)閎ody, 白色區(qū)域內(nèi)為container容器。
注意： 這里要特別注意區(qū)塊一、區(qū)塊二為在同一行，而區(qū)塊三、和區(qū)塊四在不同行，為什么呢？因?yàn)榱性貫樾袃?nèi)元素，如果一行沒有夠12列，則下邊的區(qū)塊元素會和它上邊的區(qū)塊列加起來小于或等于12，則會排在同一行，如果加起來大于12，則會排在下一列，如區(qū)塊一和區(qū)塊二兩個(gè)列加起來等于12，則剛好能排在同一行，而區(qū)塊三、四兩個(gè)列加起來為13，超過一行最大顯示列數(shù)12，自然就排在另一行了。
Bootstrap相關(guān)優(yōu)質(zhì)項(xiàng)目推薦 http://www.bootcss.com/
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50594.html
摘要：提供了一套響應(yīng)式移動(dòng)設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)，隨著屏幕或視口尺寸的增加，系統(tǒng)會自動(dòng)分為最多列。三網(wǎng)格系統(tǒng)工作原理網(wǎng)格系統(tǒng)通過一系列包含內(nèi)容的行和列來創(chuàng)建頁面布局。下面列出了網(wǎng)格系統(tǒng)是如何工作的行必須放置在內(nèi)，以便獲得適當(dāng)?shù)膶R和內(nèi)邊距。 Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)(Grid System)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動(dòng)分為...
摘要：柵格系統(tǒng)中的列是通過指定到的值來表示其跨越的范圍。實(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)先的流式柵格...
摘要：網(wǎng)格是實(shí)現(xiàn)響應(yīng)式頁面設(shè)計(jì)的利器，但至于它的工作原理，大多數(shù)時(shí)候?qū)﹂_發(fā)人員應(yīng)該是一個(gè)黑盒。而中間的列進(jìn)行偏移時(shí)，效果是將前一列與當(dāng)前列一分為二。明白了網(wǎng)格系統(tǒng)的以上工作原理，我項(xiàng)目當(dāng)中頁面布局的異常都得到了合理的解釋。 BOOTSTRAP CSS 網(wǎng)格是實(shí)現(xiàn)響應(yīng)式頁面設(shè)計(jì)的利器，但至于它的工作原理，大多數(shù)時(shí)候?qū)﹂_發(fā)人員應(yīng)該是一個(gè)黑盒。很少有人想知道它背后是如何工作的。直到你自已設(shè)計(jì)的頁面...
閱讀 2192·2021-11-19 09:55
閱讀 2656·2021-11-11 16:55
閱讀 3186·2021-09-28 09:36
閱讀 1953·2021-09-22 16:05
閱讀 3288·2019-08-30 15:53
閱讀 1814·2019-08-30 15:44
閱讀 2905·2019-08-29 13:10
閱讀 1350·2019-08-29 12:30
