bootstrap3-標籤頁 nav, tabs and pills

schy_hqh發表於2013-12-26
boot

 

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>

 

相關文章