HTML – 如何更改引导程序导航菜单颜色？

概述我想改变“家”“旋转”“社交媒体”的颜色,但不知道如何.我花了几天时间搞清楚如何更改导航背景但不知道颜色,因为我只想将灰色更改为白色并改变悬停颜色.我可以将颜色更改为白色,然后忽略悬停颜色.是否有预期的方法来做到这一点？ 这是我改变导航背景颜色的方法. .navbar-inverse { background-color:#66ccff; background-image: non

我想改变“家”“旋转”“社交媒体”的颜色,但不知道如何.我花了几天时间搞清楚如何更改导航背景但不知道颜色,因为我只想将灰色更改为白色并改变悬停颜色.我可以将颜色更改为白色,然后忽略悬停颜色.是否有预期的方法来做到这一点？

这是我改变导航背景颜色的方法.

.navbar-inverse {    background-color:#66ccff;    background-image: none;    background-repeat: no-repeat;}

这有助于：D

解决方法 这是导航组件的相对全面的细分,并且经常更改属性.我建议在主navbar div中使用自定义类(本例中使用navbar-custom)以避免直接更改基本CSS.

/***Navbar Background color,border Removed,border Radius Sqaure***/.navbar.navbar-custom {  background: #66ccff;  border: none;  border-radius: 0;}/***link color***/.navbar.navbar-custom .navbar-nav > li > a {  color: #f00;}/***link color Hover Statr***/.navbar.navbar-custom .navbar-nav > li > a:hover {  color: #ff0;}/***link Background and color Active State***/.navbar.navbar-custom .navbar-nav > .active,.navbar.navbar-custom .navbar-nav > .active > a,.navbar.navbar-custom .navbar-nav > .active > a:hover,.navbar.navbar-custom .navbar-nav > .active > a:focus {  background: #DBF022;  color: #66ccff;}/***Navbar Brand link color***/.navbar.navbar-custom .navbar-brand {  color: #f00;}/***Navbar Brand link color Hover State***/.navbar.navbar-custom .navbar-brand:hover {  color: #ff0;}/***Dropdown Background Active State***/.navbar.navbar-custom .nav li.dropdown.open > .dropdown-toggle,.navbar.navbar-custom .nav li.dropdown.active > .dropdown-toggle,.navbar.navbar-custom .nav li.dropdown.open.active > .dropdown-toggle {  background: #DBF022;  color: #f00;}/***Dropdown-menu Background color***/.navbar.navbar-custom .dropdown-menu {  background: #66ccff;  border: none;}/***Dropdown-menu color***/.navbar.navbar-custom .dropdown-menu > li > a {  color: #f00;}/***Dropdown-menu color Hover and Focus State***/.navbar.navbar-custom .dropdown-menu > li > a:hover,.navbar.navbar-custom .dropdown-menu > li > a:focus {  color: #ff0;  background: #f00;}/***Toggle button***/.navbar.navbar-custom .navbar-header .navbar-toggle {  border-color: #f00;}/***Toggle button Hover and Focus State***/.navbar.navbar-custom .navbar-header .navbar-toggle:hover,.navbar.navbar-custom .navbar-header .navbar-toggle:focus {  background: #f00;  border: #f00;}/***Collapse borders***/.navbar.navbar-custom .navbar-collapse {  border: none;}@media (max-wIDth: 767px) {  .navbar.navbar-custom li.dropdown .dropdown-menu > li > a {    color: #f00;  }  /***Dropdown-menu color Hover and Focus State***/  .navbar.navbar-custom li.dropdown .dropdown-menu > li > a:hover,.navbar.navbar-custom li.dropdown .dropdown-menu > li > a:focus {    color: #ff0;    background: #f00;  }}

<script src="https://AJAX.GoogleAPIs.com/AJAX/libs/jquery/1.11.1/jquery.min.Js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/Js/bootstrap.min.Js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/CSS/bootstrap.min.CSS" rel="stylesheet" /><nav >  <div >    <!-- Brand and toggle get grouped for better mobile display -->    <div >      <button type="button"  data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span >Toggle navigation</span>        <span ></span>        <span ></span>        <span ></span>      </button> <a  href="#">Brand</a>    </div>    <!-- Collect the nav links,forms,and other content for toggling -->    <div  ID="bs-example-navbar-collapse-1">      <ul >        <li ><a href="#">link <span >(current)</span></a>        </li>        <li><a href="#">link</a>        </li>        <li > <a href="#"  data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span ></span></a>          <ul >            <li><a href="#">Action</a>            </li>            <li><a href="#">Another action</a>            </li>            <li><a href="#">Something else here</a>            </li>          </ul>        </li>      </ul>    </div>    <!-- /.navbar-collapse -->  </div>  <!-- /.container-fluID --></nav>

总结

以上是内存溢出为你收集整理的HTML – 如何更改引导程序导航菜单颜色？全部内容，希望文章能够帮你解决HTML – 如何更改引导程序导航菜单颜色？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。