<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>
<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>
.navbar-custom {
background-color: #ff5500;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #ffffff;
}
/* change the link color and padding */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
padding: .75rem 1rem;
}
/* change the color and background color of active links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #ffffff;
background-color: #333;
}
13 回答
例如,试试这样
navabr.css
The default major color uses are as below:
Navbar背景:#F8F8F8
Navbar Border:#E7E7E7
默认颜色:#777
导航品牌悬停颜色:#5E5E5E
悬停颜色:#333
活动背景:#D5D5D5
活动颜色:#555
你可以了解更多http://fellowtuts.com/twitter-bootstrap/to-change-navbar-color-in-twitter-bootstrap-3/
只需在html导航栏中添加一个id,例如:
使用此ID,您可以设置导航栏颜色的样式,还可以设置链接和下拉列表的样式
应用于不同类型导航栏的示例
Black
Yellow
Darkblue
Red (Cherry)
Darkgreen
这是CSS
25+ Bootstrap Nav Menus Code
在此导航栏CSS中,设置为自己的颜色:
可用的导航栏
你有两个基本的导航栏:
默认颜色用法
以下是主要颜色及其用法:
#F8F8F8
:导航栏背景#E7E7E7
:导航栏边框#777
:默认颜色#333
:悬停颜色(#5E5E5E
表示.nav-brand
)#555
:活跃的颜色#D5D5D5
:活跃的背景默认样式
如果你想要一些自定义样式,这里是你需要改变的CSS:
自定义彩色导航栏示例
以下是自定义彩色导航栏的四个示例:
JSFiddle link
和SCSS代码:
最后,一个小小的礼物
我刚刚制作了一个脚本,可以让你生成你的主题: TWBSColor - Generate your own Bootstrap navbar
[更新]:TWBSColor现在生成SCSS / SASS / Less / CSS代码 .
[更新]:从现在开始,您可以使用Less作为TWBSColor提供的默认语言
[更新]:TWBSColor现在支持下拉菜单着色
[更新]:TWBSColor现在允许选择你的版本(添加了Bootstrap 4支持)
如果它只是改变Navbar的颜色我的建议是使用:Bootstrap Magic . 您可以更改导航栏的不同属性的值并查看预览 . 将结果下载为自定义CSS样式表或LESS变量文件 . 您可以使用输入字段和颜色选择器更改值 . ÿ
我花了一段时间,但我发现包含以下内容的原因是可以更改导航栏颜色:
使用更少
您还可以考虑编译自己的版本 . 尝试http://getbootstrap.com/customize/(其中包含导航栏设置的分隔部分(默认导航栏和反向导航栏))或从https://github.com/twbs/bootstrap下载您自己的副本 .
您将在
variables.less
中找到导航栏设置 .navbar.less
用于编译导航栏(取决于variables.less
和mixins.less
) .复制'navbar-default section'并填写您自己的颜色设置 . 更改
variables.less
中的变量将是最简单的方法(更改默认或反向导航栏不会有问题,因为您每页只有一个导航栏) .在大多数情况下,您不会更改所有设置:
你也可以试试http://twitterbootstrap3navbars.w3masters.nl/ . 此工具为您的自定义导航栏生成CSS代码 . 或者,您也可以向导航栏添加渐变颜色和边框 .
在twittter bootstrap中提及的逆和defult类名称会导致它们的黑白颜色 . 更好的是你不应该覆盖它并在其附近添加一个类,并为此写出特定的样式
像这样 . 谢谢 .
Updated 2018 for Bootstrap 4
在Bootstrap 4中更改导航栏颜色是不同的(并且更容易一些) . 您可以创建自定义导航栏类,然后引用它以更改导航栏而不影响其他Bootstrap导航 .
Bootstrap 4.0
在Bootstrap 4中更改Navbar所需的CSS要少得多......
Bootstrap 4 Custom Navbar Demo
更改活动/悬停链接 background color 也适用于相同的CSS,但如果希望bg颜色填充链接的整个高度,则必须调整填充...
py-0
从整个导航栏中删除垂直填充...<nav class="navbar navbar-expand-sm navbar-custom py-0">..</nav>
Bootstrap 4 Change Link and Background Color Demo
另见:Bootstrap 4 Change Hamburger Toggler Color
Bootstrap 3
Custom Navbar Demo on Bootply
如果Navbar有下拉列表,请添加以下内容以更改下拉颜色:
Demo with Dropdown
它可以直接使用 style=" " 属性来完成你要覆盖它的任何html标签,例如 .
这会覆盖bootstrap的默认CSS .
无需单独定义完整的样式集或CSS .
试试这个 . 这对我有用 .
你必须直接改变CSS吗?关于什么...