資訊專欄INFORMATION COLUMN
摘要：提供了一套響應式移動設備優先的流式網格系統，隨著屏幕或視口尺寸的增加，系統會自動分為最多列。三網格系統工作原理網格系統通過一系列包含內容的行和列來創建頁面布局。下面列出了網格系統是如何工作的行必須放置在內，以便獲得適當的對齊和內邊距。
一、什么是網格（Grid)?Bootstrap 提供了一套響應式、移動設備優先的流式網格系統(Grid System)，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。
在平面設計中，網格是一種由一系列用于組織內容的相交的直線（垂直的、水平的）組成的結構（通常是二維的）。它廣泛應用于打印設計中的設計布局和內容結構。在網頁設計中，它是一種用于快速創建一致的布局和有效地使用 HTML 和 CSS 的方法。
一句話概括：網頁設計中的網格用于組織內容，讓網站易于瀏覽，并降低用戶端的負載。
二、什么是Bootstrap網格系統（Grid System）？三、網格系統工作原理Bootstrap 包含了一個響應式的、移動設備優先的、不固定的網格系統，可以隨著設備或視口大小的增加而適當地擴展到 12 列。它包含了用于簡單的布局選項的預定義類，也包含了用于生成更多語義布局的功能強大的混合類。
網格系統通過一系列包含內容的行和列來創建頁面布局。下面列出了 Bootstrap 網格系統是如何工作的：
行必須放置在 .container class 內，以便獲得適當的對齊（alignment）和內邊距（padding）。
使用行row來創建列的水平組。
內容應該放置在列內，且唯有列可以是行的直接子元素。
預定義的網格類，比如 .row 和 .col-xs-4，可用于快速創建網格布局。LESS 混合類可用于更多語義布局。
列通過內邊距（padding）來創建列內容之間的間隙。該內邊距是通過 .rows 上的外邊距（margin）取負，表示第一列和最后一列的行偏移。
網格系統是通過指定您想要橫跨的十二個可用的列來創建的。例如，要創建三個相等的列，則使用三個 .col-xs-4。
下面是 Bootstrap 基本的網格結構：
......
注意：列 必須放在
行元素下，且行元素里邊只能包含列子元素，不能跟其他的子標簽元素，否則，布局樣式會亂掉。 四、布局實戰代碼：
Bootstrap 實例 - 布局偏移列-@corwien 區塊一 （col-md-8 col-md-offset-1）區塊二 （col-md-3）區塊三 （col-md-8 col-md-offset-1）區塊四 （col-md-4）區塊五（col-md-12）區塊六（col-md-3）區塊七（col-md-6）區塊八（col-md-3）說明：灰色區域為body, 白色區域內為container容器。
注意： 這里要特別注意區塊一、區塊二為在同一行，而區塊三、和區塊四在不同行，為什么呢？因為列元素為行內元素，如果一行沒有夠12列，則下邊的區塊元素會和它上邊的區塊列加起來小于或等于12，則會排在同一行，如果加起來大于12，則會排在下一列，如區塊一和區塊二兩個列加起來等于12，則剛好能排在同一行，而區塊三、四兩個列加起來為13，超過一行最大顯示列數12，自然就排在另一行了。
Bootstrap相關優質項目推薦 http://www.bootcss.com/
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111780.html
摘要：提供了一套響應式移動設備優先的流式網格系統，隨著屏幕或視口尺寸的增加，系統會自動分為最多列。三網格系統工作原理網格系統通過一系列包含內容的行和列來創建頁面布局。下面列出了網格系統是如何工作的行必須放置在內，以便獲得適當的對齊和內邊距。 Bootstrap 提供了一套響應式、移動設備優先的流式網格系統(Grid System)，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為...
摘要：柵格系統中的列是通過指定到的值來表示其跨越的范圍。實例下圖是一個柵格系統，共有四行。然后在根目錄中，使用命令，可以自動將源代碼編譯成，放在目錄中。 什么是Bootstrap Bootstrap是一個用于快速開發Web應用程序和網站的前端框架，它包括HTML,CSS,JS等。它是由Twitter開發，現在成為Github上最為流行的前端開發框架。它提供了一套響應式，移動設備優先的流式柵格...
摘要：網格是實現響應式頁面設計的利器，但至于它的工作原理，大多數時候對開發人員應該是一個黑盒。而中間的列進行偏移時，效果是將前一列與當前列一分為二。明白了網格系統的以上工作原理，我項目當中頁面布局的異常都得到了合理的解釋。 BOOTSTRAP CSS 網格是實現響應式頁面設計的利器，但至于它的工作原理，大多數時候對開發人員應該是一個黑盒。很少有人想知道它背后是如何工作的。直到你自已設計的頁面...
閱讀 1370·2021-11-22 09:34
閱讀 2580·2021-11-12 10:36
閱讀 1111·2021-11-11 16:55
閱讀 2324·2020-06-22 14:43
閱讀 1456·2019-08-30 15:55
閱讀 1974·2019-08-30 15:53
閱讀 1764·2019-08-30 10:50
閱讀 1217·2019-08-29 12:15
