bootstrap进行网页配色过程

以企业网站颜色：蓝、红、灰，为例

（1）打开

variables.less

，

（2）灰色变量覆盖范围，安装需求进行修改

@gray-base:              #000;
@gray-darker:            lighten(@gray-base, 13.5%); // #222
@gray-dark:              lighten(@gray-base, 20%);   // #333
@gray:                   lighten(@gray-base, 33.5%); // #555
@gray-light:             lighten(@gray-base, 46.7%); // #777
@gray-lighter:           lighten(@gray-base, 93.5%); // #eee

（3）在灰色下面，添加网页品牌色

@brand-success:         #5cb85c;
@brand-feature:         #ff0;

（4）调整链接的悬停颜色，

//** Global textual link color.
@link-color:            @brand-primary;
//** Link hover color set via `darken()` function.
@link-hover-color:      darken(@link-color, 15%);
//** Link hover decoration.
@link-hover-decoration: underline;

设置好颜色值以后，就可以进行网页的调整了。

假如：

反转导航条颜色设置，反转链接和文本颜色，即

.navbar-inverse

,在

variables.less

中搜索

@navbar-inverse

即可修改。

调用，直接把导航条的类名写成

@navbar-inverse

也可，当有特定需求是，考虑响应式

@media (min-width: @grid-float-breakpoint) {
.navbar-default {
.navbar-inversi();即可
}
}