Bootstrap Grundtutorials

Bootstrap Plugin

Bootstrap Tooltips Plugin Bootstrap Scrollspy Plugin

Bootstrap Registerkarten (Tab) Plugin

Registerkarte (Tab) in Bootstrap Navigation Elements im Kapitel vorgestellt. Durch die Kombination einiger data-Attribute können Sie leicht eine Registerkarten-Oberfläche erstellen. Mit diesem Plugin können Sie Inhalte in Registerkarten, Kapselregisterkarten oder Dropdown-Registerkarten platzieren.

wenn Sie die Funktionen des Plugins einzeln referenzieren möchten, müssen Sie referenzieren tab.js。Oder wie Bootstrap Plugin-Übersicht wie im Kapitel erwähnt, können Sie referenzieren bootstrap.js oder die komprimierte Version bootstrap.min.js。

Verwendung

Sie können die Registerkarte auf zwei Arten aktivieren:

durch data-Attribut：Sie müssen hinzufügen data-toggle="tab" oder data-toggle="pill" zu den Textlinks.
hinzufügen nav 和 nav-tabs Klasse zu ul wird Bootstrap Registerkarten-Stil，hinzufügen nav 和 nav-pills Klasse zu ul wird Bootstrap Kapselstil。
```
<ul>
　　　　<li><a　href="#identifier"　data-toggle="tab">Home</a></li>
　　　　...
</ul>
```

durch JavaScript：Sie können JavaScript verwenden, um die Registerkarte zu aktivieren, wie folgt:

