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 相关文章推荐
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
Angular2安装angular-cli
May 21 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
Vue 进阶之路(三)
Apr 18 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 Javascript
JS实现拖动模糊框特效
Aug 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学习教程之第2天
2008/06/15 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
PHP积分兑换接口实例
2015/02/09 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
python daemon守护进程实现
2016/08/27 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
python wsgiref源码解析
2021/02/06 Python
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
2015年团支书工作总结
2015/04/03 职场文书
家庭经济困难证明
2015/06/23 职场文书
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis