柵格系統（布局）

Bootstrap內置了一套響應式、移動設備優先的流式柵格系統，隨著屏幕設備或視口（viewport）尺寸的增加，系統會自動分為最多12列。

我在這里是把Bootstrap中的柵格系統叫做布局。它就是通過一系列的行（row）與列（column）的組合創建頁面布局，然后你的內容就可以放入到你創建好的布局當中。下面就簡單介紹一下Bootstrap柵格系統的工作原理：

行（row）必須包含在.container中，以便為其賦予合適的排列（aligment）和內補（padding）。使用行（row）在水平方向創建一組列（cpumn）。你的內容應當放置于列（cpumn）內，而且，只有列（cpumn）可以作為行（row）的直接子元素。類似Predefined grid classes like .row and .cp-xs-4 這些預定義的柵格class可以用來快速創建柵格布局。Bootstrap源碼中定義的mixin也可以用來創建語義化的布局。通過設置padding從而創建列（cpumn）之間的間隔（gutter）。然后通過為第一和最后一樣設置負值的margin從而抵消掉padding的影響。柵格系統中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個.cp-xs-4來創建。

DW6編碼實現

Okay勒，下面開始寫代碼了額。首先上一張圖看看我使用的編輯器，之前在學校學習Html+CSS的時候使用較多的工具。

然后新建一個HTML文檔，選擇類型HTML5

創建好后，另存為與上一節的講解中js、css文件夾的同一目錄下。

layout.html就是我剛剛創建的文件。Bootstrap.html也是上一節中創建的第一個html頁面。

現在可以將Bootstrap.html中的代碼全部Copy到layout.html頁面。

然后在body標簽下添加如下代碼

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表