淺析Bootstrap中Tab(標籤頁)的使用方法
阿新 • • 發佈:2020-06-28
Bootstrap 導航元素使用相同的標記和基類,改變修飾的class
,可以在不同的樣式間進行切換
如".nav-pills
"(膠囊式導航)與 “.nav-tabs
” (標籤式導航)
建立一個標籤式的導航選單:
以一個帶有class.nav
的無序列表開始。
新增 class.nav-tabs
。
下面的例項演示了這點:
<!-- 導航區 -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- 面板區 -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...