Bootstrap 更改Navbar默认样式
alt+shift+n 新建文件
ctrl+shift+/ 注释
ctrl+shift+f 重新排版代码
ctrl+/ 注释
/* navbar */
.navbar-default {
background-color: #F8F8F8;
border-color: #E7E7E7;
}
/* title */
.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5E5E5E;
}
/* link */
.navbar-default .navbar-nav > li > a {
color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #333;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #555;
background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #555;
background-color: #D5D5D5;
}
/* caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #777;
border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #333;
border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #555;
border-bottom-color: #555;
}
/* mobile version */
.navbar-default .navbar-toggle {
border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #CCC;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #777;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #333;
}
}
转载于:https://www.cnblogs.com/cxf520/p/5737481.html
Bootstrap 更改Navbar默认样式相关推荐
- Bootstrap 表格的默认样式
只需为任意的 <table> 元素应用 .table 类,即可使用表格的默认样式.Bootstrap中表格的默认样式相当简单,它仅仅在每个 <td> 上方添加了一个边框.如: ...
- 修改Bootstrap的一些默认样式
有些时候bootstrap的展示不能满足自己的需要,可以手动加一些样式来控制展示 一个input有两个label左边一个,右边一个.control-label默认是右对齐的,放在左边是没问题,如果放在 ...
- 解决placeholder样式设置无效问题,更改placeholder默认样式颜色
错误示范: input::-webkit-input-placeholder, input:-moz-placeholder, input::-moz-placeholder, input:-ms-i ...
- elementui更改默认样式
更改tabs默认样式 .mytabs .el-tabs__item {font-size: 18px;}.mytabs .el-tabs__item:hover{color: #374795 !imp ...
- bootstrap之navbar样式
一.前言 现在开始介绍bootstrap的导航条(navbar)样式. 二.源码 1.navbar.less 1.1.navbar.less源码 //// Navbars// ------------ ...
- [css] css怎么更改表单的单选框或下拉框的默认样式?
[css] css怎么更改表单的单选框或下拉框的默认样式? 下拉框select可以通过appearance:none去除默认样式,然后进行自定义,但是option标签不能通过CSS自定义,所以最佳方案 ...
- Altium的原理图主题修改为Orcad的默认样式(Altium原理图样式更改)
Altium默认的封装看久了总感觉不如Orcad的舒服,PCB的3D理应花里胡哨,但原理图还是该走极简主义.下面通过一些修改,将Altium的原理图样式更改为与Orcad相同. 过程看起来略微复杂,但 ...
- 如何更改MindMapper中的默认样式
在MindMapper选项中,我们可以通过更改一些设置来定义我们的默认样式,更加贴合我我们平常绘制导图的需要.本文解析了MindMapper选项中的默认样式,教你怎样通过设置来更改导图的默认样式. 打 ...
- 更改checkbox的默认样式
更改checkbox的默认样式 原理: label 绑定 checkbox, 可以通过点击该label来触发该 checkbox,通过 labe l的 :after 或 :before伪类来修改样式 ...
- 利用jQuery和bootstrap更改radio样式
<div class="container body-content"><div class="row"><div class=& ...
最新文章
- R绘制排序的条形图(Ordered Bar Chart)
- boundingRect函数
- 学着造轮子-RxLifeCycle
- 线性表及其逻辑和存储结构(二级)
- 数据结构之树和二叉树的应用:二叉排序树(BST)
- mysql导出一行数据类型_MySQL 导出数据
- 小程序上传图片前将图片剪切成固定尺寸
- MOOC有效沟通技巧答案(全)
- 阴阳师1月服务器维护,《阴阳师》手游1月24日维护更新公告:新区「暖风春穗」集结开启!...
- GWAS数据分析流程—SNP、Indel提取
- 网易云--手机QQ的换肤是怎么做到的,你对换肤有了解吗?看过换肤的原理没?
- python计算abcd*4=dcba_abcd乘以4等于dcba的解答方法
- 前端中的icon几种用法
- Unity 工作经历+近期面试经历
- Python自动化测试(01)自动化测试环境搭建
- 数字化时代-16:生意人 商人 企业家 资本家 区别
- 太吾绘卷第一世攻略_太吾绘卷种田流图文攻略 太吾绘卷种田流建筑推荐
- c语言n次方怎么输入_C语言中10个经典的算法,学会它,利用它
- micripython手册_RTT MicroPython VS 官方原生MicroPython
- java大顶堆小顶堆使用案例
热门文章
- ecshop怎样在新主页模板里调用首页主广告
- Silverlight5 RC调用Win32API
- 153. Find Minimum in Rotated Sorted Array找其中的最小值
- html5指南--1.html5全局属性(html5 global attributes)
- 【翻译】优秀网站的10个技巧
- 最新的Functions 类
- Asp.net can do Native Code also can do it(updated)
- 树、图与二分图的转换
- POJ 3311 Hie with the Pie (状压DP)
- ★★★【加快】页面的【加载速度】,先减少图片请求★