bootstrap外掛

1. 標籤頁

• 新增 nav 和 nav-tabs 類到 ul 中，將會應用 Bootstrap 標籤樣式， 新增 nav 和 nav-pills 類到 ul 中，將會應用 Bootstrap 膠囊式樣式。
• 新增 data-toggle=“tab” 或 data-toggle=“pill” 到錨文字連結中
  1.1nav-tabs

<ul class="nav nav-tabs">
<!-- 新增 data-toggle="tab" 或 data-toggle="pill" 到錨文字連結中 -->
 

	<li><a href="#a1" data-toggle="tab">a1</a></li>
	<li><a href="#a2" data-toggle="tab">a2</a></li>
	<li><a href="#a3" data-toggle="tab">a3</a></li>
</ul>
<div class="
 
tab-content">
	<!-- .active**第一個內容，若不寫起始狀態都是隱藏 -->
	<!-- 請新增 .fade 到每個 .tab-pane 後面。第一個標籤頁必須新增 .in 類，以便淡入顯示初始內容 -->
	<!-- in active二者缺一初始值都不顯示 -->
	<div id="a1" class="tab-pane fade in active">第一</div>
	<div id="a2" class="tab-pane fade"
 
>第二</div>
	<div id="a3" class="tab-pane fade">第三</div>
</div>

效果：

1.2nav-pills

<ul class="nav nav-pills">
	<li><a href="#a1" data-toggle="pill">a1</a></li>
	<li><a href="#a2" data-toggle="pill">a2</a></li>
	<li><a href="#a3" data-toggle="pill">a3</a></li>
</ul>
<div class="tab-content">
	<div id="a1" class="tab-pane fade in active">第一</div>
	<div id="a2" class="tab-pane fade">第二</div>
	<div id="a3" class="tab-pane fade">第三</div>
</div>

效果：