Bootstrap Demo

导航栏

.navbar-default 常规导航栏

					
<div class="navbar navbar-default" role="navigation">
	<div class="navbar-header">
		<a class="navbar-brand" href="#">Logo</a>
	</div>
	<div>
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">栏目一</a></li>
			<li><a href="#">栏目二</a></li>
			<li><a href="#">栏目三</a></li>
			<li><a href="#">栏目四</a></li>
			<li class="dropdown dropup">
				<a class="dropdown-toggle" data-toggle="dropdown">栏目五 <span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a href="#">菜单1</a></li>
					<li><a href="#">菜单2</a></li>
					<li><a href="#">菜单3</a></li>
					<li><a href="#">菜单4</a></li>
					<li><a href="#">菜单5</a></li>
					<li><a href="#">菜单6</a></li>
				</ul>
			</li>
			<li class="dropdown">
				<a class="dropdown-toggle" data-toggle="dropdown" href="#">栏目六 <span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a href="#">菜单1</a></li>
					<li><a href="#">菜单2</a></li>
					<li><a href="#">菜单3</a></li>
					<li><a href="#">菜单4</a></li>
					<li><a href="#">菜单5</a></li>
					<li><a href="#">菜单6</a></li>
				</ul>
			</li>
		</ul>
	</div>
</div>

响应式导航栏

					
<div class="navbar navbar-default" role="navigation">
	<div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-navbar-collapse-1">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
		<a class="navbar-brand" href="#">Logo</a>
	</div>
	<div class="collapse navbar-collapse" id="my-navbar-collapse-1">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">栏目一</a></li>
			<li><a href="#">栏目二</a></li>
			<li><a href="#">栏目三</a></li>
			<li><a href="#">栏目四</a></li>
			<li class="dropdown dropup">
				<a class="dropdown-toggle" data-toggle="dropdown">栏目五 <span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a href="#">菜单1</a></li>
					<li><a href="#">菜单2</a></li>
					<li><a href="#">菜单3</a></li>
					<li><a href="#">菜单4</a></li>
					<li><a href="#">菜单5</a></li>
					<li><a href="#">菜单6</a></li>
				</ul>
			</li>
			<li class="dropdown">
				<a class="dropdown-toggle" data-toggle="dropdown" href="#">栏目六 <span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a href="#">菜单1</a></li>
					<li><a href="#">菜单2</a></li>
					<li><a href="#">菜单3</a></li>
					<li><a href="#">菜单4</a></li>
					<li><a href="#">菜单5</a></li>
					<li><a href="#">菜单6</a></li>
				</ul>
			</li>
		</ul>
	</div>
</div>

带表单的导航栏

					
<div class="navbar navbar-default" role="navigation">
	<div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-navbar-collapse-2">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
		<a class="navbar-brand" href="#">Logo</a>
	</div>
	<div class="collapse navbar-collapse" id="my-navbar-collapse-2">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">栏目一</a></li>
			<li><a href="#">栏目二</a></li>
			<li><a href="#">栏目三</a></li>
			<li><a href="#">栏目四</a></li>
			<li class="dropdown dropup">
				<a class="dropdown-toggle" data-toggle="dropdown">栏目五 <span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a href="#">菜单1</a></li>
					<li><a href="#">菜单2</a></li>
					<li><a href="#">菜单3</a></li>
					<li><a href="#">菜单4</a></li>
					<li><a href="#">菜单5</a></li>
					<li><a href="#">菜单6</a></li>
				</ul>
			</li>
			<li class="dropdown">
				<a class="dropdown-toggle" data-toggle="dropdown" href="#">栏目六 <span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a href="#">菜单1</a></li>
					<li><a href="#">菜单2</a></li>
					<li><a href="#">菜单3</a></li>
					<li><a href="#">菜单4</a></li>
					<li><a href="#">菜单5</a></li>
					<li><a href="#">菜单6</a></li>
				</ul>
			</li>
		</ul>
		<form class="navbar-form navbar-right" role="search">
			<div class="form-group">
				<div class="input-group">
					<input type="text" class="form-control" placeholder="关键字">
			<span class="input-group-btn">
				<button type="button" class="btn">搜索</button>
			</span>
				</div>
			</div>
		</form>
	</div>
</div>

