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 相关文章推荐
关于javascript document.createDocumentFragment()
Apr 04 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
jQuery实现简单二级下拉菜单
Apr 12 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
jQuery实现的简单提示信息插件
Dec 08 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
使用Vue实现简单计算器
Feb 25 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中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
JavaScript 序列化对象实现代码
2009/12/18 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
python实现银行管理系统
2019/10/25 Python
python离线安装外部依赖包的实现
2020/02/13 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
八年级英语教学反思
2014/01/09 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
校园文明标语
2014/06/13 职场文书
个人租房协议书
2014/11/28 职场文书
Oracle笔记
2021/04/05 Oracle