>Bootstrap官方文档里实现了一个导航栏：
添加了注释，帮助以后理解；
<!--整体灰色横条--><!--navbar-default，默认是灰色； navbar-inverse 反色--><nav class="navbar navbar-default"><div class="container-fluid"><!--navbar-header 最左边的头和最右边合并后的块--><div class="navbar-header"><!--左边的头--><!--<a class="navbar-brand" href="#">Brand</a>--><a class="navbar-brand" href="#"><img alt="Brand" height="100%" src="img/logo.png"></a><!--右边的合并区，点击时触发collapse的js，展开的内容是bs-example-navbar-collapse-1，--><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><!--右方合并按钮里三个小横条--><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div><!--id：bs-example-navbar-collapse-1； 这里面放的是合并区的内容 --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><!--class active激活状态--><li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">Link</a></li><!--导航条下拉菜单 dropdown-menu--><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 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="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><!--导航条中的form表单;--><!--navbar-left 左对齐;--><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form><!--navbar-right 右对齐;--><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 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="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav>