带按钮的导航栏

					
<div class="navbar navbar-default" role="navigation">
	<div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-navbar-collapse-3">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
		<a class="navbar-brand" href="#">Logo</a>
	</div>
	<div class="collapse navbar-collapse" id="my-navbar-collapse-3">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">栏目一</a></li>
			<li><a href="#">栏目二</a></li>
			<li><a href="#">栏目三</a></li>
			<li><a href="#">栏目四</a></li>
			<li class="dropdown dropup">
				<a class="dropdown-toggle" data-toggle="dropdown">栏目五 <span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a href="#">菜单1</a></li>
					<li><a href="#">菜单2</a></li>
					<li><a href="#">菜单3</a></li>
					<li><a href="#">菜单4</a></li>
					<li><a href="#">菜单5</a></li>
					<li><a href="#">菜单6</a></li>
				</ul>
			</li>
			<li class="dropdown">
				<a class="dropdown-toggle" data-toggle="dropdown" href="#">栏目六 <span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a href="#">菜单1</a></li>
					<li><a href="#">菜单2</a></li>
					<li><a href="#">菜单3</a></li>
					<li><a href="#">菜单4</a></li>
					<li><a href="#">菜单5</a></li>
					<li><a href="#">菜单6</a></li>
				</ul>
			</li>
		</ul>
		<div class="navbar-right">
			<p class="navbar-text navbar-left"><a class="navbar-link" href="#">关于我们</a></p>
			<form class="navbar-form navbar-left" role="search">
				<div class="form-group">
					<div class="input-group">
						<input type="text" class="form-control" placeholder="关键字">
			<span class="input-group-btn">
				<button type="button" class="btn"><span class="glyphicon glyphicon-search"></span></button>
			</span>
					</div>
				</div>
			</form>
			<button type="button" class="btn btn-default navbar-btn">注册</button>
			<button type="button" class="btn btn-default navbar-btn">登陆</button>
		</div>
	</div>
</div>

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

					
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-navbar-collapse-4">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
		<a class="navbar-brand" href="#">固定在顶部</a>
	</div>
	<div class="collapse navbar-collapse" id="my-navbar-collapse-4">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">栏目一</a></li>
			<li><a href="#">栏目二</a></li>
			<li><a href="#">栏目三</a></li>
			<li><a href="#">栏目四</a></li>
			<li class="dropdown dropup">
				<a class="dropdown-toggle" data-toggle="dropdown">栏目五 <span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a href="#">菜单1</a></li>
					<li><a href="#">菜单2</a></li>
					<li><a href="#">菜单3</a></li>
					<li><a href="#">菜单4</a></li>
					<li><a href="#">菜单5</a></li>
					<li><a href="#">菜单6</a></li>
				</ul>
			</li>
			<li class="dropdown">
				<a class="dropdown-toggle" data-toggle="dropdown" href="#">栏目六 <span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a href="#">菜单1</a></li>
					<li><a href="#">菜单2</a></li>
					<li><a href="#">菜单3</a></li>
					<li><a href="#">菜单4</a></li>
					<li><a href="#">菜单5</a></li>
					<li><a href="#">菜单6</a></li>
				</ul>
			</li>
		</ul>
		<div class="navbar-right">
			<p class="navbar-text navbar-left"><a class="navbar-link" href="#">关于我们</a></p>
			<form class="navbar-form navbar-left" role="search">
				<div class="form-group">
					<div class="input-group">
						<input type="text" class="form-control" placeholder="关键字">
			<span class="input-group-btn">
				<button type="button" class="btn"><span class="glyphicon glyphicon-search"></span></button>
			</span>
					</div>
				</div>
			</form>
			<button type="button" class="btn btn-default navbar-btn">注册</button>
			<button type="button" class="btn btn-default navbar-btn">登陆</button>
		</div>
	</div>
</div>

.navbar-fixed-bottom 固定在底部导航栏

					
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
	<div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-navbar-collapse-4">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
		<a class="navbar-brand" href="#">固定在底部</a>
	</div>
	<div class="collapse navbar-collapse" id="my-navbar-collapse-4">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">栏目一</a></li>
			<li><a href="#">栏目二</a></li>
			<li><a href="#">栏目三</a></li>
			<li><a href="#">栏目四</a></li>
			<li class="dropdown dropup">
				<a class="dropdown-toggle" data-toggle="dropdown">栏目五 <span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a href="#">菜单1</a></li>
					<li><a href="#">菜单2</a></li>
					<li><a href="#">菜单3</a></li>
					<li><a href="#">菜单4</a></li>
					<li><a href="#">菜单5</a></li>
					<li><a href="#">菜单6</a></li>
				</ul>
			</li>
			<li class="dropdown">
				<a class="dropdown-toggle" data-toggle="dropdown" href="#">栏目六 <span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a href="#">菜单1</a></li>
					<li><a href="#">菜单2</a></li>
					<li><a href="#">菜单3</a></li>
					<li><a href="#">菜单4</a></li>
					<li><a href="#">菜单5</a></li>
					<li><a href="#">菜单6</a></li>
				</ul>
			</li>
		</ul>
		<div class="navbar-right">
			<p class="navbar-text navbar-left"><a class="navbar-link" href="#">关于我们</a></p>
			<form class="navbar-form navbar-left" role="search">
				<div class="form-group">
					<div class="input-group">
						<input type="text" class="form-control" placeholder="关键字">
			<span class="input-group-btn">
				<button type="button" class="btn"><span class="glyphicon glyphicon-search"></span></button>
			</span>
					</div>
				</div>
			</form>
			<button type="button" class="btn btn-default navbar-btn">注册</button>
			<button type="button" class="btn btn-default navbar-btn">登陆</button>
		</div>
	</div>
