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.js , 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.js enthält. Popper.js 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 roleund (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-itemmit 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ü .dropdownmit 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.

Dropdown-Menüs mit einer einzigen Schaltfläche

Jede Single .btnkann 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" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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 show">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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-haspopup="true" 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>

Drop-downs für geteilte Schaltflächen

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-splitfür den richtigen Abstand um das Dropdown-Cursor.

Wir verwenden diese zusätzliche Klasse, um die Horizontale paddingauf beiden Seiten des Caret-Zeichens um 25 % zu reduzieren und die margin-leftfü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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Dropup-Variante

Auslösen von Dropdown-Menüs über Elementen durch Hinzufügen .dropupzum übergeordneten Element.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropright-Variante

Auslösen von Dropdown-Menüs rechts neben den Elementen durch Hinzufügen .droprightzum übergeordneten Element.

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropleft-Variante

Auslösen von Dropdown-Menüs links neben den Elementen durch Hinzufügen .dropleftzum übergeordneten Element.

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" 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>

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" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <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>

Standardmäßig wird ein Dropdown-Menü automatisch 100 % von oben und entlang der linken Seite seines übergeordneten Elements positioniert. Fügen Sie .dropdown-menu-rightzu a .dropdown-menuhinzu, um das Dropdown-Menü rechts auszurichten.

Kopf hoch! Dropdowns werden dank Popper.js positioniert (außer wenn sie in einer Navigationsleiste enthalten sind).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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>

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>

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>

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-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </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-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

.activeZu 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>

.disabledZu 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" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Verwendungszweck

Über Datenattribute oder JavaScript schaltet das Dropdown-Plug-in ausgeblendete Inhalte (Dropdown-Menüs) um, indem es die .showKlasse des übergeordneten Listenelements umschaltet. 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.

Auf berührungsempfindlichen Geräten fügt das Öffnen eines Dropdown-Menüs leere ( $.noop) mouseoverHandler 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 mouseoverHandler entfernt.

Über Datenattribute

Zu einem Link oder einer Schaltfläche hinzufügen data-toggle="dropdown", um ein Dropdown-Menü umzuschalten.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </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. Weitere Informationen finden Sie in der Offset -Dokumentation von Popper.js .
kippen	boolesch	Stimmt	Lassen Sie zu, dass Dropdown im Falle einer Überlappung auf dem Referenzelement umgedreht wird. Weitere Informationen finden Sie in den Flip -Dokumenten von Popper.js .
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 Datei preventOverflow von Popper.js .

Beachten Sie, dass wenn boundaryauf einen anderen Wert als gesetzt 'scrollParent'ist, der Stil position: staticauf den .dropdownContainer angewendet wird.

Methoden

Methode	Beschreibung
`$().dropdown('toggle')`	Schaltet das Dropdown-Menü einer bestimmten Navigationsleiste oder Registerkartennavigation um bzw. um.
`$().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 relatedTargetEigenschaft, deren Wert das umschaltende Ankerelement ist.

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…
})

Dropdowns

Überblick

Barrierefreiheit

Beispiele

Dropdown-Menüs mit einer einzigen Schaltfläche

Drop-downs für geteilte Schaltflächen

Dimensionierung

Dropup-Variante

Dropright-Variante

Dropleft-Variante

Menüpunkte

Menüausrichtung

Menüüberschriften

Menüteiler

Menüformen

Aktive Menüpunkte

Menüpunkte deaktiviert

Verwendungszweck

Über Datenattribute

Über JavaScript

`data-toggle="dropdown"`noch erforderlich

Optionen

Methoden

Veranstaltungen

Dropdowns

Überblick

Barrierefreiheit

Beispiele

Dropdown-Menüs mit einer einzigen Schaltfläche

Drop-downs für geteilte Schaltflächen

Dimensionierung

Dropup-Variante

Dropright-Variante

Dropleft-Variante

Menüpunkte

Menüausrichtung

Menüüberschriften

Dropdown-Kopfzeile

Menüteiler

Menüformen

Aktive Menüpunkte

Menüpunkte deaktiviert

Verwendungszweck

Über Datenattribute

Über JavaScript

data-toggle="dropdown"noch erforderlich

Optionen

Methoden

Veranstaltungen

`data-toggle="dropdown"`noch erforderlich