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

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

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


文件目录

bootstrap3.x内less文件夹的文件内容及功能分析
这一大堆文件里面,我们打开less文件夹,可以看到
bootstrap3.x内less文件夹的文件内容及功能分析
这里面就是整个bootstrap的样式文件目录了,首先我们找到关键的4个文件,它们分别是

bootstrap.less
variables.less
utilities.less
mixins文件夹

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


bootstrap.less

bootstrap主文件,把所有的组件样式都放在一起了,编译出来后就是bootstrap.css文件了。它长这样:
bootstrap3.x内less文件夹的文件内容及功能分析
不用再详细说明了吧,很直观,学过less的都懂……

variables.less

变量定义文件,里面定义了一大堆的变量,也就是各种颜色啊,大小啊,边距啊等等之类的东西,上面贴的那个http://pikock.github.io/bootstrap-magic/其实修改的就是这里面的内容,而我们自定义bootstrap样式的操作主要也是在这里面进行。
bootstrap3.x内less文件夹的文件内容及功能分析
嗯,很直观。

utilities.less

公共定义文件,也可以理解为公用的“动作”,因为它里面定义了诸如“左浮动”,“右浮动”之类的动作,任何html标签只要加上定义在此文件里面动作,就可以产生相应的效果。
bootstrap3.x内less文件夹的文件内容及功能分析
比方说我想定义一个动作,能够让元素的z-index为某一个值,我只需要在里面写上

.high-index{
  z-index: 200;
}
.low-index{
  z-index: 0;
}

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

mixins文件夹

里面的文件结构是这样的
bootstrap3.x内less文件夹的文件内容及功能分析
里面的不同文件定义了组件的具体样式,我们打开其中的button.less看一下里面的内容
bootstrap3.x内less文件夹的文件内容及功能分析
再看一下在上一级文件夹也就是less文件夹里面的button.less
bootstrap3.x内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!

相关推荐