Bootstrap导航栏

导航栏：

<div id="menu-nav" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="container-fluid">
            <div class="navbar-header">
                <butotn class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                   <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </butotn>
                <a href="#" class="navbar-brand">现代浏览器博物馆</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">综述</a></li>
                    <li><a href="">简述</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">特点 <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Chrome</a></li>
                            <li><a href="#">Firefox</a></li>
                            <li><a href="#">Safari</a></li>
                            <li><a href="#">Opera</a></li>
                            <li><a href="#">IE</a></li>
                        </ul>
                    </li>
                    <li><a href="#" data-toggle="modal" data-target="#about-modal">关于</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

navbar-inverse：背景色为黑色

navbar-fixed-top：固定导航栏在顶部

navbar-collapse：当窗口过小时，自动隐藏

data-toggle指以什么事件触发，常用的如modal,popover,tooltips等，data-target指事件的目标，一起使用就是代表data-target所指的元素以data-toggle指定的形式显示

<span class="caret"></span> 显示下拉箭头
要加载jquery.js 和 bootstrap.min.js 不然点击下拉菜单会没反应