自定义栅格系统与Bootstrap.css

自定义栅格系统

基于对Bootstrap中栅格系统源码的解读，修改相关参数和命令，即可打造高度自定义的栅格系统

引入源码Less文件，转换成CSS文件

1
2
3
4
5
6

@import "../mixins/grid.less";
@import "../mixins/grid-framework.less";
@import "../mixins/clearfix.less";
@import "../grid.less";
@import "../variables.less"

自定义Bootstrap.css

引入源码Less文件，需要注意源码文件应放在当前父文件目录下，使文件可被读取

然后通过添加修改后的相关代码覆盖源码的方式来完成自定义，最后转换成CSS文件即可

1
2
3

@import "bootstrap.less";   // 所有的在该文件中引入的less文件和mixins都要放在当前父目录文件下
@grid-gutter-width: 60px; 

一般使用，或许无需再加改动样式源码

若要达到特殊的效果，打破固有的设定，则会用到

对于有些复杂的实现和需求，我想往往会放弃bootstrap的模板，需要重新去写，这个可能就会经常碰到