写于 2016.01.10
Bootstrap的大名想必所有前端开发者都听过，在此不再赘述，想要深入的了解可以到这儿：
首先谈谈为什么要写这篇文章。在公司最近的项目中，被要求使用bootstrap进行样式的重构，然而我们又有自己的一套UIkit，样式的覆盖如果直接写在css中是非常痛苦的一件事，开发成本巨大。因为如此，萌生了改写bootstrap源码的想法。然而改源码并非一件易事。市面上关于bootstrap的资料有很多，但是基本上都是在介绍它的优点以及使用方法，鲜有对其文件目录或者源码进行分析，想要定制它首先需要一个准确的切入点。在研究了一轮其less文件的目录结构以后，我似乎找到了这个关键的切入点，遂写一篇分享，希望可以对bootstrap的使用者有一定的启发。（嫌麻烦的同学可以直接在（貌似需要翻墙）进行可视化自定义，但是这个项目对应的bootstrap版本只到3.1，如果要使用最新版本（v3.3.5）的同学可能得考虑一下了。）
文件目录
bootstrap.less复制代码
variables.less复制代码
utilities.less复制代码
mixins文件夹复制代码
下面分析各个文件的作用。
bootstrap.less
bootstrap主文件，把所有的组件样式都放在一起了，编译出来后就是bootstrap.css文件了。它长这样：
variables.less
变量定义文件，里面定义了一大堆的变量，也就是各种颜色啊，大小啊，边距啊等等之类的东西，上面贴的那个[][6]其实修改的就是这里面的内容，而我们自定义bootstrap样式的操作主要也是在这里面进行。
utilities.less
公共定义文件，也可以理解为公用的“动作”，因为它里面定义了诸如“左浮动”，“右浮动”之类的动作，任何html标签只要加上定义在此文件里面动作，就可以产生相应的效果。
.high-index{ z-index: 200;}.low-index{ z-index: 0;}复制代码 然后在html标签里面直接使用class="high-index"即可。
mixins文件夹
里面的文件结构是这样的
button.less看一下里面的内容 less文件夹里面的 button.less /minxins/button.less所定义的样式。如果我们想要加一个“大圆角按钮”的样式，我们可以在 /minxins/button.less里面这样去定义： .button-circle(){ border-radius: 1000px;}复制代码 然后在/less/button.less里面加上这么一句：
.btn-circle{ .buttom-circle();}复制代码 就可以了。以后只需要在html标签加入这个class就可以使用我们自己定义的.btn-circle效果，如<button class="btn-circle"></button>
总结
经过以上分析，相信大家已经明白bootstrap的less文件夹里面不同文件的作用，可以愉快地对自己的bootstrap进行自定义啦！不过由于bootstrap4.0已经投入到scss的阵营，所以在4.0里面需要自己去判断了，不过其基本逻辑应该变动不大，需要具体情况具体分析。
Thanks for reading, see ya next time!