Bootstrap中定制LESS-颜色及导航条(推荐)

更新时间：2016年11月21日 15:54:59 作者：wangxuznb

这篇文章主要介绍了Bootstrap中定制LESS-颜色及导航条的相关资料，非常不错具有参考借鉴价值，感兴趣的朋友一起看看吧

主题色

在variables.less文件的开始，可以看到灰色及品牌色的默认变量及其值

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

我们可以直接进行替换，以涵盖我们所需的完整灰度空间

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

将品牌颜色改为金黄色：

@brand-primary: #c1ba62;

导航条颜色变量

在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;

会出现有关导航条的新特征。

以上所述是小编给大家介绍的Bootstrap中定制LESS-颜色及导航条，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

Javascript 对象（object）合并操作实例分析
这篇文章主要介绍了Javascript 对象（object）合并操作,结合实例形式分析了javascript基于jQuery的extend方法、对象属性、遍历赋值等操作实现对象合并相关操作技巧与使用注意事项,需要的朋友可以参考下
2019-07-07
js实现转动骰子模型
这篇文章主要为大家详细介绍了js实现转动骰子模型，自动随机生成骰子数的模型，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
JS中常用的输出方式(五种)
这篇文章主要介绍了JS中常用的输出方式(五种)的相关资料，非常不错具有参考借鉴价值,需要的朋友可以参考下
2016-06-06
javascript图片预加载实例分析
这篇文章主要介绍了javascript图片预加载的方法,实例分析了javascript实现图片预加载的方法与相关注意事项,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
JS实现的自定义map方法示例
这篇文章主要介绍了JS实现的自定义map方法,结合实例形式分析了javascript自定义map相关的json数组定义、遍历、添加、删除、读取等相关操作技巧,需要的朋友可以参考下
2019-05-05
fabric.js实现diy明信片功能
这篇文章主要为大家详细介绍了fabric.js实现diy明信片功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-03-03
Javascript和jquery在selenium的使用过程
这篇文章主要介绍了Javascript和jquery在selenium的使用过程,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-10-10
bootstrap网页框架的使用方法
这篇文章主要为大家详细介绍了bootstrap网页框架的使用方法，感兴趣的小伙伴们可以参考一下
2016-05-05
基于BootStrap栅格栏系统完成网站底部版权信息区
网站底部版权信息区可以用bootstrap的“栅格系统”完成，下面给大家分享一个未经处理的底部版权信息区的样式，大家可以做个参考
2016-12-12
javascript+css实现单击颜色褪去效果
javascript+css实现单击颜色褪去效果...
2007-08-08