Analysis of file contents and functions of less folder in bootstrap3.x

  bootstrap, less

Bootstrap’s name must have been heard by all front-end developers and will not be repeated here. You can find out more here:
http://www.bootcss.com/

First of all, talk about why you want to write this article. In the company’s recent project, we are required to use bootstrap to reconstruct the style. However, we have our own set of UIkit. If the style is directly written in css, it is very painful and the development cost is huge. Because of this, the idea of rewriting bootstrap source code came into being. However, it is not easy to change the source code. There are a lot of materials on bootstrap in the market, but they are basically introducing its advantages and usage methods. There is little analysis on its file directory or source code. To customize it, you need an accurate entry point first. After studying the directory structure of its less files for a round, I seem to have found this key entry point, so I wrote an article to share it, hoping to give some inspiration to bootstrap users. (Students who are too troublesome can go directly tohttp://pikock.github.io/bootstrap-magic/(Seemingly needs to climb over the wall) for visual customization, but the bootstrap version corresponding to this project is only 3.1. Students who want to use the latest version (v3.3.5) may have to consider it. )


file directory

图片描述
In this pile of files, we open the less folder and can see
图片描述
This is the entire bootstrap style file directory. First, we found the key 4 files, which are

bootstrap.less
variables.less
utilities.less
Mixins folder

The function of each file is analyzed below.


bootstrap.less

Bootstrap main file, put all the component styles together, compiled isbootstrap.cssThe file is now available. It looks like this:
图片描述
Don’t need to explain in detail, it is very intuitive, everyone who has learned less knows …

variables.less

Variable definition file, which defines a lot of variables, that is, all kinds of colors, sizes, margins and so on, the one posted abovehttp://pikock.github.io/bootstrap-magic/In fact, what was modified was the content inside, and our custom bootstrap style operation was mainly carried out here.
图片描述
Well, it’s intuitive.

utilities.less

A common definition file can also be understood as a common “action” because it defines actions such as “left floating” and “right floating”. Any html tag that adds actions defined in this file can produce corresponding effects.
图片描述
For example, I want to define an action that allows the z-index of an element to be a certain value. I just need to write it in it

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

Then use it directly in html tagsclass="high-index"Just.

Mixins folder

The file structure inside is like this
图片描述
The different files inside define the specific styles of the components, and we open thebutton.lessLook at the contents
图片描述
Look at the folder at the next higher level, that islessInside the folderbutton.less
图片描述
You can see that the styles in it are all quoted from/minxins/button.lessThe style defined. If we want to add a “big round button” style, we can/minxins/button.lessIn this way to define:

.button-circle(){
 border-radius: 1000px;
 }

And then in/less/button.lessAdd this sentence inside:

.btn-circle{
 .buttom-circle();
 }

Just do it. In the future, we can use our own definition only by adding this class to the html tag..btn-circleEffects such as<button class="btn-circle"></button>


Summary

After the above analysis, I believe everyone has understood the function of different files in bootstrap’s less folder, and can happily customize their bootstrap! However, since bootstrap4.0 has been put into the scss camp, it needs to be judged by itself in 4.0. However, its basic logic should not change much and needs to be analyzed on a case-by-case basis.

Thanks for reading, see ya next time!