以企业网站颜色:蓝、红、灰,为例
(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();即可
}
}