標(biāo)簽頁(yè)是一個(gè)經(jīng)常使用的組件，可以放置較多的內(nèi)容系奉，有可以節(jié)省頁(yè)面空間企软。
代碼：
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<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">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
解析：
標(biāo)簽頁(yè)：
<ul class="nav nav-tabs" role="tablist">
下面的<div>是內(nèi)容：
<div class="tab-content">
標(biāo)簽對(duì)應(yīng)著內(nèi)容矮瘟，是通過(guò)鏈接id來(lái)定義的瞳脓。
比如標(biāo)簽：
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
對(duì)應(yīng)著內(nèi)容中：
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<a>的href指向的id。
無(wú)需寫任何JavaScript代碼澈侠，只需要簡(jiǎn)單地位頁(yè)面元素指定data-toggle="tab"為ul添加nav和nav-tbs class篡殷。
