[微擎]更改微擎后台顶部导航配色
2016-04-30 16:00
751 查看
首先是感谢微擎团队搞出的这一套成熟易用的框架。
现在微擎默认的后台顶部导航栏的配色是:
反正我是觉得很难很难看清楚,于是我在\pbh\web\resource\css\common.css的最后添加了如下抄过来的CSS样式:
变成下面这种, 我感觉容易看清楚点:
现在微擎默认的后台顶部导航栏的配色是:
反正我是觉得很难很难看清楚,于是我在\pbh\web\resource\css\common.css的最后添加了如下抄过来的CSS样式:
/*顶部导航改色*/ .navbar-inverse { background-color: #008cba; border-color: #006687; } .navbar-inverse .navbar-brand { color: #ffffff; } .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus { color: #ffffff; background-color: transparent; } .navbar-inverse .navbar-text { color: #ffffff; } .navbar-inverse .navbar-nav > li > a { color: #ffffff; } .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { color: #ffffff; background-color: #006687; } .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus { color: #ffffff; background-color: #006687; } .navbar-inverse .navbar-nav > .disabled > a, .navbar-inverse .navbar-nav > .disabled > a:hover, .navbar-inverse .navbar-nav > .disabled > a:focus { color: #444444; background-color: transparent; } .navbar-inverse .navbar-toggle { border-color: transparent; } .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background-color: transparent; } .navbar-inverse .navbar-toggle .icon-bar { background-color: #ffffff; } .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: #007196; } .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus { background-color: #006687; color: #ffffff; } @media (max-width: 767px) { .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header { border-color: #006687; } .navbar-inverse .navbar-nav .open .dropdown-menu .divider { background-color: #006687; } .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: #ffffff; } .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { color: #ffffff; background-color: #006687; } .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus { color: #ffffff; background-color: #006687; } .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus { color: #444444; background-color: transparent; } } .navbar-inverse .navbar-link { color: #ffffff; } .navbar-inverse .navbar-link:hover { color: #ffffff; } .navbar-inverse .btn-link { color: #ffffff; } .navbar-inverse .btn-link:hover, .navbar-inverse .btn-link:focus { color: #ffffff; } .navbar-inverse .btn-link[disabled]:hover, fieldset[disabled] .navbar-inverse .btn-link:hover, .navbar-inverse .btn-link[disabled]:focus, fieldset[disabled] .navbar-inverse .btn-link:focus { color: #444444; }
变成下面这种, 我感觉容易看清楚点:
相关文章推荐
- bootstrap初试进度条
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- 如何做到日消息量100万的微信公众号?
- angular 指令简述
- C#开发微信公众号接口开发
- .NET微信公众号开发之公众号消息处理
- Bootstrap表单组件教程详解
- Bootstrap每天必学之前端开发框架
- Bootstrap 粘页脚效果
- JS组件中bootstrap multiselect两大组件较量
- 基于Bootstrap的网页设计实例
- BootStrap实用代码片段之一
- JS组件Bootstrap dropdown组件扩展hover事件
- JS组件Bootstrap Select2使用方法详解
- Bootstrap每天必学之弹出框(Popover)插件
- 精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
- Bootstrap入门书籍之(五)导航条、分页导航
- 全面解析Bootstrap手风琴效果
- JS组件Bootstrap Table表格行拖拽效果实现代码
- Bootstrap每天必学之按钮