Bootstrap customization (1) less getting started and compilation, bootstrapless

Bootstrap customization (1) less getting started and compilation, bootstrapless

The first blog, hope to support it.

 

Recently, a project is being developed. The project's front-end is located in bootstrap. It took a little time to study bootstrap, sort it out, and share it with everyone.

 

The official bootstrap customization function is still complete, but the web-based service makes nothing to do before refreshing the webpage. Similarly, there are many other custom websites with similar form functions.

 

 

 

The customization of the web end is decisively abandoned. The following is the bootstrap source code. bootstrap is developed based on the less preprocessing language, but the sass version is transplanted to facilitate sass users.

The difference between less and sass can be understood.

 

This article takes less as an example. Okay, download the less source code.

 

Decompress the source code package.

The directory structure is as follows.

The docs-bootstrap document contains some examples of bootstrap.

Fonts-font files and Icon files.

Js-bootstrap Each plug-in encapsulates js.

Dist-release package.

 

Okay. Today we are talking about less customization.

Open the less directory. The directory structure is as follows.

 

List several important less files.

Varibles. less-bootstrap all variables.

Themes. less-bootstrap topic.

Bootstarp. less-introduce all other less files and compile the file to form the final css.

Mixins. less-introduce the less file in the mixins folder (the file in the mixins file is based on the component file, which contains the less function of all components, the less reference functions of components in the main directory are all in the corresponding files under mixins)

Other less files correspond to the components on the bootstrap official website. If you have more information, you can customize them.

 

 

Okay. So far, if we haven't studied less in depth, should we study less syntax and compilation?

 

Less Official Website: http://www.lesscss.net/features/

 

It is not difficult for developers who have other programming experience to learn it. They can take some time to master it.

Next, we need to compile these less files. There are many online compilation websites, but there are no local compilation likes. There are also a lot of locally compiled software. Here we take kola as an example.

Http://koala-app.com/index-zh.html

After editing the less file, use koala to compile the bootstrap file. kola can be used in Baidu.

 

After compilation, this is the final file we need. Introduce project development.

 

Next article: less basic syntax, coming soon.

What is bootstrapcssmap used for this file?

This is the source map file.
Because bootstrap is written with less, less will be compiled into css and displayed on the page.
But there is a problem. The browser looks at the rows of css, And you edit less files, which is hard to match.
With source map, the browser displays less directly, which is very convenient.




Easyui bootstrap Problems

Introducing easyui and bootstrap files at the same time will cause page errors.

In addition, it is absolutely impossible to display two styles at the same time for an element.

If you think that both styles have something you want, you can only modify their CSS.