bootstrap提供了导航条组件,效果是这样的(也可以是黑底白字的样式):
这是在pc端下的样子,在移动端中间的导航会折叠起来,最右边多一个控制折叠的按钮,像下面这样:
具体实现代码如下:
<div class="navbar navbar-default"> //.navbar-inverse为黑底白字的样式,如有需要可以自主更改。
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">TARENA</a> //导航条中放logo的地方,可以改成图片,直接在a中放img标签就可以了,需手动设置图片的上边距
<a class="navbar-toggle" data-toggle="collapse" href="#collapse"> //也可以是button标签,span标签等;href属性值对应下面折叠导航的id属性值,data-toggle属性是实现按钮点击折叠导航的必要属性
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse" id="collapse"> //id属性和类collapse是实现按钮点击折叠导航的必要属性
<ul class="nav navbar-nav">
<li><a href="#" data-toggle="tab">首页</a></li>
<li class="active"><a href="#" data-toggle="tab">新闻</a></li>
<li class="dropdown"> //这是一个下拉菜单,如果不需要可以不写
<a href="#" class="dropdown-toggle" data-toggle="dropdown">产品大全
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#" data-toggle="tab">产品1</a></li>
<li><a href="#" data-toggle="tab">产品2</a></li>
<li class="divider"></li>
<li><a href="#" data-toggle="tab">产品3</a></li>
</ul>
</li>
</ul>
<a href="#" class="navbar-link navbar-text navbar-right">右侧文字内容</a> //靠右的内容,随导航一起折叠
</div>
</div>
</div>
上面代码中所有的data-toggle=”tab”属性都是我自己加上的,为的是实现点击切换导航的效果,如果不需要或以别的方式实现切换效果可以不加这个属性。