Bootstrap4 tutorial on how to customize your own colors and styles

Bootstrap is the most popular CSS framework now. There are many websites and background management systems whose styles are designed based on Bootstrap. However, Bootstrap has always maintained the blue + light gray color tone, and the same is true for the latest Bootstrap 4. After watching it for a long time, it is inevitable to feel some aesthetic fatigue.

This article mainly introduces how to customize your own colors and styles in Bootstrap 4. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

How to modify the color theme of Bootstrap? This article teaches you how to customize Bootstrap 4 to make your page more unique.

0. Required tools

1. Node.js compilation

2. Bootstrap4, download Bootstrap Dependency package, you need to install Node.jsBootstrap4 on your computer. Source code modification to Boosttrap requires a copy of the source code. You can download the source code by visiting the official Bootstrap website (https://getbootstrap.com).

Some places may not be able to access the Bootstrap4 official website, so you can also visit the Bootstrap Chinese website to download the source code.

1. Customized color theme

In order to facilitate customization, Bootstrap has extracted some variables and placed them in the scss/_varaibles.scss file.

Open this file and you will find that there are a lot of configurations. Find this paragraph:

$primary:    $blue !default;
$secondary:   $gray-600 !default;
$success:    $green !default;
$info:     $cyan !default;
$warning:    $yellow !default;
$danger:    $red !default;
$light:     $gray-100 !default;
$dark:     $gray-800 !default;

This is where the basic tones of Bootstrap are configured. Modify these colors. value, you can make the website look completely different. In addition to the main color, there are many color-related variables that can be controlled, and the night color of the border of an input box can also be adjusted. You can try it slowly.

For example, if you modify these variables in _variables.scss:

$primary:    #e95420 !default;
$secondary:   #0e8420 !default;
$success:    #fff !default;
$light:     #e8cd56 !default;
$dark:     #e95420 !default;

$input-bg: #c34113;
$input-border-color: #c34113;
$input-placeholder-color: #ccc;
$input-color: #fff;

$jumbotron-bg: rgb(247, 247, 247);

, you will get a similar color style of the Ubuntu website:

2. Fine-tuning the appearance of the component

In addition to adjusting the color, _variables.scss also has many variables that can fine-tune the appearance of the Bootstrap component, such as:

$enable-shadows, control whether shadows are displayed around some pop-up components

$enable-rounded, control components (Buttons, input boxes, drop-down boxes, etc.) are displayed as rounded corners

##$enable-gradients, and whether the background of the control component displays weak Gradient effect

#There are many variables controlled by this, so I won’t list them one by one.

4. Compile Bootstrap

After modifying the variables, how to generate your own Bootstrap CSS file? Requires compilation with npm.

Before compiling, you need to download various dependency packages, which can be done through the install command:

npm install

Tips: Node.js downloads dependency packages from the npm official website by default, which may be slower. It is recommended to download from Taobao NPM mirror, which is very fast:

Execute first

npm install -g cnpm --registry=https://registry.npm.taobao.org

Then wherever the npm command is used, you can use cnpm instead

After downloading the dependencies, execute the compilation:

npm run dist

Wait a moment After a while, the compiled css file will appear in the dist/css/ directory and can be copied to your project for use!

5. Customize Bootstrap in the Webpack project

The above content is all about customizing Bootstrap4 by compiling source code. What should I do if I want to customize Bootstrap4 in my Webpack project?

It is not appropriate to directly modify the Bootstrap source code in node_modules. The officially recommended way is to create a new custom.scss file in the project and write the variables you want to modify in it:

// 如果想修改 _variables.scss 中的变量，请写在这里
$primary:    #e95420 !default;
$secondary:   #0e8420 !default;
...
// 文件末尾请这样引入 Bootstrap 的源码
@import "~bootstrap/scss/bootstrap";

Then when compiling Webpack, put custom .scss is also added to the list of compiled files. This requires modifying the webpack.config.js configuration in the project.

So, how to write webpack.config.js?

The answer is in the official documentation of Boostrap4, you can read it yourself. You can also sponsor me for 1 yuan through this WeChat ID, and I will tell you the answer directly. Thank you everyone, your support is the motivation for me to continue sharing! :-)

Related recommendations:

bootstrap4 source code reading experience_html/css_WEB-ITnose

The above is the detailed content of Bootstrap4 tutorial on how to customize your own colors and styles. For more information, please follow other related articles on the PHP Chinese website!