參考：Bootstrap(中)、w3schools(英)、RUNOOB(中)

導覽效果的頁籤面板

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#tab3-1"> 標籤1 </a> </li>
  <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab3-2"> 標籤2 </a> </li>
  <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab3-3"> 標籤3 </a> </li>
  <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab3-4"> 標籤4 </a> </li>
</ul>

<!-- Nav panes -->
<div class="tab-content">
  <div id="tab3-1" class="tab-pane active"> 內容1 </div>
  <div id="tab3-2" class="tab-pane"> 內容2 </div>
  <div id="tab3-3" class="tab-pane"> 內容3 </div>
  <div id="tab3-4" class="tab-pane"> 內容4 </div>
</div>