$('#myTab a').click(function(e) {
　　e.preventDefault()
　　$(this).tab('show')
)

Nachstehende Beispiele zeigen verschiedene Methoden zur Aktivierung der Tabs:

//　Tab durch Name auswählen
$('#myTab　a[href="#profile"]').tab('show')
//　Den ersten Tab auswählen
$('#myTab　a:first').tab('show')
//　Den letzten Tab auswählen
$('#myTab　a:last').tab('show')
//　Den dritten Tab (ab Index 0) auswählen
$('#myTab　li:eq(2)　a').tab('show')

Ein- und Ausblenden-Effekt

hinzufügen, wenn ein Ein- und Ausblenden-Effekt für das Tab festgelegt werden soll: .fade zu jedem .tab-pane hinter. Der erste Tab muss .in Klasse, um die anfängliche Anzeige sanft einzuführen, wie im folgenden Beispiel gezeigt:

<div>
　　　　<div　id="home">.../div>
　　　　<div　id="svn">.../div>
　　　　<div　id="ios">.../div>
　　　　<div　id="java">.../div>
</div>

在线示例

Nachstehende Beispiele zeigen den Einsatz des Tab-Plugins mit den data-Attributen sowie die Ein- und Ausblenden-Effekte:

在线示例

示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　Tab-Plugin</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul　id="myTab"　class="nav　nav-tabs">
	<li　class="active">
		<a　href="#home"　data-toggle="tab">
			　Grundlagen-Tutorial-Website
		</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>基础教程网是一个提供最新的 web 技术站点，本站免费提供了建站相关的技术文档，帮助广大 web 技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学好基础，才能走的更远。</p>
	</div>
	<div class="tab-pane fade" id="ios">
		<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于　2007　年首次发布 iPhone、iPod Touch 和 Apple　
			TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
	</div>
	<div class="tab-pane fade" id="jmeter">
		<p>jMeter 是一款开源的测试软件。它是　100% 纯 Java 应用程序，用于负载和性能测试。</p>
	</div>
	<div class="tab-pane fade" id="ejb">
		<p>Enterprise Java Beans (EJB) 是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
		</p>
	</div>
</div>
</body>
</html>

Test to see ‹/›

The results are as follows:

Verfahren

$().tab：Diese Methode kann das Tab-Element und den Inhaltscontainer aktivieren. Ein Tab muss mit einem data-target oder ein Ziel, das auf einen Containerknoten im DOM verweist: href。

<ul　id="myTab">
　　　　<li><a　href="#identifier"　data-toggle="tab">Home</a></li>
　　　　.....
</ul>
<div>
　　　　<div　id="home">.../div>
　　　　.....
</div>
<script>
　　　　$(function　()　{
　　　　　　　　$('#myTab　a:last').tab('show')
　　　　)
</script>

在线示例

Nachstehende Beispiele zeigen die Methoden des Tab-Plugins. .tab Verwendung. In diesem Beispiel ist der zweite Tab aktiv: iOS aktiv ist:

在线示例

示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　Tab-Plugin-Methode</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul　id="myTab"　class="nav　nav-tabs">
	<li　class="active">
		<a　href="#home"　data-toggle="tab">Grundlagen-Tutorial-Website</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>基础教程网是一个提供最新的 web 技术站点，本站免费提供了建站相关的技术文档，帮助广大 web 技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学好基础，才能走的更远。</p>
	</div>
	<div class="tab-pane fade" id="ios">
		<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于　2007　年首次发布 iPhone、iPod Touch 和 Apple　
			TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
	</div>
	<div class="tab-pane fade" id="jmeter">
		<p>jMeter 是一款开源的测试软件。它是　100% 纯 Java 应用程序，用于负载和性能测试。</p>
	</div>
	<div class="tab-pane fade" id="ejb">
		<p>Enterprise Java Beans (EJB) 是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
		</p>
	</div>
</div>
<script>
	$(function　()　{
		$('#myTab　li:eq(1)　a').tab('show');
	});
</script>
</body>
</html>

Test to see ‹/›

The results are as follows:

事件

Die folgende Tabelle listet die Ereignisse auf, die im Tab-Plugin verwendet werden. Diese Ereignisse können als Hooks in Funktionen verwendet werden.

事件	描述	示例
show.bs.tab	该事件在标签页显示时触发，但是必须在新标签页被显示之前。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。	$('a[data-toggle="tab"]').on('show.bs.tab',　function　(e)　{ 　　e.target　//　激活的标签页　　e.relatedTarget　//　前一个激活的标签页 )
shown.bs.tab	该事件在标签页显示时触发，但是必须在某个标签页已经显示之后。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。	$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 　　e.target　//　激活的标签页　　e.relatedTarget　//　前一个激活的标签页 )

在线示例

下面的示例演示了标签页(Tab)插件事件的用法。在本示例中，将显示当前和前一个访问过的标签页：

在线示例

示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　标签页(Tab)插件事件</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<hr>
	<p　class="active-tab"><strong>激活的标签页</strong>：<span></span></p>
	<p　class="previous-tab"><strong>前一个激活的标签页</strong>：<span></span></p>
<hr>
<ul　id="myTab"　class="nav　nav-tabs">
	<li　class="active"><a　href="#home"　data-toggle="tab">
		基础教程网</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>基础教程网是一个提供最新的 web 技术站点，本站免费提供了建站相关的技术文档，帮助广大 web 技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学好基础，才能走的更远。</p>
	</div>
	<div class="tab-pane fade" id="ios">
		<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于　2007　年首次发布 iPhone、iPod Touch 和 Apple　
			TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
	</div>
	<div class="tab-pane fade" id="jmeter">
		<p>jMeter 是一款开源的测试软件。它是　100% 纯 Java 应用程序，用于负载和性能测试。</p>
	</div>
	<div class="tab-pane fade" id="ejb">
		<p>Enterprise Java Beans (EJB) 是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
		</p>
	</div>
</div>
<script>
$(function() {
	$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
		//　获取已激活的标签页的名称
		var activeTab = $(e.target).text();　
		//　获取前一个激活的标签页的名称
		var previousTab = $(e.relatedTarget).text();　
		$('.active-tab span
		$('.previous-tab span
	});
});
</script>
</body>
</html>

Test to see ‹/›

The results are as follows:

Bootstrap Tooltips Plugin Bootstrap Scrollspy Plugin