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

posted @ 2013-02-25 08:53  TerryLiang  阅读(3716)  评论(0编辑  收藏