bootstrap 响应式导航条（navigation）

<!--bootstrap navigation响应式导航栏-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!--Brand and toggle get grouped for better mobile display-->
        <!--响应式导航栏必须包含.collapse .navbar-collapse
            折叠起来的导航栏实际上是由class .navbar-toggle 以及两个data-组成
            第一个data-用于告诉JavaScript要做什么，第二个data-用于指定切换到哪一个元素,为了更具体化的显示折叠之后的展示页面
            用了三个class属性为.icon-bar 的<span>创建了所谓的汉堡按钮(可以更改为任意喜欢样式。-->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#example-navbar-collapse"
                    aria-expanded="false">
                <!--只用于屏幕阅读器，普通浏览器不显示，给无法看到屏幕显示的人士（比如盲人）提供方便-->
                <span class="sr-only">Toggle Navigation</span>
                <!--汉堡按钮-->
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <!--.navbar-brand默认是添加文字的，也可以添加图片，必须是小图片，图片太大位置就会靠下-->
            </button>
            <!--.navbar-brand会让文本更大一号-->
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!--Collect the nav links,forms,and other content for toggling-->
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <!--向导航栏添加链接，只需要简单添加带有.nav .navbar-nav的无序列表即可
            注意此处：写成.nav .navbar仅仅只是展示为列表，不会在导航条进行展示-->
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link<span class="sr-only">(Current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <!--.aria-haspopup表示点击会出现菜单或是浮动元素 .aria-expanded表示展开状态-->
                    <a type="button" class="dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Action another</a></li>
                        <li><a href="#">Action more</a></li>
                        <!--分隔符-->
                        <li class="divider" role="separator"></li>
                        <li><a href="#">Action</a></li>
                        <li class="divider" role="separator"></li>
                        <li><a href="#">Action</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input class="form-control" type="text" placeholder="Search">
                </div>
                <button class="btn btn-default" type="submit">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <!--.aria-haspopup表示点击会出现菜单或是浮动元素 .aria-expanded表示展开状态-->
                    <a type="button" class="dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Action another</a></li>
                        <li><a href="#">Action more</a></li>
                        <!--分隔符-->
                        <li class="divider" role="separator"></li>
                        <li><a href="#">Action</a></li>
                        <li class="divider" role="separator"></li>
                        <li><a href="#">Action</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>