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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
JavaScript 自动完成脚本整理(33个)
Oct 20 Javascript
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
jQuery登陆判断简单实现代码
Apr 21 Javascript
javascript引用类型指针的工作方式
Apr 13 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
Vue项目分环境打包的实现步骤
Apr 02 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 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对象转换为数组函数(递归方法)
2012/02/04 PHP
php长字符串定义方法
2012/07/12 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
用Python实现随机森林算法的示例
2017/08/24 Python
python九九乘法表的实例
2017/09/26 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
详解Python中is和==的区别
2019/03/21 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
python字典排序的方法
2019/10/12 Python
python GUI库图形界面开发之PyQt5计数器控件QSpinBox详细使用方法与实例
2020/02/28 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
优秀实习自我鉴定
2013/12/04 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
青年教师培训方案
2014/02/06 职场文书
高中毕业自我评价
2014/02/08 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
董事长秘书工作职责
2014/06/10 职场文书
学校搬迁方案
2014/06/15 职场文书