Dropdowns
Schalten Sie mit dem Bootstrap-Dropdown-Plug-in kontextabhängige Overlays zum Anzeigen von Linklisten und mehr um.
Überblick
Dropdowns sind umschaltbare, kontextabhängige Overlays zum Anzeigen von Linklisten und mehr. Sie werden mit dem enthaltenen Bootstrap-Dropdown-JavaScript-Plugin interaktiv gemacht. Sie werden durch Klicken umgeschaltet, nicht durch Bewegen der Maus; Dies ist eine bewusste Designentscheidung .
Dropdowns basieren auf einer Bibliothek eines Drittanbieters, Popper , die dynamische Positionierung und Ansichtsfenstererkennung bietet. Stellen Sie sicher, dass Sie popper.min.js vor dem JavaScript von Bootstrap einfügen oder bootstrap.bundle.min.js
/ verwenden bootstrap.bundle.js
, das Popper enthält. Popper wird jedoch nicht zum Positionieren von Dropdowns in Navigationsleisten verwendet, da eine dynamische Positionierung nicht erforderlich ist.
Wenn Sie unser JavaScript aus der Quelle erstellenutil.js
, ist .
Barrierefreiheit
Der WAI ARIA -Standard definiert ein eigentliches role="menu"
Widget , aber das ist spezifisch für anwendungsähnliche Menüs, die Aktionen oder Funktionen auslösen. ARIA -Menüs können nur Menüelemente, Kontrollkästchen-Menüelemente, Optionsfeld-Menüelemente, Optionsfeldgruppen und Untermenüs enthalten.
Die Dropdowns von Bootstrap hingegen sind so konzipiert, dass sie generisch sind und auf eine Vielzahl von Situationen und Markup-Strukturen anwendbar sind. Beispielsweise ist es möglich, Dropdowns zu erstellen, die zusätzliche Eingaben und Formularsteuerelemente wie Suchfelder oder Anmeldeformulare enthalten. Aus diesem Grund erwartet Bootstrap keine der für echte ARIA - Menüs erforderlichen Attribute role
und (oder fügt diese automatisch hinzu). Autoren müssen diese spezifischeren Attribute selbst hinzufügen.aria-
Bootstrap fügt jedoch integrierte Unterstützung für die meisten standardmäßigen Tastaturmenüinteraktionen hinzu, z. B. die Möglichkeit, sich .dropdown-item
mit den Cursortasten durch einzelne Elemente zu bewegen und das Menü mit der ESCTaste zu schließen.
Beispiele
Umschließen Sie den Umschalter des Dropdown-Menüs (Ihre Schaltfläche oder Ihren Link) und das Dropdown-Menü .dropdown
mit oder einem anderen Element, das deklariert position: relative;
. Dropdowns können von <a>
oder <button>
Elementen ausgelöst werden, um Ihren potenziellen Anforderungen besser gerecht zu werden.
Einzelne Taste
Jede Single .btn
kann mit einigen Markup-Änderungen in einen Dropdown-Schalter umgewandelt werden. So können Sie sie mit beiden <button>
Elementen verwenden:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Und mit <a>
Elementen:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Das Beste daran ist, dass Sie dies auch mit jeder Schaltflächenvariante tun können:
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
Split-Taste
Erstellen Sie auf ähnliche Weise Dropdown-Listen mit geteilten Schaltflächen mit praktisch demselben Markup wie Dropdown-Listen mit einer Schaltfläche, jedoch mit dem Zusatz von .dropdown-toggle-split
für den richtigen Abstand um das Dropdown-Cursor.
Wir verwenden diese zusätzliche Klasse, um die Horizontale padding
auf beiden Seiten des Caret-Zeichens um 25 % zu reduzieren und die margin-left
für normale Schaltflächen-Dropdowns hinzugefügte zu entfernen. Diese zusätzlichen Änderungen sorgen dafür, dass das Caretzeichen in der Split-Taste zentriert bleibt, und bieten neben der Haupttaste einen Trefferbereich mit besserer Größe.
<!-- Example split danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
Dimensionierung
Schaltflächen-Dropdowns funktionieren mit Schaltflächen aller Größen, einschließlich standardmäßiger und geteilter Dropdown-Schaltflächen.
<!-- Large button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Large button
</button>
<div class="dropdown-menu">
...
</div>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-lg" type="button">
Large split button
</button>
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>
<!-- Small button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Small button
</button>
<div class="dropdown-menu">
...
</div>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-sm" type="button">
Small split button
</button>
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>
Richtungen
Herunterfallen
Auslösen von Dropdown-Menüs über Elementen durch Hinzufügen .dropup
zum übergeordneten Element.
<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">
Split dropup
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
Dropright
Auslösen von Dropdown-Menüs rechts neben den Elementen durch Hinzufügen .dropright
zum übergeordneten Element.
<!-- Default dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary">
Split dropright
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
Droplinks
Auslösen von Dropdown-Menüs links neben den Elementen durch Hinzufügen .dropleft
zum übergeordneten Element.
<!-- Default dropleft button -->
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropleft button -->
<div class="btn-group">
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<button type="button" class="btn btn-secondary">
Split dropleft
</button>
</div>
Menüpunkte
In der Vergangenheit mussten die Inhalte von Dropdown-Menüs Links sein, aber das ist bei v4 nicht mehr der Fall. Jetzt können Sie optional <button>
Elemente in Ihren Dropdowns verwenden, anstatt nur <a>
s.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
Sie können auch nicht interaktive Dropdown-Elemente mit erstellen .dropdown-item-text
. Fühlen Sie sich frei, mit benutzerdefinierten CSS- oder Textdienstprogrammen weiter zu gestalten.
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
Aktiv
.active
Zu Elementen in der Dropdown -Liste hinzufügen , um sie als aktiv zu gestalten .
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item active" href="#">Active link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
Deaktiviert
.disabled
Zu Elementen in der Dropdown -Liste hinzufügen , um sie als deaktiviert zu gestalten .
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
Menüausrichtung
Standardmäßig wird ein Dropdown-Menü automatisch 100 % von oben und entlang der linken Seite seines übergeordneten Elements positioniert. Fügen Sie .dropdown-menu-right
zu a .dropdown-menu
hinzu, um das Dropdown-Menü rechts auszurichten.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
Reaktionsschnelle Ausrichtung
Wenn Sie die responsive Ausrichtung verwenden möchten, deaktivieren Sie die dynamische Positionierung, indem Sie das data-display="static"
Attribut hinzufügen, und verwenden Sie die responsiven Variationsklassen.
Um das Dropdown-Menü rechts.dropdown-menu{-sm|-md|-lg|-xl}-right
am angegebenen Haltepunkt oder größer auszurichten, fügen Sie hinzu .
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-lg-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
Um das Dropdown-Menü links.dropdown-menu-right
am angegebenen Haltepunkt oder größer auszurichten, fügen Sie und hinzu .dropdown-menu{-sm|-md|-lg|-xl}-left
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
Beachten Sie, dass Sie data-display="static"
den Dropdown-Schaltflächen in Navigationsleisten kein Attribut hinzufügen müssen, da Popper in Navigationsleisten nicht verwendet wird.
Menüinhalt
Überschriften
Fügen Sie eine Kopfzeile hinzu, um Aktionsabschnitte in einem beliebigen Dropdown-Menü zu kennzeichnen.
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
Teiler
Trennen Sie Gruppen zusammengehöriger Menüpunkte mit einer Trennlinie.
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
Text
Platzieren Sie beliebigen Freiformtext in einem Dropdown-Menü mit Text und verwenden Sie Abstandshilfsmittel . Beachten Sie, dass Sie wahrscheinlich zusätzliche Größenstile benötigen, um die Menübreite einzuschränken.
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p class="mb-0">
And this is more example text.
</p>
</div>
Formen
Fügen Sie ein Formular in ein Dropdown-Menü ein oder machen Sie es zu einem Dropdown-Menü und verwenden Sie Rand- oder Auffüll- Dienstprogramme , um ihm den erforderlichen negativen Raum zu geben.
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="form-group">
<label for="exampleDropdownFormEmail1">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword1">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">New around here? Sign up</a>
<a class="dropdown-item" href="#">Forgot password?</a>
</div>
<form class="dropdown-menu p-4">
<div class="form-group">
<label for="exampleDropdownFormEmail2">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword2">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Dropdown-Optionen
Verwenden Sie data-offset
oder data-reference
, um die Position des Dropdown-Menüs zu ändern.
<div class="d-flex">
<div class="dropdown mr-1">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
Offset
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">Reference</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
Verwendungszweck
Über Datenattribute oder JavaScript schaltet das Dropdown-Plugin versteckte Inhalte (Dropdown-Menüs) um, indem es die .show
Klasse auf der übergeordneten .dropdown-menu
. Das data-toggle="dropdown"
Attribut wird zum Schließen von Dropdown-Menüs auf Anwendungsebene verwendet, daher ist es eine gute Idee, es immer zu verwenden.
$.noop
)
mouseover
Handler zu den unmittelbar untergeordneten Elementen des
<body>
Elements hinzu. Dieser zugegebenermaßen hässliche Hack ist notwendig, um eine
Macke in der Ereignisdelegierung von iOS zu umgehen, die ansonsten verhindern würde, dass ein Tippen irgendwo außerhalb des Dropdowns den Code auslöst, der das Dropdown schließt. Sobald das Dropdown geschlossen wird, werden diese zusätzlichen leeren
mouseover
Handler entfernt.
Über Datenattribute
Zu einem Link oder einer Schaltfläche hinzufügen data-toggle="dropdown"
, um ein Dropdown-Menü umzuschalten.
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
Über JavaScript
Rufen Sie die Dropdowns über JavaScript auf:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
noch erforderlich
Unabhängig davon, ob Sie Ihr Dropdown über JavaScript aufrufen oder stattdessen die Daten-API verwenden, muss data-toggle="dropdown"
es immer auf dem Trigger-Element des Dropdowns vorhanden sein.
Optionen
Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data-
, wie in data-offset=""
.
Name | Typ | Standard | Beschreibung |
---|---|---|---|
versetzt | Zahl | Zeichenfolge | Funktion | 0 | Offset des Dropdowns relativ zu seinem Ziel. Wenn eine Funktion verwendet wird, um den Offset zu bestimmen, wird sie mit einem Objekt aufgerufen, das die Offset-Daten als erstes Argument enthält. Die Funktion muss ein Objekt mit derselben Struktur zurückgeben. Als zweites Argument wird das auslösende Element DOM node übergeben. Weitere Informationen finden Sie in der Offset -Dokumentation von Popper . |
kippen | boolesch | Stimmt | Lassen Sie zu, dass Dropdown im Falle einer Überlappung auf dem Referenzelement umgedreht wird. Weitere Informationen finden Sie in den Flip-Docs von Popper . |
Grenze | Zeichenfolge | Element | 'scrollParent' | Überlaufbeschränkungsgrenze des Dropdown-Menüs. Akzeptiert die Werte von 'viewport' , 'window' , 'scrollParent' , oder eine HTMLElement-Referenz (nur JavaScript). Weitere Informationen finden Sie in der PreventOverflow -Dokumentation von Popper . |
Hinweis | Zeichenfolge | Element | 'Umschalten' | Bezugselement des Dropdown-Menüs. Akzeptiert die Werte von 'toggle' , 'parent' , oder eine HTMLElement-Referenz. Weitere Informationen finden Sie in der referenceObject -Dokumentation von Popper . |
Anzeige | Schnur | 'dynamisch' | Standardmäßig verwenden wir Popper für die dynamische Positionierung. Deaktivieren Sie dies mit static . |
popperConfig | null | Objekt | Null | Um die standardmäßige Popper-Konfiguration von Bootstrap zu ändern, siehe Poppers Konfiguration |
Beachten Sie, dass wenn boundary
auf einen anderen Wert als gesetzt 'scrollParent'
ist, der Stil position: static
auf den .dropdown
Container angewendet wird.
Methoden
Methode | Beschreibung |
---|---|
$().dropdown('toggle') |
Schaltet das Dropdown-Menü einer bestimmten Navigationsleiste oder Registerkartennavigation um bzw. um. |
$().dropdown('show') |
Zeigt das Dropdown-Menü einer bestimmten Navigationsleiste oder Registerkartennavigation an. |
$().dropdown('hide') |
Blendet das Dropdown-Menü einer bestimmten Navigationsleiste oder Registerkartennavigation aus. |
$().dropdown('update') |
Aktualisiert die Position der Dropdown-Liste eines Elements. |
$().dropdown('dispose') |
Zerstört das Dropdown eines Elements. |
Veranstaltungen
Alle Dropdown-Ereignisse werden beim .dropdown-menu
übergeordneten Element von ausgelöst und haben eine relatedTarget
Eigenschaft, deren Wert das umschaltende Ankerelement ist. hide.bs.dropdown
und hidden.bs.dropdown
Ereignisse haben eine clickEvent
Eigenschaft (nur wenn der ursprüngliche Ereignistyp click
) ist, die ein Ereignisobjekt für das Klickereignis enthält.
Vorfall | Beschreibung |
---|---|
show.bs.dropdown |
Dieses Ereignis wird sofort ausgelöst, wenn die show instance-Methode aufgerufen wird. |
shown.bs.dropdown |
Dieses Ereignis wird ausgelöst, wenn das Dropdown-Menü für den Benutzer sichtbar gemacht wurde (wartet auf den Abschluss von CSS-Übergängen). |
hide.bs.dropdown |
Dieses Ereignis wird sofort ausgelöst, wenn die Methode zum Ausblenden der Instanz aufgerufen wurde. |
hidden.bs.dropdown |
Dieses Ereignis wird ausgelöst, wenn die Dropdown-Liste vollständig vor dem Benutzer ausgeblendet wurde (wartet auf den Abschluss von CSS-Übergängen). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})