自定义栅格系统

第一步

直接将bootstrap的源码拿过来。

• grid.less
• variables.less
• mixins/clearfix.less
• mixins/grid.less
• mixins/grid-framework.less

第二步

自己编写一个damu.less，然后将上面所有的文件都引入：

这里要注意两个问题，第一个问题，clearfix.less

第二个问题，在damu.less中的引入顺序，应该先引入mixins。

第三步

找到mixins/grid-framework.less，然后将里面的col-全部替换掉为damu-col-。

第四步

使用koala将damu.less进行编译，变成damu.css。

编译出来的，就是damu.css。

编译出来的css，是有清除浮动的代码的。

第五步

写一个html，然后引入damu.css。

最后做出来的效果，如下：

这样，一个自定义的栅格系统，就出来了。

这种做法，真的，风骚。

关于koala（考拉）

这个GUI小工具用来将less文件编译成为css文件，这个工具已经停止更新维护了。

上面是koala的官网。

可以看到最新的就是2017-11-19日的版本了。

作者是在周日发了最后的版本。

在github上面，发现了两件事情。

第一，koala的作者是oklai，这个作品名字和作者的英文名字，很好玩。这个好玩的作者是阿里巴巴的。

作者是在2019年3月28日发布了项目停止的声明。

第二，NSIS，这是个什么东西？

oklai

看这个作者，也是不再搞github了。

博客园的地址：https://www.cnblogs.com/lainzq/

nsis

NSIS（Nullsoft Scriptable Install System），

Nullsoft脚本安装系统，

为一个开放源代码脚本驱动的封装安装文件用工具。

可以用其脚本语言自定安装的流程，同时支持多种语系的安装接口。

它提供了安装、卸载、系统设置、文件解压缩等功能。

NSIS是通过它的脚本语言来描述安装程序的行为和逻辑的。

NSIS的脚本语言和通常的编程语言有类似的结构和语法，但它是为安装程序这类应用所设计的。

这个东西看这挺酷的，有时间可以研究一下。

对bootstrap栅格源码的疑惑解答

自定义栅格系统的时候.clearfix.less中，需要做如下的处理：

但是在bootstrap的源码中确实是，都带了括号的，为什么源码能够在带了括号的情况下，还实现了继承呢？因为，在源码当中有一个utilities.less，里面有如下的操作：

在less当中像是.clearfix()这种写法，带了小括号，这表示是一个混合，是不能够直接继承的。像是.clearfix这种写法，不带小括号的，这表示是一个类，是可以直接继承的。这就是对上面问题的答案。