我正在为网站使用Bootstrap 材料设计模板。它有三个不同颜色的导航栏,我想使用最后一个。但我不确定如何使用最后一个。我是否需要手动更改导航栏的颜色,或者我可以在某处更改一件事,以便所有按钮和单选按钮的颜色也会改变?
我在 github 页面上找到了一篇文章,它指出了如何将原色更改为自定义颜色。但我不希望这样,我只想使用您在此处的第三个导航栏选项中看到的蓝色。
任何想法我该怎么做?欢迎所有提示!
我正在为网站使用Bootstrap 材料设计模板。它有三个不同颜色的导航栏,我想使用最后一个。但我不确定如何使用最后一个。我是否需要手动更改导航栏的颜色,或者我可以在某处更改一件事,以便所有按钮和单选按钮的颜色也会改变?
我在 github 页面上找到了一篇文章,它指出了如何将原色更改为自定义颜色。但我不希望这样,我只想使用您在此处的第三个导航栏选项中看到的蓝色。
任何想法我该怎么做?欢迎所有提示!
实际上你只需要使用不同的类来改变颜色,默认情况下有一个 Bootstrap 主题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>
快乐编码:)
.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>