Bootstrap 基础教程

Bootstrap 插件

Bootstrap-Slider-Plugin Bootstrap-Schaltflächen-Plugin

Bootstrap 折叠（Collapse）插件

折叠(Collapse)插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。

如果您想要单独引用该插件的功能，那么您需要引用 collapse.js。同时，也需要在您的 Bootstrap 版本中引用 Transition（过渡）插件。或者，正如 Bootstrap 插件概览一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js.

您可以使用折叠(Collapse)插件：

创建可折叠的分组或折叠面板(accordion)，如下所示：

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　折叠面板</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>
<div class="panel-group" id="accordion">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4　class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　href="#collapseOne">
					href="#collapseFour">　1　Klicken Sie auf mich, um zu öffnen, klicken Sie erneut auf mich, um zu falten. Der
				</a>
			</h4>
		</div>
		hide Methode-<div id="collapseOne" class="panel
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson　
				cred　nesciunt　sapiente　ea　proident.　Ad　vegan　excepteur　butcher　
				vice　lomo.
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4　class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　success">
					href="#collapseFour">　2　Klicken Sie auf mich, um zu öffnen, klicken Sie erneut auf mich, um zu falten. Der
				</a>
			</h4>
		</div>
		show Methode-collapse collapse">
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson　
				cred　nesciunt　sapiente　ea　proident.　Ad　vegan　excepteur　butcher　
				vice　lomo.
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4　class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　<div id="collapseTwo" class="panel
					href="#collapseFour">　3　Klicken Sie auf mich, um zu öffnen, klicken Sie erneut auf mich, um zu falten. Der
				</a>
			</h4>
		</div>
		toggle Methode-collapse collapse">
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson　
				cred　nesciunt　sapiente　ea　proident.　Ad　vegan　excepteur　butcher　
				vice　lomo.
			</div>
		</div>
	</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt dargestellt:

data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。
href 或 data-target 属性添加到父组件，它的值是子组件的 id.
data-parent 属性把折叠面板(accordion)的 id 添加到要展开或折叠的组件的链接上。

创建不带 accordion 标记的简单的可折叠组件(collapsible)，如下所示：

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　简单的可折叠组件</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>
<button　type="button"　class="btn　btn-primary"　data-toggle="collapse"　
		data-target="#demo">
	简单的可折叠组件
</button>
<div　id="demo"　class="collapse　in">
	Nihil anim keffiyeh helvetica, craft beer labore wes anderson　
	cred　nesciunt　sapiente　ea　proident.　Ad　vegan　excepteur　butcher　
	vice　lomo.
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt dargestellt:

正如您在示例中看到的，我们创建了一个可折叠的组件，与折叠面板(accordion)不同，我们没有添加属性 data-parent.

用法

下表列出了折叠(Collapse)插件用于处理繁重的伸缩的 class：

Class	Beschreibung	Beispiel
.collapse	隐藏内容。	Versuche es aus
.collapse.in	显示内容。	Versuche es aus
.collapsing	Wird hinzugefügt, wenn der Übergangseffekt beginnt, und entfernt, wenn der Übergangseffekt abgeschlossen ist.

Du kannst das Klappe (Collapse) Plugin auf zwei Arten verwenden:

Durch Datenattribute：Füge dem Element hinzu data-toggle="collapse" und data-target，um die Kontrolle über das klappbare Element automatisch zu vergeben.data-target Das Attribut akzeptiert einen CSS-Selektor und wendet den Falteffekt darauf an. Stelle sicher, dass du dem klappbaren Element eine Klasse hinzufügst .collapse。Füge zusätzliche Klasse hinzu, wenn du willst, dass es standardmäßig geöffnet ist .in.
Um eine ähnliche Gruppenerwaltung wie bei Klappläden (accordion) hinzuzufügen, füge die Datenattribute hinzu data-parent="#selector".
Durch JavaScript：Aktiviere die collapse-Methode über JavaScript, wie folgt:
```
$('.collapse').collapse()
```

Optionen

Einige Optionen werden über Datenattribute oder JavaScript übermittelt. Die folgende Tabelle listet diese Optionen auf:

Name der Option	Typ/Standardwert	Name der Datenattribut	Beschreibung
parent	selector Standardwert: false	data-parent	Wenn ein Selektor bereitgestellt wird, werden alle klappbaren Elemente unter dem angegebenen Elternteil geschlossen, wenn das klappbare Element angezeigt wird. Dies ähnelt dem Verhalten traditioneller Klappläden (accordion). - Dies hängt von accordion ab-Gruppenklasse.
toggle	boolean Standardwert: true	data-toggle	Wechsele den Aufruf des klappbaren Elements.

Methoden

Hier sind einige nützliche Methoden im Klappe (Collapse) Plugin:

