在 Twitter Bootstrap 中更改导航栏颜色 [英] Change navbar color in Twitter Bootstrap
问题描述
我将如何修改 CSS 以更改 Twitter Bootstrap 中导航栏的颜色?
tl;dr -
[更新]:TWBSColor 现在生成 SCSS/SASS/更少/CSS 代码.
[更新]:从现在起,您可以使用 Less 作为 TWBSColor 提供的默认语言
[更新]:TWBSColor 现在支持下拉菜单着色
[更新]:TWBSColor 现在允许选择您的版本(添加了 Bootstrap 4 支持)How would I go about modifying the CSS to change the color of the navbar in Twitter Bootstrap?
解决方案tl;dr - TWBSColor - Generate your own Bootstrap navbar
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
: 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 four examples of a custom colored navbar:
And 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 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屋!