更改TwitterBootstrap中的导航条颜色

Question

更改TwitterBootstrap中的导航条颜色

我将如何修改CSS以更改Twitter引导中的导航条的颜色？

Answer 1

-TWBSColor-生成您自己的引导导航条版本说明：-在线工具：引导3.3.2+/4.0.0+-这个答案：引导3.0.x可用肚脐你有两个基本的肚脐：<!--&nbsp;A&nbsp;light&nbsp;one&nbsp;--><nav&nbsp;class="navbar&nbsp;navbar-default"&nbsp;role="navigation"></nav><!--&nbsp;A&nbsp;dark&nbsp;one&nbsp;--><nav&nbsp;class="navbar&nbsp;navbar-inverse"&nbsp; role="navigation"></nav>默认颜色用法以下是主要颜色及其用法：#F8F8F8*肚脐背景#E7E7E7*肚脐边界#777*默认颜色#333悬停颜色(#5E5E5E为.nav-brand)#555*活动颜色#D5D5D5*活动背景默认样式如果您想要放置一些自定义样式，下面是您需要更改的CSS：/*&nbsp;navbar&nbsp;*/.navbar-default&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#F8F8F8; &nbsp;&nbsp;&nbsp;&nbsp;border-color:&nbsp;#E7E7E7;}/*&nbsp;Title&nbsp;*/.navbar-default&nbsp;.navbar-brand&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;#777;}.navbar-default&nbsp;.navbar-brand:hover,.navbar-default&nbsp;.navbar-brand:focus&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;#5E5E5E;}/*&nbsp;Link&nbsp;*/.navbar-default&nbsp;.navbar-nav&nbsp;>&nbsp;li&nbsp;>&nbsp;a&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;#777;}.navbar-default&nbsp;.navbar-nav&nbsp;>&nbsp;li&nbsp;>&nbsp;a:hover,.navbar-default&nbsp;.navbar-nav&nbsp;>&nbsp;li&nbsp;>&nbsp;a:focus&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;#333;}.navbar-default&nbsp;.navbar-nav&nbsp;>&nbsp;.active&nbsp;>&nbsp;a,.navbar-default&nbsp;.navbar-nav&nbsp;>&nbsp;.active&nbsp;>&nbsp;a:hover,.navbar-default&nbsp;.navbar-nav&nbsp;>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;.active&nbsp;>&nbsp;a:focus&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;#555; &nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#E7E7E7;}.navbar-default&nbsp;.navbar-nav&nbsp;>&nbsp;.open&nbsp;>&nbsp;a,.navbar-default&nbsp;.navbar-nav&nbsp;>&nbsp;.open&nbsp;>&nbsp;a:hover,.navbar-default&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;.navbar-nav&nbsp;>&nbsp;.open&nbsp;>&nbsp;a:focus&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;#555; &nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#D5D5D5;}/*&nbsp;Caret&nbsp;*/.navbar-default&nbsp;.navbar-nav&nbsp;>&nbsp;.dropdown&nbsp;>&nbsp;a&nbsp;.caret&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;border-top-color:&nbsp;#777; &nbsp;&nbsp;&nbsp;&nbsp;border-bottom-color:&nbsp;#777;}.navbar-default&nbsp;.navbar-nav&nbsp;>&nbsp;.dropdown&nbsp;>&nbsp;a:hover&nbsp;.caret,.navbar-default&nbsp;.navbar-nav&nbsp;>&nbsp;.dropdown&nbsp;> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a:focus&nbsp;.caret&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;border-top-color:&nbsp;#333; &nbsp;&nbsp;&nbsp;&nbsp;border-bottom-color:&nbsp;#333;}.navbar-default&nbsp;.navbar-nav&nbsp;>&nbsp;.open&nbsp;>&nbsp;a&nbsp;.caret,.navbar-default&nbsp;.navbar-nav&nbsp;>&nbsp;.open&nbsp;>&nbsp;a:hover&nbsp;.caret,. &nbsp;&nbsp;&nbsp;&nbsp;navbar-default&nbsp;.navbar-nav&nbsp;>&nbsp;.open&nbsp;>&nbsp;a:focus&nbsp;.caret&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;border-top-color:&nbsp;#555; &nbsp;&nbsp;&nbsp;&nbsp;border-bottom-color:&nbsp;#555;}/*&nbsp;Mobile&nbsp;version&nbsp;*/.navbar-default&nbsp;.navbar-toggle&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;border-color:&nbsp;#DDD;}.navbar-default&nbsp;.navbar-toggle:hover,.navbar-default&nbsp;.navbar-toggle:focus&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#DDD;}.navbar-default&nbsp;.navbar-toggle&nbsp;.icon-bar&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#CCC;}@media&nbsp;(max-width:&nbsp;767px)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;.navbar-default&nbsp;.navbar-nav&nbsp;.open&nbsp;.dropdown-menu&nbsp;>&nbsp;li&nbsp;>&nbsp;a&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;#777; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;.navbar-default&nbsp;.navbar-nav&nbsp;.open&nbsp;.dropdown-menu&nbsp;>&nbsp;li&nbsp;>&nbsp;a:hover, &nbsp;&nbsp;&nbsp;&nbsp;.navbar-default&nbsp;.navbar-nav&nbsp;.open&nbsp;.dropdown-menu&nbsp;>&nbsp;li&nbsp;>&nbsp;a:focus&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;#333; &nbsp;&nbsp;&nbsp;&nbsp;}}自定义彩色导航条示例以下是自定义彩色导航条的四个示例：JSFiddle链接和SCSS代码：$bgDefault&nbsp;&nbsp;&nbsp;:&nbsp;#e74c3c;$bgHighlight&nbsp;:&nbsp;#c0392b;$colDefault&nbsp;&nbsp;:&nbsp;#ecf0f1;$colHighlight:&nbsp;#ffbbbc;.navbar-default&nbsp;{ &nbsp;&nbsp;background-color:&nbsp;$bgDefault; &nbsp;&nbsp;border-color:&nbsp;$bgHighlight; &nbsp;&nbsp;.navbar-brand&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;$colDefault; &nbsp;&nbsp;&nbsp;&nbsp;&:hover,&nbsp;&:focus&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;$colHighlight;&nbsp;}} &nbsp;&nbsp;.navbar-text&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;$colDefault;&nbsp;} &nbsp;&nbsp;.navbar-nav&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;>&nbsp;li&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;>&nbsp;a&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;$colDefault; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&:hover,&nbsp;&nbsp;&:focus&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;$colHighlight;&nbsp;}}} &nbsp;&nbsp;&nbsp;&nbsp;>&nbsp;.active&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;>&nbsp;a,&nbsp;>&nbsp;a:hover,&nbsp;>&nbsp;a:focus&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;$colHighlight; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;$bgHighlight;&nbsp;}} &nbsp;&nbsp;&nbsp;&nbsp;>&nbsp;.open&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;>&nbsp;a,&nbsp;>&nbsp;a:hover,&nbsp;>&nbsp;a:focus&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;$colHighlight; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;$bgHighlight;&nbsp;}}} &nbsp;&nbsp;.navbar-toggle&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;border-color:&nbsp;$bgHighlight; &nbsp;&nbsp;&nbsp;&nbsp;&:hover,&nbsp;&:focus&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;$bgHighlight;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;.icon-bar&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;$colDefault;&nbsp;}} &nbsp;&nbsp;.navbar-collapse, &nbsp;&nbsp;.navbar-form&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;border-color:&nbsp;$colDefault;&nbsp;} &nbsp;&nbsp;.navbar-link&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;$colDefault; &nbsp;&nbsp;&nbsp;&nbsp;&:hover&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;$colHighlight;&nbsp;}}}@media&nbsp;(max-width:&nbsp;767px)&nbsp;{ &nbsp;&nbsp;.navbar-default&nbsp;.navbar-nav&nbsp;.open&nbsp;.dropdown-menu&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;>&nbsp;li&nbsp;>&nbsp;a&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;$colDefault; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&:hover,&nbsp;&:focus&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;$colHighlight;&nbsp;}} &nbsp;&nbsp;&nbsp;&nbsp;>&nbsp;.active&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;>&nbsp;a,&nbsp;>&nbsp;a:hover,&nbsp;>&nbsp;a:focus,&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;$colHighlight; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;$bgHighlight;&nbsp;}}}}最后，一个小小的礼物我刚刚做了一个脚本，可以让你生成你的主题：TWBSColor-生成您自己的引导导航条[更新]：TWBSColor现在生成SCSS/SASS/较少/CSS代码。&nbsp;[更新]：从现在开始，可以使用更少的语言作为TWBSColor提供的默认语言&nbsp;[更新]：TWBSColor现在支持下拉菜单着色[更新]：TWBSColor现在允许选择您的版本(添加了引导4支持)

Answer 2

我花了一段时间，但我发现，包括以下内容使更改导航条颜色成为可能：.navbar{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;background-image:&nbsp;none;}