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();即可
    }
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值