bootstrap组件——导航条

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”属性都是我自己加上的，为的是实现点击切换导航的效果，如果不需要或以别的方式实现切换效果可以不加这个属性。