更改导航栏颜色在Twitter Bootstrap 3 [英] Change navbar color in Twitter Bootstrap 3
问题描述
我将如何修改CSS来改变Twitter Bootstrap 3中导航栏的颜色?
tl; dr -
[更新]:TWBSColor现在生成SCSS / SASS / LESS / CSS代码。
[更新]:从现在开始,您可以使用LESS作为TWBSColor提供的默认语言
[更新]:TWBSColor现在支持下拉菜单的着色
欢迎提出意见和建议。
How would I go about modifying the CSS to change the color of the navbar in Twitter Bootstrap 3?
解决方案tl;dr - TWBSColor - Generate your own Bootstrap navbar
Version notes:
- Online tool: Bootstrap 3.3.6 (maintained)
- 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
: navbar background#E7E7E7
: navbar border#777
: default color#333
: hover color (#5E5E5E
for.nav-brand
)#555
: active color#D5D5D5
: active backgroundDefault style
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 4 examples of custom colored navbar :
JSFiddle linkAnd the SCSS code :
$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; }}} }
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[Update] : TWBSColor now generate 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 colorizationComments, notices are welcome.
这篇关于更改导航栏颜色在Twitter Bootstrap 3的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!