How to more efficiently customize your bootstrap

Bootstrap has become one of the indispensable frameworks for front-end development. Applying bootstrap makes it easy to set the layout and style. However, the default styles provided by bootstrap often fail to meet our needs. Therefore, customized bootstrap becomes a common task. This article will discuss how to customize bootstrap more efficiently and effectively.

 

For example, if you add bootstrap class: btn-primary to your button, you can change the default button (left) to the right style.

But what if we want to apply our own style? For example, we want a button with rounded corners.

In general, we can directly overwrite the bootstrap style.

Create the my-custom.css file in the current project directory and add the following code:

.btn {   -webkit-border-radius: 20px;   -moz-border-radius: 20px;   border-radius: 20px;}

 

Add the my-custom.css file to the end of the bootstrap.css file, and the btn style we define will overwrite the original style (Note: 'overwrite' here refers to incremental overlay ).

<link rel="stylesheet" href="boostrap.css"><link rel="stylesheet" href="my-custom.css">

 

However, this method has its advantages and disadvantages,

Advantage: it will not change your workflow. You can quickly and directly modify your styles. Even if your website references other bootstrap-like framework styles, you can perform unified customization in the same place.

Disadvantages: But for more thorough modifications (such as re-designing the navigation bar) or non-local modifications (such as modifications that apply to the highlighted color of the entire website, the coverage style of the West is more like a patch-based solution. In addition, you need to add your new style to the default Bootstrap style table, which makes the 100 KB file more bloated. If you don't just want to do some coverage, you need to consider a more scalable method.

Another method is to generate a custom build bootstrap.

You can use the official builder to customize the style variables in bootstrap. As shown in:

Bootstrap is based on less customization, if you are not familiar with the less syntax, it is recommended to go to its official website (http://lesscss.org/) to learn, very simple, understand and learn to use it does not take long.

After you have customized your variables, click the download button to generate a set of your bootstrap framework. At the same time, there are many websites similar to custom bootstrap on the Internet. If you are not familiar with the official website, you can try it on other websites. For example, the Bootswatchr website uses variables to organize and StyleBootstrap uses components. BootTheme adds the dice throwing feature to randomly set the value. If Goddess lucky is not on your side, Lavish can generate a topic based on any images you provide. paint.pdf is generated based on the existing color scheme.

Of course, this method also has its advantages and disadvantages,

Advantage: compared with the previous method, it simplifies your modifications to the overall website.

Disadvantages: first, it is difficult for you to determine all the style styles of the website from the very beginning. Of course, you can generate a final version after you confirm it. This introduces a problem. If you want to change your style from time to time, you also need to find the bootstrap style source file editing. You may need to use the first method, for example, if I want to use a shadow button with rounded corners, the light customization cannot meet my needs. In addition, if we are faced with the issue of bootstrap upgrade, you also need to re-build a new version of bootstrap based on your style. It will be very troublesome to do so.

The last method is in-depth customization of bootstrap less

First, obtain the source code of bootstrap,

Open the source code and you will find that the Bootstrap style is written in LESS instead of CSS. LESS is a dynamic style table language. Compared with CSS, it supports multiple excellent features, including selector nesting and variable creation (as used in the above generator ). Once written, you can choose to compile LESS code into CSS in advance or at runtime. If you like Sass, you can use the Bootstrap for Sass.

In the less folder, you will see manyBy component.

Open the bootstrap. less file to see what is written in it:

View Code

 

For example, bootstrapis a fully compiled bootstrap.lessfile to generate the entire bootstrap.css file. We can see that bootstrap. less only serves to introduce other files. In this way, our customized work is easy.

Note the following files:

Bootstrap. less:

This is the core file. It is used to introduce other files and you will compile it.

Reset. less:

Always the first file to be introduced.

Variables. less and mixins. less:

These two files always appear at the same time, because other files depend on them. The previous file contains the same variables used on the builder website.

Utilities. less

This file is always introduced at the end. You can write the class to be overwritten here.

Complete.

The following describes the specific implementation methods.

Make sure that you have installed Less. To prevent the modified content from overlap with the original file, we needModular modification.

First, download the bootstrap source code. You do not need to make any changes to it after the download. Create a separate folder (as long as the file directory can be referenced to the less file of bootstrap) and name it custom-bootstrap, which contains the following three files:

Custom-variables.less:

This file contains the variables you want to customize.

Custom-other.less:

This file contains content that cannot be customized by modifying variables, such as adding or disabling the text-shandow attribute of the button.

Custom-bootstrap.less

This is the new "core" file. We will compile it into CSS. Like the original LESS file, it uses the following command to introduce the above two custom files (remember to ensure the correct reference order of the files)

1 @ import ".. /bootstrap/less/bootstrap. less "; // this reference to the original bootstrap file 2 @ import" custom-variables.less "; 3 @ import" custom-other.less "; 4 @ import ".. /bootstrap/less/utilities. less "; // we also need to reference the native utilities. less, because we need to ensure that the last file is always imported

 

At this point, we only need to compile the custom-bootstrap.less.

There are some need to note that the custom-variables.less does not need to copy all the content of the original file, just need to copy and you want to customize the component related variables can be, if you do so, compiling the custom-variables.less or custom-other.less separately will prompt errors that lack variable definitions, but it doesn't matter, you just have to ensure compilationCustom-bootstrap.lessNo errors.

 

The advantage of this method is that the custom changes are well isolated from the original library code, but the maintainability is not lost. Even if we upgrade the bootstrap version in the future, we should not worry about rebuilding the style framework.

 

Written at the end:

Note that you need to understand how bootstrap organizes code and how to write Less efficiently.

The following articles may help you:

CSS Frameworks + CSS Reset: Design From Scratch

Challenging CSS Best Practices

An Introduction To Object Oriented CSS (OOCSS)

 

Reference: http://coding.smashingmagazine.com/2013/03/12/customizing-bootstrap/