Bootstrap-4 -Dropdowns
Grundlegendes Dropdown
Ein Dropdown-Menü ist ein umschaltbares Menü, das es dem Benutzer ermöglicht, einen Wert aus einer vordefinierten Liste auszuwählen:
Beispiel
<div class="dropdown">
<button type="button" class="btn btn-primary
dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</div>
Beispiel erklärt
Die .dropdownKlasse gibt ein Dropdown-Menü an.
Um das Dropdown-Menü zu öffnen, verwenden Sie eine Schaltfläche oder einen Link mit einer Klasse von .dropdown-toggleund dem
data-toggle="dropdown"Attribut.
Fügen Sie die .dropdown-menuKlasse einem <div>Element hinzu, um das Dropdown-Menü tatsächlich zu erstellen. Fügen Sie dann die
.dropdown-itemKlasse zu jedem Element (Links oder Schaltflächen) im Dropdown-Menü hinzu.
Dropdown-Teiler
Die .dropdown-dividerKlasse wird verwendet, um Links innerhalb des Dropdown-Menüs mit einem dünnen horizontalen Rahmen zu trennen:
Beispiel
<div class="dropdown-divider"></div>
Dropdown-Kopfzeile
Die .dropdown-headerKlasse wird verwendet, um Header im Dropdown-Menü hinzuzufügen:
Beispiel
<div class="dropdown-header">Dropdown header 1</div>
Deaktivieren und aktive Elemente
Markieren Sie ein bestimmtes Dropdown-Element mit der .activeKlasse (fügt eine blaue Hintergrundfarbe hinzu).
Um ein Element im Dropdown-Menü zu deaktivieren, verwenden Sie die .disabledKlasse (erhält eine hellgraue Textfarbe und ein "Parkverbotszeichen"-Symbol beim Hover):
Beispiel
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
Dropdown-Position
Sie können auch ein „Dropright“- oder „Dropleft“-Menü erstellen, indem Sie dem Dropdown-Element die Klasse .droprightor hinzufügen. .dropleftBeachten Sie, dass das Caretzeichen/der Pfeil automatisch hinzugefügt wird:
Dropright
<div class="dropdown dropright">
Droplinks
<div class="dropdown dropleft">
Dropdown-Menü rechts
Um das Dropdown-Menü rechts auszurichten, fügen Sie die .dropdown-menu-rightKlasse mit .dropdown-menu zum Element hinzu:
Beispiel
<div class="dropdown-menu dropdown-menu-right">
Herunterfallen
Wenn Sie möchten, dass das Dropdown-Menü nach oben statt nach unten erweitert wird, ändern Sie das Element <div> mit class="dropdown" in "dropup":
Beispiel
<div class="dropup">
Dropdown-Text
Die .dropdown-item-textKlasse wird verwendet, um einem Dropdown-Element einfachen Text hinzuzufügen, oder wird für Links für das Standard-Link-Design verwendet.
Beispiel
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link
1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item-text" href="#">Text Link</a>
<span
class="dropdown-item-text">Just Text</span>
</div>
Gruppierte Schaltflächen mit einem Dropdown
Beispiel
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Geteilte Schaltflächen-Dropdowns
Beispiel
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
</div>
</div>
Vertikale Schaltflächengruppe mit Dropdown
Beispiel
<div class="btn-group-vertical">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Vollständige Bootstrap 4-Dropdown-Referenz
Eine vollständige Referenz aller Dropdown-Optionen, Methoden und Ereignisse finden Sie in unserer Bootstrap 4 JS Dropdown-Referenz .