Bootstrap 导航栏

【Bootstrap 导航栏】

　　NavBar是对Nav的包含。在Nav之外还做以下内容：

　　1、根为 <nav class="navbar navbar-default">

　　2、在Nav前添加头 <div class="navbar-header"> <a class="navbar-brand">

　　3、Nav的calss改 navbar-nav

　　

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">菜鸟教程</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

2、折叠的导航

　　在1的基础上进行修改。

　　1）Header Button添加后续属性 onclass="navbar-toggle" data-toggle="collapse" data-target="#id"。

　　2）na列表使用collapse包围起来。<div class="collapse navbar-collapse" id="custom-id">

　　


3、导航栏中的搜索条

　　

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">菜鸟教程</a>
</div>
<div>
<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">提交</button>
</form>
</div>
</div>
</nav>

4、在根部添加navbar-inverse即可变色。

　　


5、随页面一起滚动，请添加 .navbar-static-top class

参考：http://www.runoob.com/bootstrap/bootstrap-navbar.html