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 ajax提交整个表单元素的快捷办法
Mar 27 Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 Javascript
使用js如何实现全选与全不选
Dec 30 Javascript
JavaScript获取路径设计源码
May 22 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
JS实现select选中option触发事件操作示例
Jul 13 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 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模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
Javascript面向对象之四 继承
2011/02/08 Javascript
自定义jQuery选项卡插件实例
2013/03/27 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
webpack4的迁移的使用方法
2018/05/25 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
详解Python多线程
2016/11/14 Python
python操作oracle的完整教程分享
2018/01/30 Python
详解Python字典小结
2018/10/20 Python
python中元组的用法整理
2020/06/15 Python
python线程里哪种模块比较适合
2020/08/02 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
运动会通讯稿100字
2014/01/31 职场文书
自我鉴定总结
2014/03/24 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
高中学生自我评价范文
2014/09/23 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
python中pymysql包操作数据库方法
2022/04/19 Python