Bootstrap 2.3.0自定Grid布局

Bootstrap（http://twitter.github.com/bootstrap）默認是12列的柵格布局（http://twitter.github.com/bootstrap/scaffolding.html#gridSystem），有時候不滿足我們布局的需求，這時侯，可以通過修改less/variables.less文件中關於柵格布局的變量就可以了。

比如我們想修改改為24列的柵格布局，可以參考以下我修改的配置參數：

// GRID
// --------------------------------------------------


// Default 940px grid
// -------------------------
@gridColumns:             24;
@gridColumnWidth:         30px;
@gridGutterWidth:         10px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// 1200px min
@gridColumnWidth1200:     35px;
@gridGutterWidth1200:     15px;
@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

// 768px-979px
@gridColumnWidth768:      21px;
@gridGutterWidth768:      10px;
@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));

修改完成后，在Bootstrap源碼目錄重新執行編譯命令：make bootstrap，這樣就可以得到修改過后的bootstrap所有文件。

同理，由於Bootstrap是基於less的，我們可以很方便的通過修改less/variables.less中的變量，定義和生成滿足自己需求的bootstrap樣式。

如何編譯Bootstrap，請參考我的上一篇隨筆：

http://www.cnblogs.com/TerryLiang/archive/2013/02/19/2916460.html