Bootstrap 基礎(chǔ)教程
Bootstrap 環(huán)境安裝
Bootstrap 教程
Bootstrap CSS
Bootstrap CSS 概覽
Bootstrap 按鈕
Bootstrap 表單
Bootstrap 表格
Bootstrap 代碼
Bootstrap 輔助類
Bootstrap 排版
Bootstrap 圖片
Bootstrap 網(wǎng)格系統(tǒng)
Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：堆疊的水平
Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：手機(jī)、平板電腦、臺(tái)式電腦
Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：中型和大型設(shè)備
Bootstrap 響應(yīng)式實(shí)用工具
Bootstrap 布局組件
Bootstrap Well
Bootstrap 按鈕下拉菜單
Bootstrap 按鈕組
Bootstrap 標(biāo)簽
Bootstrap 超大屏幕（Jumbotron）
Bootstrap 導(dǎo)航欄
Bootstrap 導(dǎo)航元素
Bootstrap 多媒體對(duì)象（Media Object）
Bootstrap 分頁(yè)
Bootstrap 徽章（Badges）
Bootstrap 進(jìn)度條
Bootstrap 警告（Alerts）
Bootstrap 列表組
Bootstrap 面板（Panels）
Bootstrap 面包屑導(dǎo)航（Breadcrumbs）
Bootstrap 輸入框組
Bootstrap 縮略圖
Bootstrap 下拉菜單（Dropdowns）
Bootstrap 頁(yè)面標(biāo)題（Page Header）
Bootstrap 字體圖標(biāo)(Glyphicons)
Bootstrap 插件
Bootstrap 按鈕（Button）
Bootstrap 標(biāo)簽頁(yè)（Tab）
Bootstrap 插件概覽
Bootstrap 彈出框（Popover）
Bootstrap 附加導(dǎo)航（Affix）
Bootstrap 滾動(dòng)監(jiān)聽(tīng)（Scrollspy）
Bootstrap 過(guò)渡效果（Transition）
Bootstrap 警告框（Alert）
Bootstrap 輪播（Carousel）
Bootstrap 模態(tài)框（Modal）插件
Bootstrap 提示工具（Tooltip）
Bootstrap 下拉菜單（Dropdown）
Bootstrap 折疊（Collapse）
Bootstrap 附錄
Bootstrap CSS編碼規(guī)范
Bootstrap HTML編碼規(guī)范
Bootstrap UI 編輯器
?
This document uses PHP Chinese website manual Release
characters
Bootstrap 標(biāo)簽頁(yè)（Tab）
標(biāo)簽頁(yè)（Tab）在 Bootstrap 導(dǎo)航元素 一章中介紹過(guò)。通過(guò)結(jié)合一些 data 屬性，您可以輕松地創(chuàng)建一個(gè)標(biāo)簽頁(yè)界面。通過(guò)這個(gè)插件您可以把內(nèi)容放置在標(biāo)簽頁(yè)或者是膠囊式標(biāo)簽頁(yè)甚至是下拉菜單標(biāo)簽頁(yè)中。
如果您想要單獨(dú)引用該插件的功能，那么您需要引用 tab.js。或者，正如 Bootstrap 插件概覽 一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。
用法
您可以通過(guò)以下兩種方式啟用標(biāo)簽頁(yè)：
-
通過(guò) data 屬性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到錨文本鏈接中。
添加 nav 和 nav-tabs 類到 ul 中，將會(huì)應(yīng)用 Bootstrap 標(biāo)簽樣式，添加 nav 和 nav-pills 類到 ul 中，將會(huì)應(yīng)用 Bootstrap 膠囊式樣式。
<ul?class="nav?nav-tabs"> ???<li><a?href="#identifier"?data-toggle="tab">Home</a></li> ... </ul>
-
通過(guò) JavaScript：您可以使用 Javscript 來(lái)啟用標(biāo)簽頁(yè)，如下所示：
$('#myTab?a').click(function?(e)?{ ??e.preventDefault() ??$(this).tab('show') })下面的實(shí)例演示了以不同的方式來(lái)激活各個(gè)標(biāo)簽頁(yè)：
//?通過(guò)名稱選取標(biāo)簽頁(yè) $('#myTab?a[href="#profile"]').tab('show') ? //?選取第一個(gè)標(biāo)簽頁(yè) $('#myTab?a:first').tab('show')? //?選取最后一個(gè)標(biāo)簽頁(yè) $('#myTab?a:last').tab('show')? //?選取第三個(gè)標(biāo)簽頁(yè)（從?0?開(kāi)始索引） $('#myTab?li:eq(2)?a').tab('show')
淡入淡出效果
如果需要為標(biāo)簽頁(yè)設(shè)置淡入淡出效果，請(qǐng)?zhí)砑?.fade 到每個(gè) .tab-pane 后面。第一個(gè)標(biāo)簽頁(yè)必須添加 .in 類，以便淡入顯示初始內(nèi)容，如下面實(shí)例所示：
<div?class="tab-content"> ??<div?class="tab-pane?fade?in?active"?id="home">...</div> ??<div?class="tab-pane?fade"?id="svn">...</div> ??<div?class="tab-pane?fade"?id="ios">...</div> ??<div?class="tab-pane?fade"?id="java">...</div> </div>
實(shí)例
下面的實(shí)例演示了使用 data 屬性的標(biāo)簽頁(yè)（Tab）插件及其淡入淡出的效果：
<!DOCTYPE?html> <html> <head> ???<title>Bootstrap?實(shí)例?-?標(biāo)簽頁(yè)（Tab）插件</title> ???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet"> ???<script?src="/scripts/jquery.min.js"></script> ???<script?src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <ul?id="myTab"?class="nav?nav-tabs"> ???<li?class="active"> ??????<a?href="#home"?data-toggle="tab"> ?????????jianzhan?Home ??????</a> ???</li> ???<li><a?href="#ios"?data-toggle="tab">iOS</a></li> ???<li?class="dropdown"> ??????<a?href="#"?id="myTabDrop1"?class="dropdown-toggle"? ?????????data-toggle="dropdown">Java? ?????????<b?class="caret"></b> ??????</a> ??????<ul?class="dropdown-menu"?role="menu"?aria-labelledby="myTabDrop1"> ?????????<li><a?href="#jmeter"?tabindex="-1"?data-toggle="tab">jmeter</a></li> ?????????<li><a?href="#ejb"?tabindex="-1"?data-toggle="tab">ejb</a></li> ??????</ul> ???</li> </ul> <div?id="myTabContent"?class="tab-content"> ???<div?class="tab-pane?fade?in?active"?id="home"> ??????<p>W3Cschoool手冊(cè)網(wǎng)是一個(gè)提供最新的web技術(shù)站點(diǎn)，本站免費(fèi)提供了建站相關(guān)的技術(shù)文檔，幫助廣大web技術(shù)愛(ài)好者快速入門(mén)并建立自己的網(wǎng)站。菜鳥(niǎo)先飛早入行——學(xué)的不僅是技術(shù)，更是夢(mèng)想。</p> ???</div> ???<div?class="tab-pane?fade"?id="ios"> ??????<p>iOS?是一個(gè)由蘋(píng)果公司開(kāi)發(fā)和發(fā)布的手機(jī)操作系統(tǒng)。最初是于?2007?年首次發(fā)布?iPhone、iPod?Touch?和?Apple? ??????TV。iOS?派生自?OS?X，它們共享?Darwin?基礎(chǔ)。OS?X?操作系統(tǒng)是用在蘋(píng)果電腦上，iOS?是蘋(píng)果的移動(dòng)版本。</p> ???</div> ???<div?class="tab-pane?fade"?id="jmeter"> ??????<p>jMeter?是一款開(kāi)源的測(cè)試軟件。它是?100%?純?Java?應(yīng)用程序，用于負(fù)載和性能測(cè)試。</p> ???</div> ???<div?class="tab-pane?fade"?id="ejb"> ??????<p>Enterprise?Java?Beans（EJB）是一個(gè)創(chuàng)建高度可擴(kuò)展性和強(qiáng)大企業(yè)級(jí)應(yīng)用程序的開(kāi)發(fā)架構(gòu)，部署在兼容應(yīng)用程序服務(wù)器（比如?JBOSS、Web?Logic?等）的?J2EE?上。 ??????</p> ???</div> </div> </body> </html>
結(jié)果如下所示：
方法
.$().tab：該方法可以激活標(biāo)簽頁(yè)元素和內(nèi)容容器。標(biāo)簽頁(yè)需要用一個(gè) data-target 或者一個(gè)指向 DOM 中容器節(jié)點(diǎn)的 href。
<ul?class="nav?nav-tabs"?id="myTab">
??<li?class="active"><a?href="#identifier"?data-toggle="tab">Home</a></li>
??.....
</ul>
<div?class="tab-content">
??<div?class="tab-pane?active"?id="home">...</div>
??.....
</div>
<script>
??$(function?()?{
????$('#myTab?a:last').tab('show')
??})
</script>
實(shí)例
下面的實(shí)例演示了標(biāo)簽頁(yè)（Tab）插件方法 .tab 的用法。在本實(shí)例中，第二個(gè)標(biāo)簽頁(yè) iOS 是激活的：
<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?標(biāo)簽頁(yè)（Tab）插件方法</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<ul?id="myTab"?class="nav?nav-tabs">
???<li?class="active"><a?href="#home"?data-toggle="tab">
??????jianzhan?Home</a>
???</li>
???<li><a?href="#ios"?data-toggle="tab">iOS</a></li>
???<li?class="dropdown">
??????<a?href="#"?id="myTabDrop1"?class="dropdown-toggle"?
?????????data-toggle="dropdown">Java?<b?class="caret"></b>
??????</a>
??????<ul?class="dropdown-menu"?role="menu"?aria-labelledby="myTabDrop1">
?????????<li><a?href="#jmeter"?tabindex="-1"?data-toggle="tab">
????????????jmeter</a>
?????????</li>
?????????<li><a?href="#ejb"?tabindex="-1"?data-toggle="tab">
????????????ejb</a>
?????????</li>
??????</ul>
???</li>
</ul>
<div?id="myTabContent"?class="tab-content">
???<div?class="tab-pane?fade?in?active"?id="home">
??????<p>W3Cschoool手冊(cè)網(wǎng)是一個(gè)提供最新的web技術(shù)站點(diǎn)，本站免費(fèi)提供了建站相關(guān)的技術(shù)文檔，幫助廣大web技術(shù)愛(ài)好者快速入門(mén)并建立自己的網(wǎng)站。菜鳥(niǎo)先飛早入行——學(xué)的不僅是技術(shù)，更是夢(mèng)想。</p>
???</div>
???<div?class="tab-pane?fade"?id="ios">
??????<p>iOS?是一個(gè)由蘋(píng)果公司開(kāi)發(fā)和發(fā)布的手機(jī)操作系統(tǒng)。最初是于?2007?年首次發(fā)布?iPhone、iPod?Touch?和?Apple?
??????TV。iOS?派生自?OS?X，它們共享?Darwin?基礎(chǔ)。OS?X?操作系統(tǒng)是用在蘋(píng)果電腦上，iOS?是蘋(píng)果的移動(dòng)版本。</p>
???</div>
???<div?class="tab-pane?fade"?id="jmeter">
??????<p>jMeter?是一款開(kāi)源的測(cè)試軟件。它是?100%?純?Java?應(yīng)用程序，用于負(fù)載和性能測(cè)試。</p>
???</div>
???<div?class="tab-pane?fade"?id="ejb">
??????<p>Enterprise?Java?Beans（EJB）是一個(gè)創(chuàng)建高度可擴(kuò)展性和強(qiáng)大企業(yè)級(jí)應(yīng)用程序的開(kāi)發(fā)架構(gòu)，部署在兼容應(yīng)用程序服務(wù)器（比如?JBOSS、Web?Logic?等）的?J2EE?上。
??????</p>
???</div>
</div>
<script>
???$(function?()?{
??????$('#myTab?li:eq(1)?a').tab('show');
???});
</script>
</body>
</html>
結(jié)果如下所示：
事件
下表列出了標(biāo)簽頁(yè)（Tab）插件中要用到的事件。這些事件可在函數(shù)中當(dāng)鉤子使用。
| 事件 | 描述 | 實(shí)例 |
|---|---|---|
| show.bs.tab | 該事件在標(biāo)簽頁(yè)顯示時(shí)觸發(fā)，但是必須在新標(biāo)簽頁(yè)被顯示之前。分別使用 event.target 和 event.relatedTarget 來(lái)定位到激活的標(biāo)簽頁(yè)和前一個(gè)激活的標(biāo)簽頁(yè)。 | $('a[data-toggle="tab"]').on('show.bs.tab',?function?(e)?{
??e.target?//?激活的標(biāo)簽頁(yè)
??e.relatedTarget?//?前一個(gè)激活的標(biāo)簽頁(yè)
}) |
| shown.bs.tab | 該事件在標(biāo)簽頁(yè)顯示時(shí)觸發(fā)，但是必須在某個(gè)標(biāo)簽頁(yè)已經(jīng)顯示之后。分別使用 event.target 和 event.relatedTarget 來(lái)定位到激活的標(biāo)簽頁(yè)和前一個(gè)激活的標(biāo)簽頁(yè)。 | $('a[data-toggle="tab"]').on('shown.bs.tab',?function?(e)?{
??e.target?//?激活的標(biāo)簽頁(yè)
??e.relatedTarget?//?前一個(gè)激活的標(biāo)簽頁(yè)
}) |
實(shí)例
下面的實(shí)例演示了標(biāo)簽頁(yè)（Tab）插件事件的用法。在本實(shí)例中，將顯示當(dāng)前和前一個(gè)訪問(wèn)過(guò)的標(biāo)簽頁(yè)：
<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?標(biāo)簽頁(yè)（Tab）插件事件</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<hr>
???<p?class="active-tab"><strong>激活的標(biāo)簽頁(yè)</strong>：<span></span></p>
???<p?class="previous-tab"><strong>前一個(gè)激活的標(biāo)簽頁(yè)</strong>：<span></span></p>
<hr>
<ul?id="myTab"?class="nav?nav-tabs">
???<li?class="active"><a?href="#home"?data-toggle="tab">
??????jianzhan?Home</a></li>
???<li><a?href="#ios"?data-toggle="tab">iOS</a></li>
???<li?class="dropdown">
??????<a?href="#"?id="myTabDrop1"?class="dropdown-toggle"?
?????????data-toggle="dropdown">
?????????Java?<b?class="caret"></b></a>
??????<ul?class="dropdown-menu"?role="menu"?aria-labelledby="myTabDrop1">
?????????<li><a?href="#jmeter"?tabindex="-1"?data-toggle="tab">jmeter</a></li>
?????????<li><a?href="#ejb"?tabindex="-1"?data-toggle="tab">ejb</a></li>
??????</ul>
???</li>
</ul>
<div?id="myTabContent"?class="tab-content">
???<div?class="tab-pane?fade?in?active"?id="home">
??????<p>W3Cschoool手冊(cè)網(wǎng)是一個(gè)提供最新的web技術(shù)站點(diǎn)，本站免費(fèi)提供了建站相關(guān)的技術(shù)文檔，幫助廣大web技術(shù)愛(ài)好者快速入門(mén)并建立自己的網(wǎng)站。菜鳥(niǎo)先飛早入行——學(xué)的不僅是技術(shù)，更是夢(mèng)想。</p>
???</div>
???<div?class="tab-pane?fade"?id="ios">
??????<p>iOS?是一個(gè)由蘋(píng)果公司開(kāi)發(fā)和發(fā)布的手機(jī)操作系統(tǒng)。最初是于?2007?年首次發(fā)布?iPhone、iPod?Touch?和?Apple?
??????TV。iOS?派生自?OS?X，它們共享?Darwin?基礎(chǔ)。OS?X?操作系統(tǒng)是用在蘋(píng)果電腦上，iOS?是蘋(píng)果的移動(dòng)版本。</p>
???</div>
???<div?class="tab-pane?fade"?id="jmeter">
??????<p>jMeter?是一款開(kāi)源的測(cè)試軟件。它是?100%?純?Java?應(yīng)用程序，用于負(fù)載和性能測(cè)試。</p>
???</div>
???<div?class="tab-pane?fade"?id="ejb">
??????<p>Enterprise?Java?Beans（EJB）是一個(gè)創(chuàng)建高度可擴(kuò)展性和強(qiáng)大企業(yè)級(jí)應(yīng)用程序的開(kāi)發(fā)架構(gòu)，部署在兼容應(yīng)用程序服務(wù)器（比如?JBOSS、Web?Logic?等）的?J2EE?上。
??????</p>
???</div>
</div>
<script>
???$(function(){
??????$('a[data-toggle="tab"]').on('shown.bs.tab',?function?(e)?{
??????//?獲取已激活的標(biāo)簽頁(yè)的名稱
??????var?activeTab?=?$(e.target).text();?
??????//?獲取前一個(gè)激活的標(biāo)簽頁(yè)的名稱
??????var?previousTab?=?$(e.relatedTarget).text();?
??????$(".active-tab?span").html(activeTab);
??????$(".previous-tab?span").html(previousTab);
???});
});
</script>
</body>
</html>
結(jié)果如下所示：
