Bootstrap 5 Dropdown-Liste

Basis-Dropdown-Liste

Ein Dropdown-Menü ist ein umschaltbares Menü, das es dem Benutzer ermöglicht, Werte aus einer vordefinierten Liste auszuwählen:

Beispiel

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Dropdown-Taste
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Verknüpfung 1</a></li>
    <li><a class="dropdown-item" href="#">Verknüpfung 2</a></li>
    <li><a class="dropdown-item" href="#">Verknüpfung 3</a></li>
  </ul>
</div>

Versuchen Sie es selbst

Beispiel erläutert

.dropdown Klasse, die das Dropdown-Menü anzeigt.

Um ein Dropdown-Menü zu öffnen, verwenden Sie bitte die .dropdown-toggle Klasse und data-toggle="dropdown" Attribut des Buttons oder Links hinzufügen.

den .dropdown-menu Diese Klasse zu <div> Elemente, um tatsächlich das Dropdown-Menü zu erstellen. Fügen Sie dann .dropdown-item Diese Klasse wird zu jedem Element im Dropdown-Menü hinzugefügt (Link oder Button).

Dropdown-Liste-Trennlinie

.dropdown-divider Diese Klasse wird verwendet, um die Links im Dropdown-Menü mit horizontalen dünnen Rahmen zu trennen:

Beispiel

<li><hr class="dropdown-divider"></hr></li>

Versuchen Sie es selbst

Dropdown-Liste-Überschrift

.dropdown-header Diese Klasse wird verwendet, um Überschriften im Dropdown-Menü hinzuzufügen:

Beispiel

<li><h5 class="dropdown-header">Dropdown-Kopf 1</h5></li>

Versuchen Sie es selbst

deaktivierte und aktivierte Artikel

Verwenden Sie .active Diese Klasse, um bestimmte Dropdown-Elemente hervorzuheben (fügt eine blaue Hintergrundfarbe hinzu).

Um ein Element im Dropdown-Menü zu deaktivieren, verwenden Sie .disabled Diese Klasse (erhält bei der Überblendung eine helle Grautextfarbe und das Symbol "no-parking-sign").

Beispiel

<li><a class="dropdown-item" href="#">Normal</a></li>
<li><a class="dropdown-item active" href="#">Aktiv</a></li>
<li><a class="dropdown-item disabled" href="#">Deaktiviert</a></li>

Versuchen Sie es selbst

Dropdown-Liste-Position

Sie können auch .dropend oder .dropstart Diese Klasse zu den Dropdown-Elementen hinzufügen, um "dropend" oder "dropstart"-Menüs zu erstellen. Beachten Sie, dass der Pfeil automatisch hinzugefügt wird:

Dropright

<div class="dropdown dropend">

Versuchen Sie es selbst

Dropleft

<div class="dropdown dropstart">

Versuchen Sie es selbst

Dropdown-Liste nach rechts ausrichten

Um das Dropdown-Menü nach rechts auszurichten, ändern Sie: .dropdown-menu-end Diese Klasse zu den Elementen hinzufügen, die .dropdown-menu Elementen:

Beispiel

<div class="dropdown-menu dropdown-menu-end">

Versuchen Sie es selbst

Aufklapp-Liste

Wenn Sie möchten, dass das Dropdown-Menü nach oben klappen soll, anstatt nach unten, ändern Sie das <div> mit der Klasse "dropdown" in: "dropup":

Beispiel

<div class="dropup">

Versuchen Sie es selbst

Dropdown-Text

.dropdown-item-text Die Klasse wird verwendet, um reinen Text zu den Dropdown-Elementen hinzuzufügen oder um den Standardlinkstil für Links hinzuzufügen.

Beispiel

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Verknüpfung 1</a></li>
  <li><a class="dropdown-item" href="#">Verknüpfung 2</a></li>
  <li><a class="dropdown-item" href="#">Verknüpfung 3</a></li>
  <li><a class="dropdown-item-text" href="#">Text-Link</a></li>
  <li><span class="dropdown-item-text">Reiner Text</span></li>
</ul>

Versuchen Sie es selbst

Kombinationsknöpfe und Dropdown-Listen

Beispiel

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Handy</a></li>
      <li><a class="dropdown-item" href="#">Tablet</a></li>
    </ul>
  </div>
</div>

Versuchen Sie es selbst

Vertikale Kombinationsknöpfe und Dropdown-Listen

Beispiel

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Handy</a></li>
      <li><a class="dropdown-item" href="#">Tablet</a></li>
    </ul>
  </div>
</div>

Versuchen Sie es selbst