Bootstrap 2.3.0 custom grid layout

Bootstrap (http://twitter.github.com/bootstrap) defaults to 12 columns of raster layout (http://twitter.github.com/bootstrap/scaffolding.html#gridSystem), sometimes not meeting our layout needs, at this time, you can modifyLess/variables. LessFile.

For example, if you want to change the grid layout to a 24-column layout, you can refer to the following configuration parameters:

// Grid // configure // default 940px grid // configure @ gridcolumns: 24; @ gridcolumnwidth: 30px; @ gridgutterwidth: 10px; @ gridrowwidth: (@ gridcolumns * @ gridcolumnwidth) + (@ gridgutterwidth * (@ gridcolumns-1); // specify PX min @ gridcolumnwidth1200: 35px; @ gridgutterwidth1200: 15px; @ gridrowwidth1200: (@ gridcolumns * @ response) + (@ gridgutterwidth1200 * (@ gridcolumns-1); // 768px-979px @ gridcolumnwidth768: 21px; @ cursor: 10px; @ gridrowwidth768: (@ gridcolumns * @ cursor) + (@ gridgutterwidth768 * (@ gridcolumns-1 ));
 

After the modification is complete, re-execute the compilation command in the bootstrap source code directory:Make BootstrapIn this way, you can get all the modified Bootstrap files.

Similarly, because Bootstrap is less-based, we can easily modifyLess/variables. LessTo define and generate a bootstrap style that meets your needs.

For how to compile Bootstrap, see my previous article:

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