添加 nav 和 nav-tabs 類到 ul 中，將會應用 Bootstrap 標簽樣式，添加 nav 和 nav-pills 類到 ul 中，將會應用 Bootstrap 膠囊式樣式

<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#center" aria-controls="center" role="tab" data-toggle="tab">選擇基本信息</a></li>
<li role="presentation"><a href="#account" aria-controls="account" role="tab" data-toggle="tab">填寫基本實驗信息</a></li>
<li role="presentation"><a href="#exp_method_id" aria-controls="messages" role="tab" data-toggle="tab">實驗原理</a></li>
<li role="presentation"><a href="#exp_diagram_id" aria-controls="exp_method_id" role="tab" data-toggle="tab">實驗圖</a></li>
<li role="presentation"><a href="#exp_code_id" aria-controls="exp_code_id" role="tab" data-toggle="tab">實驗核心代碼</a></li>
<li role="presentation"><a href="#exp_description_id" aria-controls="exp_description_id" role="tab" data-toggle="tab">實驗功能描述</a></li>
<li role="presentation"><a href="#exp_result_id" aria-controls="exp_result_id" role="tab" data-toggle="tab">實驗結果分析</a></li>
</ul>

js代碼（使用 Javascript 來啟用標簽頁）：

<script type="text/javascript">
$(‘#myTabs a[href="#center"]‘).tab(‘show‘)
$(‘#myTabs a[href="#account"]‘).tab(‘show‘)
$(‘#myTabs a[href="#exp_method_id"]‘).tab(‘show‘)
$(‘#myTabs a[href="#exp_diagram_id"]‘).tab(‘show‘)
$(‘#myTabs a[href="#exp_code_id"]‘).tab(‘show‘)
$(‘#myTabs a[href="#exp_description_id"]‘).tab(‘show‘)
$(‘#myTabs a[href="#exp_result_id"]‘).tab(‘show‘)
</script>

相應div裏面的內容：

<div role="tabpanel" class="tab-pane fade in active" id="center">值</div>

<div role="tabpanel" class="tab-pane fade " id="account"></div>

......

可在每個div中設置上下頁來切換不同div

<ul role="tablist"class="page">

<li role="presentation"><a href="#exp_result_id" aria-controls="exp_result_id" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-backward"></span>上一頁&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
<li role="presentation"><a href="#account" aria-controls="account" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-forward"></span>下一頁</a></li>
</ul>

<ul role="tablist"class="page">
<li role="presentation"><a href="#center" aria-controls="center" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-backward"></span>上一頁&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
<li role="presentation"><a href="#exp_method_id" aria-controls="messages" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-forward"></span>下一頁</a></li>
</ul>

......

js代碼：

<script type="text/javascript">

var nr=document.getElementsByTagName(‘li‘);

for(i = 0; i< nr.length ; i++){

nr[i].onclick = function(){

alert( this.innerHTML )
}
for(i=nr.length; i>=0 ; i--){

nr[i].onclick = function(){

alert( this.innerHTML )
}

}

</script>

js循環div可選擇其他方式，繼續研究。

bootstrap中利用Tag實現多個div的上下頁切換