膠囊式菜單

本文轉載於:猿2048網站膠囊式菜單

<div>
<ul class="nav nav-tabs">
<li class="active"><a href="#Index" aria-controls="Index" role="tab" data-toggle="tab">首頁</a></li>
<li ><a href="#Index1" aria-controls="Index1" role="tab" data-toggle="tab">首頁1</a></li>
<li ><a href="#Index2" aria-controls="Index2" role="tab" data-toggle="tab">首頁2</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active panel-group" id="Index" role="tablist" aria-multiselectable="true">
<label>這是首頁</label>
</div>
<div class="tab-pane" id="Index1" role="tabpanel">
<label>這是首頁1</label>
</div>
<div class="tab-pane" id="Index2" role="tabpanel">
<label>這是首頁2</label>
</div>
</div>

效果以下：