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.

Einzelne Taste

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">
  <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>

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

Richtungen

Herunterfallen

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

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>

Droplinks

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>

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

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

Deaktiviert

.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="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</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>

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-haspopup="true" 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-haspopup="true" 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.js in Navigationsleisten nicht verwendet wird.

Ü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>

Verwenden Sie data-offsetoder 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" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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-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

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".

Name	Type	Default	Description
offset	number \| string \| function	0	Offset of the dropdown relative to its target. When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument. For more information refer to Popper.js's offset docs.
flip	boolean	true	Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper.js's flip docs.
boundary	string \| element	'scrollParent'	Overflow constraint boundary of the dropdown menu. Accepts the values of `'viewport'`, `'window'`, `'scrollParent'`, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.
reference	string \| element	'toggle'	Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, or an HTMLElement reference. For more information refer to Popper.js's referenceObject docs.
display	string	'dynamic'	By default, we use Popper.js for dynamic positioning. Disable this with `static`.
popperConfig	null \| object	null	To change Bootstrap's default Popper.js config, see Popper.js's configuration

Note when boundary is set to any value other than 'scrollParent', the style position: static is applied to the .dropdown container.

Methods

Method	Description
`$().dropdown('toggle')`	Toggles the dropdown menu of a given navbar or tabbed navigation.
`$().dropdown('show')`	Shows the dropdown menu of a given navbar or tabbed navigation.
`$().dropdown('hide')`	Hides the dropdown menu of a given navbar or tabbed navigation.
`$().dropdown('update')`	Updates the position of an element’s dropdown.
`$().dropdown('dispose')`	Destroys an element’s dropdown.

Events

All dropdown events are fired at the .dropdown-menu’s parent element and have a relatedTarget property, whose value is the toggling anchor element. hide.bs.dropdown and hidden.bs.dropdown events have a clickEvent property (only when the original event type is click) that contains an Event Object for the click event.

Event	Description
`show.bs.dropdown`	This event fires immediately when the show instance method is called.
`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

Einzelne Taste

Split-Taste

Dimensionierung

Richtungen

Herunterfallen

Dropright

Droplinks

Menüpunkte

Aktiv

Deaktiviert

Menüausrichtung

Reaktionsschnelle Ausrichtung

Menüinhalt

Überschriften

Teiler

Text

Formen

Verwendungszweck

Über Datenattribute

Über JavaScript

`data-toggle="dropdown"`noch erforderlich

Optionen

Methods

Events

Dropdowns

Überblick

Barrierefreiheit

Beispiele

Einzelne Taste

Split-Taste

Dimensionierung

Richtungen

Herunterfallen

Dropright

Droplinks

Menüpunkte

Aktiv

Deaktiviert

Menüausrichtung

Reaktionsschnelle Ausrichtung

Menüinhalt

Überschriften

Dropdown-Kopfzeile

Teiler

Text

Formen

Dropdown-Optionen

Verwendungszweck

Über Datenattribute

Über JavaScript

data-toggle="dropdown"noch erforderlich

Optionen

Methods

Events

`data-toggle="dropdown"`noch erforderlich