Bootstrap Demo

导航元素

.nav-tabs 表格导航或标签

					
<ul class="nav nav-tabs">
	<li class="active"><a href="#">栏目一</a></li>
	<li><a href="#">栏目二</a></li>
	<li><a href="#">栏目三</a></li>
	<li><a href="#">栏目四</a></li>
	<li><a href="#">栏目五</a></li>
	<li><a href="#">栏目六</a></li>
</ul>

.nav-pills 胶囊式导航

					
<ul class="nav nav-pills">
	<li class="active"><a href="#">栏目一</a></li>
	<li><a href="#">栏目二</a></li>
	<li><a href="#">栏目三</a></li>
	<li><a href="#">栏目四</a></li>
	<li><a href="#">栏目五</a></li>
	<li><a href="#">栏目六</a></li>
</ul>

.nav-stacked 垂直导航

					
<ul class="nav nav-pills nav-stacked">
	<li class="active"><a href="#">栏目一</a></li>
	<li><a href="#">栏目二</a></li>
	<li><a href="#">栏目三</a></li>
	<li><a href="#">栏目四</a></li>
	<li><a href="#">栏目五</a></li>
	<li><a href="#">栏目六</a></li>
</ul>

.nav-justified 两端对齐的导航

					
<ul class="nav nav-pills nav-justified">
	<li class="active"><a href="#">栏目一</a></li>
	<li><a href="#">栏目二</a></li>
	<li><a href="#">栏目三</a></li>
	<li><a href="#">栏目四</a></li>
	<li><a href="#">栏目五</a></li>
	<li><a href="#">栏目六</a></li>
</ul>

带下拉的导航

					
<ul class="nav nav-pills">
	<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>