WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

3-9. Navs 分頁標籤的設計

參考: 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>

 

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

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

 

 

go TOP