Bootstrap Grundlagen教程

Bootstrap Plugins

Bootstrap Scrollspy Plugin Bootstrap Modal Plugin

Bootstrap Dropdown-Plugin (Dropdown)

Bootstrap Dropdown Menus Dieses Kapitel behandelt das Dropdown-Menü von Bootstrap, ohne jedoch auf die Interaktionsebene einzugehen. Dieses Kapitel wird die Interaktion des Dropdown-Menüs im Detail erläutern. Mit dem Dropdown-Menü-Plugin (Dropdown) von Bootstrap können Sie Dropdown-Menüs zu jedem Component (z.B. Navigationsleiste, Tabs, Kapselmenü, Buttons) hinzufügen.

Möchten Sie die Funktionen dieses Plugins einzeln zitieren, dann müssen Sie dropdown.jsoder Übersicht über Bootstrap-Plugins Wie im Kapitel erwähnt, können Sie dies zitieren bootstrap.js oder den komprimierten bootstrap.min.js。

Verwendung

Sie können das versteckte Inhaltsbereich des Dropdown-Menü (Dropdown) Plugins umschalten:

durch data-Attribute: Fügen Sie Links oder Buttons data-toggle="dropdown" um das Dropdown-Menü umzuschalten, wie folgt:

<div>
　　<a data-toggle="dropdown" href="#">Dropdown-Menü (Dropdown) Trigger</a>
　　<ul role="menu" aria-labelledby="dLabel">
　　　　...
　　</ul>
</div>

Wenn Sie die Links vollständig beibehalten möchten (wenn JavaScript im Browser nicht aktiviert ist), verwenden Sie data-target Eigenschaft anstatt href="#":

<div>
　　<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
　　　　Dropdown-Menü (Dropdown) <span></span>
　　</a>
　　<ul role="menu" aria-labelledby="dLabel">
　　　　...
　　</ul>
</div>

Durch JavaScript: Durch JavaScript-Aufrufe die Dropdown-Menüs umschalten, verwenden Sie die folgenden Methoden:
```
$('.dropdown-toggle').dropdown()
```

Online-Beispiel

Innerhalb der Navigationsleiste

Der folgende Beispiel zeigt die Verwendung von Dropdown-Menüs innerhalb der Navigationsleiste:

Online-Beispiel

Beispiel

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Bootstrap　Beispiel　-　Standard-Navigationsleiste</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>
<nav　class="navbar　navbar-default"　role="navigation">
	<div　class="container-fluid">　
	<div　class="navbar-header">
		<a　class="navbar-brand"　href="#">Grund教程网</a>
	</div>
	<div>
		<ul　class="nav　navbar-nav">
			<li　class="active"><a　href="#">iOS</a></li>
			<li><a　href="#">SVN</a></li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle"　data-toggle="dropdown">
					Java　
					<b class="caret"></b>
				</a>
				<ul　class="dropdown-menu">
					<li><a href="#">jmeter</a></li>
					<li><a　href="#">EJB</a></li>
					<li><a　href="#">Jasper　Report</a></li>
					<li　class="divider"></li>
					<li><a　href="#">getrennter Link</a></li>
					<li　class="divider"></li>
					<li><a href="#">Another separate link</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>
</nav>
</body>
</html>

Test it out ‹/›

The results are as follows:

Innerhalb der Tab-Seiten

Der folgende Beispiel zeigt die Verwendung von Dropdown-Menüs innerhalb von Tab-Seiten:

Online-Beispiel

Beispiel

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Bootstrap　Beispiel　-　Tab-Seiten mit Dropdown-Menüs</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>
<p>Tab-Seiten mit Dropdown-Menüs</p>
<ul class="nav nav-tabs">
	<li class="active"><a href="#">Home</a></li>
	<li><a　href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li class="dropdown">
		<a class="dropdown-toggle"　data-toggle="dropdown" href="#">
			Java <span class="caret"></span>
		</a>
		<ul　class="dropdown-menu">
			<li><a href="#">Swing</a></li>
			<li><a href="#">jMeter</a></li>
			<li><a　href="#">EJB</a></li>
			<li　class="divider"></li>
			<li><a　href="#">getrennter Link</a></li>
		</ul>
	</li>
	<li><a　href="#">PHP</a></li>
</ul>
</body>
</html>

Test it out ‹/›

The results are as follows:

Optionen

Keine Optionen.

Methode

Der Umschalter der Dropdown-Liste hat eine einfache Methode, um die Dropdown-Liste anzuzeigen oder auszublenden.

$().dropdown('toggle')

Online-Beispiel

Die folgenden Beispiele demonstrate die Verwendung der Dropdown-Plugin-Methode:

Online-Beispiel

Beispiel

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">
	<title>Bootstrap　Beispiel　-　Dropdown-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>
<nav　class="navbar　navbar-default"　role="navigation">
	<div　class="container-fluid">　
	<div　class="navbar-header">
		<a　class="navbar-brand"　href="#">Grund教程网</a>
	</div>
	<div　id="myexample">
		<ul　class="nav　navbar-nav">
			<li　class="active"><a　href="#">iOS</a></li>
			<li><a　href="#">SVN</a></li>
			<li　class="dropdown"><a　href="#"　class="dropdown-toggle"　data-toggle="dropdown">Java　<b　class="caret"></b></a>
				<ul　class="dropdown-menu">
					<li><a　id="action-1"　href="#">meter</a></li>
					<li><a　href="#">EJB</a></li>
					<li><a　href="#">Jasper　Report</a></li>
					<li　class="divider"></li>
					<li><a　href="#">getrennter Link</a></li>
					<li　class="divider"></li>
					<li><a href="#">Another separate link</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>	
</nav>
<script>
$(function(){
	//　Default Display
	$(".dropdown-toggle").dropdown('toggle');
});　
</script>
</body>
</html>

Test it out ‹/›

The results are as follows:

Bootstrap Scrollspy Plugin Bootstrap Modal Plugin