Bootstrap custom less-color and navigation bar (recommended) _javascript tips

Theme Colors

At the beginning of the variables.less file, you can see the default variables and their values for the gray and brand colors

@gray-darker:lighten (#000, 13.5%);//#222
@gray-dark

We can replace it directly to cover the full gray space we need.

@gray-darker: #222;
@gray-dark: #454545;
@gray: #777;
@gray-light: #aeaeae;
@gray-lighter: #ccc
@gray-lightest: #ededed
@offwhite: #fafafa;

Change the brand color to golden brown:

@brand-primary: #c1ba62;

Navigation bar Color Variable

Modify the following values in Variables.less:

@navbar-height:64px;
@navbar-margin-bottom:0; Was @line-height-computed ...
@navbar-default-color: @gray;
@navbar-DEFAULT-BG: #fff;
@navbar-default-border: @gray-light; Darken (@navbar-default-bg, 9.5%);
...
Navbar links
@navbar-default-link-color: @navbar-default-color;
@navbar-default-link-hover-color: @link-hover-color;
@navbar-DEFAULT-LINK-HOVER-BG: @off-white;
@navbar-default-link-active-color: @link-hover-color;
@navbar-DEFAULT-LINK-ACTIVE-BG: @gray-lightest;
@navbar-default-link-disabled-color: @gray-lighter;
@navbar-default-link-disabled-bg:transparent;

New features about the navigation bar appear.

The above is a small set to introduce bootstrap custom less-color and navigation, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!