English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap-Basisanleitung

Bootstrap-Plugins

Bootstrap-Dropdown-Menü

Dieses Kapitel wird sich auf die Dropdown-Liste von Bootstrap konzentrieren. Dropdown-Listen sind umschaltbar und werden als Kontextmenüs in Listenform angezeigt. Dies kann durch die Verwendung von Dropdown (Dropdown) JavaScript-Plugin .

Um die Dropdown-Liste zu verwenden, ist es ausreichend, die Klasse zu interagieren .dropdown Innerhalb der Dropdown-Liste hinzufügen. Der folgende Beispiel zeigt die grundlegenden Dropdown-Listen:

在线示例

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Bootstrap　示例　-　Dropdown-Liste (Dropdown)</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="dropdown">
	<button　type="button"　class="btn　dropdown-toggle"　id="dropdownMenu1"　
			data-toggle="dropdown">
		主题
		<span　class="caret"></span>
	</button>
	<ul　class="dropdown-menu"　role="menu"　aria-labelledby="dropdownMenu1">
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">Java</a>
		</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">数据挖掘</a>
		</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">数据通信/网络</a>
		</li>
		<li　role="presentation"　class="divider"></li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">分离的链接</a>
		</li>
	</ul>
</div>
</body>
</html>
测试看看 ‹/›

结果如下所示：

Optionen

Ausrichten

Durch das Hinzufügen von .dropdown-menu Fügen Sie die Klasse hinzu .pull-right Rechtsausgerichtete Dropdown-Liste. Der folgende Beispiel zeigt dies:

在线示例

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Bootstrap　示例　-　Rechtsausgerichtete Dropdown-Liste</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="dropdown">
	<button　type="button"　class="btn　dropdown-toggle"　id="dropdownMenu1"　
			data-toggle="dropdown">Thema
		<span　class="caret"></span>
	</button>
	<ul　class="dropdown-menu　pull-right"　role="menu"　
		aria-labelledby="dropdownMenu1">
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">Java</a>
		</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">数据挖掘</a>
		</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">数据通信/网络</a>
		</li>
		<li　role="presentation"　class="divider"></li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">分离的链接</a>
		</li>
	</ul>
</div>
</body>
</html>
测试看看 ‹/›

结果如下所示：

标题

您可以使用 class dropdown-header 向下拉菜单的标签区域添加标题。下面的示例演示了这点：

在线示例

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Bootstrap　示例　-　下拉菜单标题</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="dropdown">
	<button　type="button"　class="btn　dropdown-toggle"　id="dropdownMenu1"　
			data-toggle="dropdown">
		主题
		<span　class="caret"></span>
	</button>
	<ul　class="dropdown-menu"　role="menu"　aria-labelledby="dropdownMenu1">
		<li　role="presentation"　class="dropdown-header">下拉菜单标题</li>
		<li　role="presentation"　>
			<a　role="menuitem"　tabindex="-1"　href="#">Java</a>
		</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">数据挖掘</a>
		</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">
				数据通信/网络
			</a>
		</li>
		<li　role="presentation"　class="divider"></li>
		<li　role="presentation"　class="dropdown-header">下拉菜单标题</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">分离的链接</a>
		</li>
	</ul>
</div>
</body>
</html>
测试看看 ‹/›

结果如下所示：

Mehr Beispiele

KlasseBeschreibungBeispiel
.dropdownBestimmen Sie das Dropdown-Menü, alle Dropdown-Menüs sind in .dropdown verpacktVersuchen Sie es aus
.dropdown-menuErstellen Sie ein Dropdown-MenüVersuchen Sie es aus
.dropdown-menu-rightRechtsbündige Dropdown-MenüsVersuchen Sie es aus
.dropdown-headerHinzufügen eines Titels im Dropdown-MenüVersuchen Sie es aus
.dropupBestimmung des Dropdown-Menüs, das nach oben springtVersuchen Sie es aus
.disabledDeaktiviertes Element im Dropdown-MenüVersuchen Sie es aus
.dividerTrennstrich im Dropdown-MenüVersuchen Sie es aus
Bootstrap-Schaltflächen-GruppeBootstrap-Schriftart-Icon(Glyphicons)