Bootstrap3.0學習筆記之柵格系統原理

通過前面兩篇文章的簡單介紹，大致對于Bootstrap有了初步的了解。由于自己也只是想通過Bootstrap官網來進行簡單的學習，自己能夠隨便搞個不是太搓的頁面就可以了。所以如果你是新手或許可以來看看，對你還有那么一點兒幫助，高手請飄過。

《Bootstrap3.0學習筆記》中也只是簡單的介紹了如何下載文件，及進行引用下載的文件，還沒有真正的進入前端的設計學習中。我也看到了廣大網友們對Bootstrap3.0也具有很大的興趣，有之前就使用過的大牛，也有和我一樣正打算學習一下的盆友、小菜。至于回復中比較多的就是：希望能有個系列，當然我也很希望自己能很好的規劃列一個系列，然后按照這個大綱進行即可。不過本人能力有限，所以只好跟隨自己的喜好來進行學習了。

聲明：寫作能力真是不濟，還望各位看官見諒。如有錯誤，請及時通知，本人必會在最短的時間進行更正，當然更希望能有更多的人來一起學習。

柵格系統（布局）

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

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

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

DW6編碼實現

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