bootstrap3.x内less文件夹的文件内容及功能分析

写于 2016.01.10

Bootstrap的大名想必所有前端开发者都听过，在此不再赘述，想要深入的了解可以到这儿：www.bootcss.com/

首先谈谈为什么要写这篇文章。在公司最近的项目中，被要求使用bootstrap进行样式的重构，然而我们又有自己的一套UIkit，样式的覆盖如果直接写在css中是非常痛苦的一件事，开发成本巨大。因为如此，萌生了改写bootstrap源码的想法。然而改源码并非一件易事。市面上关于bootstrap的资料有很多，但是基本上都是在介绍它的优点以及使用方法，鲜有对其文件目录或者源码进行分析，想要定制它首先需要一个准确的切入点。在研究了一轮其less文件的目录结构以后，我似乎找到了这个关键的切入点，遂写一篇分享，希望可以对bootstrap的使用者有一定的启发。（嫌麻烦的同学可以直接在 pikock.github.io/bootstrap-m… （貌似需要翻墙）进行可视化自定义，但是这个项目对应的bootstrap版本只到3.1，如果要使用最新版本（v3.3.5）的同学可能得考虑一下了。）

文件目录

这一大堆文件里面，我们打开less文件夹，可以看到

这里面就是整个bootstrap的样式文件目录了，首先我们找到关键的4个文件，它们分别是

bootstrap.less
复制代码

variables.less
复制代码

utilities.less
复制代码

mixins文件夹
复制代码

下面分析各个文件的作用。

bootstrap.less

bootstrap主文件，把所有的组件样式都放在一起了，编译出来后就是 bootstrap.css 文件了。它长这样：

不用再详细说明了吧，很直观，学过less的都懂……

variables.less

变量定义文件，里面定义了一大堆的变量，也就是各种颜色啊，大小啊，边距啊等等之类的东西，上面贴的那个[ pikock.github.io/bootstrap-m… ][6]其实修改的就是这里面的内容，而我们自定义bootstrap样式的操作主要也是在这里面进行。

嗯，很直观。

utilities.less

公共定义文件，也可以理解为公用的“动作”，因为它里面定义了诸如“左浮动”，“右浮动”之类的动作，任何html标签只要加上定义在此文件里面动作，就可以产生相应的效果。

比方说我想定义一个动作，能够让元素的z-index为某一个值，我只需要在里面写上

.high-index{
  z-index: 200;
}
.low-index{
  z-index: 0;
}
复制代码

然后在html标签里面直接使用 class="high-index" 即可。

mixins文件夹

里面的文件结构是这样的

看一下里面的内容

里面这样去定义：

.button-circle(){
  border-radius: 1000px;
}
复制代码

然后在 /less/button.less 里面加上这么一句：

.btn-circle{
  .buttom-circle();
}
复制代码

就可以了。以后只需要在html标签加入这个class就可以使用我们自己定义的 .btn-circle 效果，如 <button class="btn-circle"></button>