bootstrap3-标签页 nav, tabs and pills

 

basic tab based Navigation

 

 

basic pills based Navigation

 

	<div class="container">
		<div class="row">
			<!-- 横向TAB导航 -->
			<div class="col-lg-6">
				<ul class="nav nav-tabs">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">Tutorials</a></li>
					<li><a href="#">Practice Editor </a></li>
					<li><a href="#">Gallery</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</div>
			<!-- 横向pill导航 -->
			<div class="col-lg-6">
				<ul class="nav nav-pills">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">Tutorials</a></li>
					<li><a href="#">Practice Editor </a></li>
					<li><a href="#">Gallery</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</div>
		</div>
	</div>

 

 

 

Stacked or vertical tabs

 

Stacked or vertical pills

 

<div class="container">
		<div class="row">
			<!-- 垂直TAB导航 -->
			<div class="col-lg-6">
				<ul class="nav nav-tabs nav-stacked">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">Tutorials</a></li>
					<li><a href="#">Practice Editor </a></li>
					<li><a href="#">Gallery</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</div>
			<!-- 垂直pill导航 -->
			<div class="col-lg-6">
				<ul class="nav nav-pills nav-stacked">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">Tutorials</a></li>
					<li><a href="#">Practice Editor </a></li>
					<li><a href="#">Gallery</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</div>
		</div>
	</div>

 

 

Tab based Dropdowns

 

Pills based Dropdowns

 

<div class="container">
		<div class="row">
			<!-- Tab based Dropdowns -->
			<div class="col-lg-6">
				<ul class="nav nav-tabs">
					<!-- TAB1 -->
					<li class="active"><a href="#">Home</a></li>
					
					<!-- TAB2 -->
					<li><a href="#">About</a></li>
					
					<!-- TAB3 -->
					<!-- 封装一个下拉菜单 -->
					<li class="dropdown">
						<a class="dropdown-toggle" data-toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a>
						<!-- 封装下拉项 ,pull-right指定下拉框靠左对齐-->
						<ul class="dropdown-menu pull-left">
							<li><a href="#">Twitter Bootstrap</a></li>  
				            <li><a href="#">Google Plus API</a></li>  
				            <li><a href="#">HTML5</a></li> 
				            <!-- 分割线 --> 
				            <li class="divider"></li>  
				            <li><a href="#">Examples</a></li> 
						</ul>
					</li>
					
					<!-- TAB4 -->
					<li class="dropdown">
					<a class="dropdown-toggle" data-toggle="dropdown" href="#">BackEnd<b class="caret"></b></a>
						<!-- 下拉框靠右对齐 -->
						<ul class="dropdown-menu pull-right">
							<li><a href="#">PHP</a></li>
							<li><a href="#">MySQL</a></li>
							<li><a href="#">PostgreSQL</a></li>
							<li class="divider"></li>
							<li><a href="#">Live Demos</a></li>
						</ul>
					</li>
				</ul>
			</div>
			
			<!-- Pills based Dropdowns -->
			<div class="col-lg-6">
				<ul class="nav nav-pills">
					<!-- TAB1 -->
					<li class="active"><a href="#">Home</a></li>
					
					<!-- TAB2 -->
					<li><a href="#">About</a></li>
					
					<!-- TAB3 -->
					<!-- 封装一个下拉菜单 -->
					<li class="dropdown">
						<a class="dropdown-toggle" data-toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a>
						<!-- 封装下拉项 -->
						<ul class="dropdown-menu pull-left">
							<li><a href="#">Twitter Bootstrap</a></li>  
				            <li><a href="#">Google Plus API</a></li>  
				            <li><a href="#">HTML5</a></li> 
				            <!-- 分割线 --> 
				            <li class="divider"></li>  
				            <li><a href="#">Examples</a></li> 
						</ul>
					</li>
					
					<!-- TAB4 -->
					<li class="dropdown">
					<a class="dropdown-toggle" data-toggle="dropdown" href="#">BackEnd<b class="caret"></b></a>
						<ul class="dropdown-menu pull-right">
							<li><a href="#">PHP</a></li>
							<li><a href="#">MySQL</a></li>
							<li><a href="#">PostgreSQL</a></li>
							<li class="divider"></li>
							<li><a href="#">Live Demos</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>

 

 

 

Using nav list for stacked navigation with optional headers

垂直导航加Header进行分组

 

	<div class="container">
		<div class="row">
			<div class="col-lg-6">
				<!-- 使用nav-list显示导航 -->
				<ul class="nav nav-list">
					<!-- 为一组元素添加Header，分组 -->
					<li class="nav-header"><b>First Header</b></li>
					<li><a href="#">Home</a></li>
					<li><a href="#">Library</a></li>
					<li><a href="#">Applications</a></li>
					<!-- 为一组元素添加Header，分组 -->
					<li class="nav-header"><b>Second Header</b></li>
					<li><a href="#">Profile</a></li>
					<li><a href="#">Settings</a></li>
					<li><a href="#">Help</a></li>
				</ul>
			</div>
		</div>
	</div>

 

 

 

Using nav list for stacked navigation with icons

垂直导航列表加图标

 

<div class="container">
		<div class="row">
			<div class="col-lg-6">
				<!-- 使用nav-list显示导航 -->
				<ul class="nav nav-list">
					<!-- 为一组元素添加Header，分组 -->
					<li class="nav-header"><b>First Header</b></li>
					<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
					<li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
					<li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li>
					<!-- 为一组元素添加Header，分组 -->
					<li class="nav-header"><b>Second Header</b></li>
					<li><a href="#"><span class="glyphicon glyphicon-user"></span> Profile</a></li>
					<li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
					<li><a href="#"><span class="glyphicon glyphicon-star-empty"></span> Help</a></li>
				</ul>
			</div>
		</div>
	</div>