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;
}
}

时间: 2024-11-05 18:55:50

Bootstrap 更改Navbar默认样式的相关文章

更改BootStrap popover的默认样式

1 .popover { 2 position: absolute; 3 top: 0; 4 left: 0; 5 z-index: 1060; 6 display: none; 7 max-width: 276px; 8 padding: 1px; 9 font-size: 14px; 10 font-weight: 400; 11 line-height: 1.42857143; 12 text-align: left; 13 white-space: normal; 14 backgrou

自定义 Word 默认的 Normal.dotm 模板、更改 Word 默认字体、更改 Word 默认样式(16)

1. 引言 以Office 2016为例. 有没有遇见这样的问题: 每次新建一个 Word 空白文档打开后字体默认是等线,段落默认是单倍行距,默认标题也不是自己想要的样式,等一系列问题.每次打开都要调整,非常的麻烦,如何让新建的空白文档默认是自己想要的样式呢? 其实,上边的这些默认样式,是安装 Office 后,软件自动建立了一个 Normal.dotm 的模板,每次新建 Word 都是以这个模板样式为基础的.如果我们把这个模板改成自己想要的样式,那么每次新建的 Word 样式就是自己想要的了.

修改Bootstrap的一些默认样式

有些时候bootstrap的展示不能满足自己的需要,可以手动加一些样式来控制展示 一个input有两个label左边一个,右边一个.control-label默认是右对齐的,放在左边是没问题,如果放在右边就会出现离input框很远,可以手动加一个style="text-align: left;" 来控制他强制左对齐 <div class="row">     <label for="id_handler_id_display" 

bootstrap对HTML标签的默认样式有哪些修改?

CSS Reset:重新设置HTML标签的默认样式. (1)重设了盒子模型的计算方法 * { box-sizing: border-box; } (2)重设了所有元素的默认字体 14px/1.42857143 "Helvetica Neue" (3)body { margin: 0; color: #333; background-color: #fff;} (4)h1~h6 { font-size: xxpx; margin-top: 20px/10px; margin-botton

如何更改 iOS 和安卓浏览器上的 input[type=&quot;radio&quot;] 元素的默认样式?

Safari 上的默认样式是这样的, 背景颜色可以使用background-color改变,但中间那个点始终无法去掉. 我查了一些jQuery插件,如iCheck.js,但是那说明写得我都看不明白,根本不知道如何使用. 还有-webkit-appearance:none;属性会直接将input[type="radio"]元素隐藏. 应该如何更改?我的目标只是一个选中时是纯色的圆形,未选中时是带边框的透明圆形. 还可用css伪类写 <h3>CSS3 Custom radio&

如何在PeopleSoft中找到并更改默认样式表名称

PeopleSoft的默认样式表名称是用来控制应用程序的外观的.在PeopleSoft中可以使用集中样式表来更改应用程序的外观,oracle为每个应用程序版本设置了默认的样式表. 下面是不同应用程序版本对应的默认样式表. 9.0或更早版本~PSSTYLEDEF 9.1~PSSTYLEDEF_SWAN 9.2~PSSTYLEDEF_TANGERINE 查找当前版本使用的默认样式表 1.路径:主菜单>PeopleTools>实用程序>管理>PeopleTools选项 找到默认样式表名称

微信小程序——button, swiper等默认样式更改

微信开发工具里面,无法展示编译后的一些样式,如::before,::after这些伪类.有时候我们需要修改一些组件的默认样式会略感到麻烦,因为不知道是通过哪里控制的. 我就平常遇到的一些修改默认样式,做一下汇总,不定期更新: 1.button的背景色,边框,圆角: button{ background-color: transparent; } button::after { border: 0; border-radius:0 } 2.swiper 的点的位置: .wx-swiper-dots

Bootstrap4默认样式不对胃口?教你使用NPM+Webpack+SASS来定制

Bootstrap 是一个流行的前端样式库,可以方便快速的构建应用,但默认样式可能不尽人意,本文就介绍如何使用 NPM, Webpack, SASS 针对它的源码来定制自己的主题.版本使用的是 Bootstrap v4.3.1. 本文提供了一个使用此方式编写的一个后台管理模板 Dunwoo Admin,文末有获取源码的方式. 安装 Node.js Webpack 是对前端资源进行打包和编译的工具,它依赖于 Node.js,首先介绍下如何配置和安装绿色版的 Node.js. 下载绿色版本:http

浏览器默认样式及reset

写在前面 首先纠正一个易错概念.div并非生来就是块元素,而是每个浏览器都有一套默认的css样式(优先级最低),默认样式里会把div设置成display: block;还有margin,padding等.这就是不同浏览器初始化样式不同的原因.也是为什么要做css reset的原因. 注:chrome等可以在调试工具里看到默认样式,是不可修改的,置灰的,如下图.各浏览器默认样式详情请参考<浏览器默认样式对比表>. 1.浏览器默认样式 这里无需过多赘述,最直观的就是上表,给大家几个地址: 1.浏览