Methoden	Beschreibung	Beispiel
Options: .collapse(options)	Aktiviere den Inhalt als klappbares Element. Akzeptiert ein optionales options-Objekt.	$('#identifier').collapse({ 　　　　$('function () { $('#collapseFour').collapse({ )
Toggle: .collapse('toggle')	Wechsel anzeigen/Verstecke das klappbare Element.	$('#identifier').collapse('toggle')
Show: .collapse('show')	Zeige das klappbare Element.	$('#identifier').collapse('show')
Hide: .collapse('hide')	Verstecke das klappbare Element.	$('#identifier').collapse('hide')

Online-Beispiel

Nachfolgender Beispiel zeigt die Verwendung der Methode:

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　Klappe (Collapse) 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>
<div class="panel-group" id="accordion">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4　class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　href="#collapseOne">
					href="#collapseFour">　1　Klicken Sie auf mich, um zu öffnen, klicken Sie erneut auf mich, um zu falten. Der--href="#collapseOne">
				</a>
			</h4>
		</div>
		hide Methode-<div id="collapseOne" class="panel
			<div class="panel-body">
				<div id="collapseFour" class="panel　
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred　
				nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
			</div>
		</div>
	</div>
	<div class="panel panel-collapse collapse in">
		<div class="panel-heading">
			<h4　class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　success">
					href="#collapseFour">　2　Klicken Sie auf mich, um zu öffnen, klicken Sie erneut auf mich, um zu falten. Der--href="#collapseTwo">
				</a>
			</h4>
		</div>
		show Methode-collapse collapse">
			<div class="panel-body">
				<div id="collapseFour" class="panel　
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred　
				nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
			</div>
		</div>
	</div>
	<div class="panel panel-info">
		<div class="panel-heading">
			<h4　class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　<div id="collapseTwo" class="panel
					href="#collapseFour">　3　Klicken Sie auf mich, um zu öffnen, klicken Sie erneut auf mich, um zu falten. Der--href="#collapseThree">
				</a>
			</h4>
		</div>
		toggle Methode-collapse collapse">
			<div class="panel-body">
				<div id="collapseFour" class="panel　
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred　
				nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
			</div>
		</div>
	</div>
	<div class="panel panel-<div id="collapseThree" class="panel
		<div class="panel-heading">
			<h4　class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　warning">
					href="#collapseFour">　4　Klicken Sie auf mich, um zu öffnen, klicken Sie erneut auf mich, um zu falten. Der--Teil
				</a>
			</h4>
		</div>
		options Methode-collapse collapse">
			<div class="panel-body">
				<div id="collapseFour" class="panel　
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred　
				nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	lomo.
		$('function () { $('#collapseFour').collapse({
	toggle: false
	});});
	$('function () { $('#collapseTwo').collapse('show')});
	$('function () { $('#collapseThree').collapse('toggle')});
</script>　　
</body>
</html>

Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt dargestellt:

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

$(function () { $('#collapseOne').collapse('hide')});

Die folgende Tabelle listet die Ereignisse auf, die im Collapse-Plugin verwendet werden. Diese Ereignisse können als Hooks in Funktionen verwendet werden.	Beschreibung	Beispiel
show.bs.collapse	Dieses Ereignis wird ausgelöst, nachdem die show-Methode aufgerufen wurde.	$('#identifier').on('show.bs.collapse', function () { 　　　　//　Führen Sie einige Aktionen aus... )
shown.bs.collapse	Dieses Ereignis wird ausgelöst, wenn das gefaltete Element für den Benutzer sichtbar wird (warten auf Abschluss der CSS-Übergangseffekte).	$('#identifier').on('shown.bs.collapse', function () { 　　　　//　Führen Sie einige Aktionen aus... )
hide.bs.collapse	Dieses Ereignis wird sofort ausgelöst, wenn die hide-Beispielmethode aufgerufen wird.	$('#identifier').on('hide.bs.collapse', function () { 　　　　//　Führen Sie einige Aktionen aus... )
hidden.bs.collapse	Dieses Ereignis wird ausgelöst, wenn das gefaltete Element für den Benutzer versteckt wird (warten Sie auf Abschluss des CSS-Übergangs).	$('#identifier').on('hidden.bs.collapse', function () { 　　　　//　Führen Sie einige Aktionen aus... )

Online-Beispiel

Die folgenden Beispiele zeigen die Verwendung von Ereignissen:

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　Collapse-Plugin-Ereignisse</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>
<div class="panel-group" id="accordion">
	<div class="panel panel-info">
		<div class="panel-heading">
			<h4　class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　href="#collapseexample">
					Klicken Sie auf mich, um zu öffnen, klicken Sie erneut auf mich, um zu schließen.--event shown
				</a>
			</h4>
		</div>
		<div id="collapseexample" class="panel-collapse collapse">
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson　
				cred nesciunt sapiente ea proident.　
				Ad vegan excepteur butcher vice lomo.
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(function () {　
		$('#collapseexample').on('show.bs.collapse', function () {
			alert('Hey, eine Warnung wird angezeigt, wenn Sie es öffnen');});
	});
</script>　
</body>
</html>

Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt dargestellt:

Bootstrap-Slider-Plugin Bootstrap-Schaltflächen-Plugin