Bootstrap()默认是12列的栅格布局(),有时候不满足我们布局的需求,这时侯,可以通过修改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,请参考我的上一篇随笔: