在Twitter Bootstrap中更改导航栏颜色 [英] Change navbar color in Twitter Bootstrap
问题描述
我将如何修改CSS以更改Twitter Bootstrap中导航栏的颜色?
How would I go about modifying the CSS to change the color of the navbar in Twitter Bootstrap?
推荐答案
tl; dr- TWBSColor-生成自己的Bootstrap导航栏
tl;dr - TWBSColor - Generate your own Bootstrap navbar
版本注释: -在线工具:Bootstrap 3.3.2+/4.0.0+ -答案:Bootstrap 3.0.x
Version notes: - Online tool: Bootstrap 3.3.2+ / 4.0.0+ - This answer: Bootstrap 3.0.x
可用的导航栏
您有两个基本的导航栏:
Available navbars
You've got two basic navbars:
<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>
默认颜色使用情况
以下是主要颜色及其用法:
Default color usage
Here are the main colors and their usage:
-
#F8F8F8
:导航栏背景 -
#E7E7E7
:导航栏边框 -
#777
:默认颜色 -
#333
:悬停颜色(#5E5E5E
表示.nav-brand
) -
#555
:活动颜色 -
#D5D5D5
:活动背景
#F8F8F8
: navbar background#E7E7E7
: navbar border#777
: default color#333
: hover color (#5E5E5E
for.nav-brand
)#555
: active color#D5D5D5
: active background
如果要添加一些自定义样式,则需要更改以下CSS:
If you want to put some custom style, here's the CSS you need to change:
/* 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;
}
}
自定义彩色导航栏示例
以下是自定义彩色导航栏的四个示例:
Custom colored navbar examples
Here are four examples of a custom colored navbar:
以及SCSS代码:
$bgDefault : #e74c3c;
$bgHighlight : #c0392b;
$colDefault : #ecf0f1;
$colHighlight: #ffbbbc;
.navbar-default {
background-color: $bgDefault;
border-color: $bgHighlight;
.navbar-brand {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}
.navbar-text {
color: $colDefault; }
.navbar-nav {
> li {
> a {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}}
> .active {
> a, > a:hover, > a:focus {
color: $colHighlight;
background-color: $bgHighlight; }}
> .open {
> a, > a:hover, > a:focus {
color: $colHighlight;
background-color: $bgHighlight; }}}
.navbar-toggle {
border-color: $bgHighlight;
&:hover, &:focus {
background-color: $bgHighlight; }
.icon-bar {
background-color: $colDefault; }}
.navbar-collapse,
.navbar-form {
border-color: $colDefault; }
.navbar-link {
color: $colDefault;
&:hover {
color: $colHighlight; }}}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu {
> li > a {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}
> .active {
> a, > a:hover, > a:focus, {
color: $colHighlight;
background-color: $bgHighlight; }}}
}
最后是一点礼物
我刚刚制作了一个脚本,该脚本可让您生成主题: TWBSColor-生成您自己的Bootstrap导航栏
And finally, a little gift
I've just made a script which will allow you to generate your theme: TWBSColor - Generate your own Bootstrap navbar
[更新]:TWBSColor现在可以生成SCSS/SASS/更少/CSS代码.
[更新]:从现在开始,您可以将Less用作TWBSColor提供的默认语言
[更新]:TWBSColor现在支持下拉菜单着色
[更新]:TWBSColor现在允许选择您的版本(添加了对Bootstrap 4的支持)
[Update]: TWBSColor now generates SCSS/SASS/Less/CSS code.
[Update]: From now, you can use Less as the default language provided by TWBSColor
[Update]: TWBSColor now supports drop down menus colorization
[Update]: TWBSColor now allows to choose your version (Bootstrap 4 support added)
这篇关于在Twitter Bootstrap中更改导航栏颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!