响应式导航栏

默认的导航栏

创建一个默认的导航栏的步骤如下：
向<nav>标签添加navbar、navbar-default类。
向<nav>标签添加 role=”navigation”，有助于增加可访问性。
向<div>元素添加一个标题 class=”navbar-header”，内部包含了带有navbar-brand类 的<a>元素。这会让文本看起来更大一号。
为了向导航栏添加链接，只需要简单地添加带有nav、navbar-nav类的无序列表即可。

代码如下：

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li><a href="#">首页</a></li>
            <li><a href="#">内容</a></li>
            <li><a href="#">关于</a></li>
        </ul>
    </div>
</nav>

在浏览器宽度超过768px时，效果如下所示。

把窗口缩小后到768px以下后，效果如下。

响应式导航栏

为了给导航栏添加响应式特性，我们要折叠的内容必须放在一个带有navbar-collapse、collapse类的<div>中。
折叠起来的导航栏实际上是一个带有navbar-toggle类和两个data-元素的按钮。第一个是data-toggle，用于告诉JavaScript需要对按钮做什么，第二个是data-target，指示要切换到哪一个元素。
三个带有icon-bar类的<span>创建所谓的汉堡按钮。这些会切换为.nav-collapse <div>中的元素。

代码如下：

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="navbar-collapse collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="#">首页</a></li>
            <li><a href="#">内容</a></li>
            <li><a href="#">关于</a></li>
        </ul>
    </div>
</nav>

在浏览器窗口大于768px时，可以发现，与默认的没什么区别。

但是，当窗口缩小到768px以下后，可以看到，在页面的右上角出现了一个小图标，并且将内容折叠起来了。

点击图标就可以看到折叠的内容，如下所示。

在导航栏中加入下拉菜单

在上述代码的基础上，向需要下拉的内容的<li>中添加dropdown类，向其中加入一个无序列表，并在<ul>中添加class="dropdown-menu" role="menu"。
向<li>下的<a>中添加一个带有caret类的<span>，用来表示一个倒三角。
在<a>中添加dropdown-toggle类，data-toggle和role。

下面只显示上述代码中修改的部分。

<div class="navbar-collapse collapse" id="example-navbar-collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">首页</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">内容<span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">内容1</a></li>
                <li><a href="#">内容2</a></li>
                <li><a href="#">内容3</a></li>
            </ul>
        </li>
        <li><a href="#">关于</a></li>
    </ul>
</div>

浏览器窗口大于768px时的效果如下。

把窗口缩小到768px以下后，效果如下所示。