Bootstrap Dropdowns (Dropdowns)
Dieses Kapitel behandelt Bootstrap-Dropdowns. Ein Dropdown-Menü ist ein umschaltbares Kontextmenü, das Links in Listenform anzeigt. Dies kann durch die Interaktion mit demDropdown JavaScript Pluginimplementiert werden.
Um ein Dropdown zu verwenden, fügen Sie einfach der Klasse.dropdownhinzu. Das folgende Beispiel demonstriert ein einfaches Dropdown:
Beispiel
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">Theme<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="#">Data Mining</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Data Communication/Network</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Separated link</a>
</li>
</ul>
</div>
Ausprobieren »
Das Ergebnis wird unten angezeigt:
Optionen
Alignment
Durch das Hinzufügen von.dropdown-menuzur Klasse.pull-rightwird das Dropdown-Menü rechtsbündig ausgerichtet. Das folgende Beispiel demonstriert dies:
Beispiel
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">Theme<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="#">Data Mining</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Data Communication/Network</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Separated link</a>
</li>
</ul>
</div>
Ausprobieren »
Das Ergebnis wird unten angezeigt:
Header
Sie können die Klassedropdown-headerverwenden, um dem Beschriftungsbereich des Dropdown-Menüs einen Header hinzuzufügen. Das folgende Beispiel demonstriert dies:
Beispiel
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">Theme<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Data Mining</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Data Communication/Network</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Separated link</a>
</li>
</ul>
</div>
Ausprobieren »
Das Ergebnis wird unten angezeigt:
Weitere Beispiele
| Klasse |
Beschreibung |
Beispiel |
| .dropdown |
Geben Sie das Dropdown an; alle Dropdowns sind in .dropdown eingeschlossen |
Ausprobieren |
| .dropdown-menu |
Erstellen Sie ein Dropdown |
Ausprobieren |
| .dropdown-menu-right |
Dropdown-Menü rechts ausrichten |
Ausprobieren |
| .dropdown-header |
Einen Header zum Dropdown-Menü hinzufügen |
Ausprobieren |
| .dropup |
Ein nach oben ausklappbares Dropdown-Menü festlegen |
Ausprobieren |
| .disabled |
Deaktivierte Elemente im Dropdown-Menü |
Ausprobieren |
| .divider |
Trennlinien im Dropdown-Menü |
Ausprobieren |
Weitere Erweiterungen
