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


Posted in Javascript onNovember 21, 2016

 主题色

在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 相关文章推荐
jquery复选框CHECKBOX全选、反选
Aug 30 Javascript
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
详解javascript事件冒泡
Jan 09 Javascript
JS验证不重复验证码
Feb 10 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 #Javascript
详解js中call与apply关键字的作用
Nov 21 #Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 #Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 #Javascript
全面解析node 表单的图片上传
Nov 21 #Javascript
利用fecha进行JS日期处理
Nov 21 #Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 #Javascript
You might like
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
php 邮件发送问题解决
2014/03/22 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
jQuery的框架介绍
2016/05/11 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
python3中property使用方法详解
2019/04/23 Python
python反编译学习之字节码详解
2019/05/19 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
Python之Class&Object用法详解
2019/12/25 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
C语言开发工程师测试题
2016/12/20 面试题
新闻编辑自荐信
2013/11/03 职场文书
实习教师自我鉴定
2013/12/09 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
护士个人年度总结范文
2015/02/13 职场文书
银行自荐信怎么写
2015/03/05 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers