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 相关文章推荐
关于可运行代码无法正常执行的使用说明
May 13 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
小程序实现搜索框
Jun 19 Javascript
小程序调用微信支付的方法
Sep 26 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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
PHP中的extract的作用分析
2008/04/09 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
php二维数组转成字符串示例
2014/02/17 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
10个php函数实用却不常见
2015/10/13 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
vue实现户籍管理系统
2020/05/29 Javascript
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
Python实现注册、登录小程序功能
2018/09/21 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
python实现大学人员管理系统
2019/10/25 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
夜不归宿检讨书
2014/02/25 职场文书
js基础语法与maven项目配置教程案例
2021/07/15 Javascript
MySQL 服务和数据库管理
2021/11/11 MySQL
java版 简单三子棋游戏
2022/05/04 Java/Android
Nginx安装配置详解
2022/06/25 Servers
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS