BootStrap之导航条navigationBar

普通导航条：

<div class="nav navbar-default">
	<ul class="nav navbar-nav">
		<li class="active"><a href="javascript:void(0)">新闻</a></li>
		<li><a href="javascript:void(0)">音乐</a></li>
		<li><a href="javascript:void(0)">体育</a></li>
		<li><a href="javascript:void(0)">视频</a></li>
   </ul>
</div>

效果图：

 

带搜索框导航条：

<div class="nav navbar-default">
	<div class="navbar-header">
		<button class="btn btn-default" style="margin: 8px 5px;">
			    <span class="glyphicon glyphicon-home"></span>
		</button>
	</div>
	<ul class="nav navbar-nav">
		<li class="active"><a href="javascript:void(0)">新闻</a></li>
		<li><a href="javascript:void(0)">音乐</a></li>
		<li><a href="javascript:void(0)">体育</a></li>
		<li><a href="javascript:void(0)">视频</a></li>
	</ul>
	<div class="navbar-form">
		<div class="input-group">
			 <input type="text" class="form-control" placeholder="insert key world" />
			<span class="input-group-btn">
			      <button class="btn btn-primary">搜索</button>
		    </span>
		</div>
	</div>
</div>

效果图：

带搜索框的导航条二：

<div class="nav navbar-default">
	<div class="navbar-header">
		<button class="btn btn-default" style="margin: 8px 5px;">
			    <span class="glyphicon glyphicon-home"></span>
		</button>
	</div>
	<ul class="nav navbar-nav">
		<li class="active"><a href="javascript:void(0)">新闻</a></li>
		<li><a href="javascript:void(0)">音乐</a></li>
		<li><a href="javascript:void(0)">体育</a></li>
		<li><a href="javascript:void(0)">视频</a></li>
	</ul>
	<div class="navbar-form pull-right">
		<div class="input-group">
			<input type="text" class="form-control" placeholder="insert key world" />
			<span class="input-group-addon">
			      <span class="glyphicon glyphicon-search"></span>
			</span>
		</div>
	</div>
</div>

 

效果图：

 

带标签的导航条：

<div class="navbar navbar-default">
	<div class="navbar-header">
	<!--navbar-inverse-->
	<!--navbar-toggle:在宽屏时不显示内容--->
	<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-responsive">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
	</button>
	<button class="btn btn-default navbar-brand" style="margin: 0 5px; ">
			<span class="glyphicon glyphicon-home"></span>
	</button>
    </div>
	<div class="collapse navbar-collapse navbar-collapse-responsive">
		<ul class="nav navbar-nav">
			<li class="active"><a href="javascript:void(0)">新闻<span class="label label-default">new</span></a></li>
		    <li><a href="javascript:void(0)">音乐<span class="badge pull-right">5</span></a></li>
			<li><a href="javascript:void(0)">体育</a></li>
			<li><a href="javascript:void(0)">视频</a></li>
		</ul>
	</div>
</div>

 

效果图：