</div>

.navbar-static-top 静止在顶部导航栏

					
<div class="navbar navbar-default navbar-static-top" role="navigation">
	<div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-navbar-collapse-4">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
		<a class="navbar-brand" href="#">静止在顶部</a>
	</div>
	<div class="collapse navbar-collapse" id="my-navbar-collapse-4">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">栏目一</a></li>
			<li><a href="#">栏目二</a></li>
			<li><a href="#">栏目三</a></li>
			<li><a href="#">栏目四</a></li>
			<li class="dropdown dropup">
				<a class="dropdown-toggle" data-toggle="dropdown">栏目五 <span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a href="#">菜单1</a></li>
					<li><a href="#">菜单2</a></li>
					<li><a href="#">菜单3</a></li>
					<li><a href="#">菜单4</a></li>
					<li><a href="#">菜单5</a></li>
					<li><a href="#">菜单6</a></li>
				</ul>
			</li>
			<li class="dropdown">
				<a class="dropdown-toggle" data-toggle="dropdown" href="#">栏目六 <span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a href="#">菜单1</a></li>
					<li><a href="#">菜单2</a></li>
					<li><a href="#">菜单3</a></li>
					<li><a href="#">菜单4</a></li>
					<li><a href="#">菜单5</a></li>
					<li><a href="#">菜单6</a></li>
				</ul>
			</li>
		</ul>
		<div class="navbar-right">
			<p class="navbar-text navbar-left"><a class="navbar-link" href="#">关于我们</a></p>
			<form class="navbar-form navbar-left" role="search">
				<div class="form-group">
					<div class="input-group">
						<input type="text" class="form-control" placeholder="关键字">
			<span class="input-group-btn">
				<button type="button" class="btn"><span class="glyphicon glyphicon-search"></span></button>
			</span>
					</div>
				</div>
			</form>
			<button type="button" class="btn btn-default navbar-btn">注册</button>
			<button type="button" class="btn btn-default navbar-btn">登陆</button>
		</div>
	</div>
</div>

.navbar-inverse 反色的导航栏

					
<div class="navbar navbar-inverse" role="navigation">
	<div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-navbar-collapse-4">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
		<a class="navbar-brand" href="#">反色的导航</a>
	</div>
	<div class="collapse navbar-collapse" id="my-navbar-collapse-4">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">栏目一</a></li>
			<li><a href="#">栏目二</a></li>
			<li><a href="#">栏目三</a></li>
			<li><a href="#">栏目四</a></li>
			<li class="dropdown dropup">
				<a class="dropdown-toggle" data-toggle="dropdown">栏目五 <span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a href="#">菜单1</a></li>
					<li><a href="#">菜单2</a></li>
					<li><a href="#">菜单3</a></li>
					<li><a href="#">菜单4</a></li>
					<li><a href="#">菜单5</a></li>
					<li><a href="#">菜单6</a></li>
				</ul>
			</li>
			<li class="dropdown">
				<a class="dropdown-toggle" data-toggle="dropdown" href="#">栏目六 <span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a href="#">菜单1</a></li>
					<li><a href="#">菜单2</a></li>
					<li><a href="#">菜单3</a></li>
					<li><a href="#">菜单4</a></li>
					<li><a href="#">菜单5</a></li>
					<li><a href="#">菜单6</a></li>
				</ul>
			</li>
		</ul>
		<div class="navbar-right">
			<p class="navbar-text navbar-left"><a class="navbar-link" href="#">关于我们</a></p>
			<form class="navbar-form navbar-left" role="search">
				<div class="form-group">
					<div class="input-group">
						<input type="text" class="form-control" placeholder="关键字">
			<span class="input-group-btn">
				<button type="button" class="btn"><span class="glyphicon glyphicon-search"></span></button>
			</span>
					</div>
				</div>
			</form>
			<button type="button" class="btn btn-default navbar-btn">注册</button>
			<button type="button" class="btn btn-default navbar-btn">登陆</button>
		</div>
	</div>
</div>