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