如何选择Bootstrap Material主题的“默认”导航栏？

我正在使用网站的Bootstrap Material Design Template。它有three different colored navbars其中我想用最后一个。但我不确定如何使用最后一个。我是否需要手动更改导航栏的颜色，或者我可以在某处更改一件事物，以便所有按钮和单选按钮的颜色也发生变化？如何选择Bootstrap Material主题的“默认”导航栏？

我在github页面上发现了一块，指出如何change the primary color to a cusom one。但我不想那样，我只是想用你在third navbar option here中看到的蓝色。

任何想法，我可以做到这一点？欢迎所有提示！

来源

2015-07-21 kramer65

其实你只需要使用不同类别在颜色的变化，在默认情况下引导的主题有navbar-default和navbar-inverse 但在很主题，你正在使用有一个叫做navbar-material-light-blue-300类需要在下面添加方式。

<div class="navbar navbar-material-light-blue-300"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-material-light-blue-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="javascript:void(0)">Brand</a> 
      </div> 
      <div class="navbar-collapse collapse navbar-material-light-blue-collapse"> 
       <ul class="nav navbar-nav"> 
       <li class="active"><a href="javascript:void(0)">Active</a></li> 
       <li><a href="javascript:void(0)">Link</a></li> 
       <li class="dropdown"> 
        <a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
        <li><a href="javascript:void(0)">Action</a></li> 
        <li><a href="javascript:void(0)">Another action</a></li> 
        <li><a href="javascript:void(0)">Something else here</a></li> 
        <li class="divider"></li> 
        <li class="dropdown-header">Dropdown header</li> 
        <li><a href="javascript:void(0)">Separated link</a></li> 
        <li><a href="javascript:void(0)">One more separated link</a></li> 
        </ul> 
       </li> 
       </ul> 
       <form class="navbar-form navbar-left"> 
       <input type="text" class="form-control col-lg-8" placeholder="Search"> 
       </form> 
       <ul class="nav navbar-nav navbar-right"> 
       <li><a href="javascript:void(0)">Link</a></li> 
       <li class="dropdown"> 
        <a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
        <li><a href="javascript:void(0)">Action</a></li> 
        <li><a href="javascript:void(0)">Another action</a></li> 
        <li><a href="javascript:void(0)">Something else here</a></li> 
        <li class="divider"></li> 
        <li><a href="javascript:void(0)">Separated link</a></li> 
        </ul> 
       </li> 
       </ul> 
      </div> 
      </div>

编码快乐:)

来源

2015-07-21 06:45:35

.navbar-inverse是影响其颜色的类。

<div class="navbar navbar-inverse"> 
    .... 
</div>

上述比第三另外两个分别具有.navbar-default和.navbar-warning类。

使用下面的代码：

<div class="navbar navbar-inverse"> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="javascript:void(0)">Brand</a> 
    </div> 
    <div class="navbar-collapse collapse navbar-inverse-collapse"> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="javascript:void(0)">Active</a> 
     </li> 
     <li><a href="javascript:void(0)">Link</a> 
     </li> 
     <li class="dropdown"> 
     <a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <li><a href="javascript:void(0)">Action</a> 
      </li> 
      <li><a href="javascript:void(0)">Another action</a> 
      </li> 
      <li><a href="javascript:void(0)">Something else here</a> 
      </li> 
      <li class="divider"></li> 
      <li class="dropdown-header">Dropdown header</li> 
      <li><a href="javascript:void(0)">Separated link</a> 
      </li> 
      <li><a href="javascript:void(0)">One more separated link</a> 
      </li> 
     </ul> 
     </li> 
    </ul> 
    <form class="navbar-form navbar-left"> 
     <input class="form-control col-lg-8" placeholder="Search" type="text"> 
    </form> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><a href="javascript:void(0)">Link</a> 
     </li> 
     <li class="dropdown"> 
     <a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <li><a href="javascript:void(0)">Action</a> 
      </li> 
      <li><a href="javascript:void(0)">Another action</a> 
      </li> 
      <li><a href="javascript:void(0)">Something else here</a> 
      </li> 
      <li class="divider"></li> 
      <li><a href="javascript:void(0)">Separated link</a> 
      </li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</div>

来源

2015-07-21 06:46:51

如何选择Bootstrap Material主题的“默认”导航栏？

回答

相关问题