bootstrap完整导航栏

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="bootstrap-3.3.6-dist/js/jquery-1.11.2.min.js"></script>
<link href="bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet">
<script src="bootstrap-3.3.6-dist/js/bootstrap.js"></script>
<style>
body
{
    padding-top: 70px;
}
</style>
</head>
<body>
//添加navbar-fixed-top可以让导航条一直固定在顶部，不会因为滚动条改变而改变，navbar-inverse让导航条黑底展示

<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
　　<div class="container">　　//container让导航条居中container-fluid让导航条自适应

　　
　　　　<div class="navbar-header">

　　　　　　//粉色字体代表响应式布局：当浏览器宽度小于某个值时导航栏折叠变成三道杠
            <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" type="button">
                <span class="sr-only">看看这是什么</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

            </button>
       //绿色代表导航栏左侧logo或者图标    
　　　　 　　<a class="navbar-brand" href="www.baidu.com">浏览器博物馆</a>
        </div>
　　　　//棕色包裹项目是导航条内容，为了响应式布局，点击三道杠弹出导航栏
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
           
　　　　　　　　//紫色代表导航栏中的项目
　　　　　　 <ul class="nav navbar-nav">
                <li><a href="www.baidu.com">综述</a></li>
                <li>//蓝色为下拉菜单
                    <a class="dropdown-toggle" data-toggle="dropdown" href="www.baidu.com">简述<span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">谷歌浏览器</a></li>
                        <li><a href="#">IE浏览器</a></li>
                        <li><a href="#">360浏览器</a></li>
                        <li><a href="#">谷歌火狐浏览器</a></li>

                    </ul>
　　　　　　　　　　</li>
                <li><a href="www.baidu.com">特点</a></li>
                <li><a href="www.baidu.com">关于</a></li>

            </ul>
        </div>
    </div>
</nav>
<p>dsaf3ewqrfdsaf </p>
<p>dsafdhtetf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>
<p>dsafdsaf saf </p>

</body>
</html>