Bootstrap 4 Dropdowns

Basis Dropdown

Ein Dropdown-Menü ist ein umschaltbares Menü, in dem der Benutzer einen Menupunkt aus einer vordefinierten Liste auswählen kann

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 Klasse .dropdown wird ein Dropdown-Menü erstellt.

Um das Dropdown-Menü zu öffnen, verwenden Sie eine Schaltfläche oder einen Link mit der Klasse .dropdown-toggle und dem Attribut data-toggle="dropdown".

Fügen Sie die .dropdown-menu-Klasse zu einem <div>-Element hinzu, um das Dropdown-Menü zu erstellen. Fügen Sie dann die .dropdown-item-Klasse jedem Element (Links oder Schaltflächen) im Dropdown-Menü hinzu.

Dropdown-Teiler

Die Klasse .dropdown-divider wird verwendet, um Links innerhalb des Dropdown-Menüs durch eine dünne horizontalen Linie zu trennen

Beispiel

<div class="dropdown-divider"></div> 

Dropdown Header

Die .dropdown-header-Klasse wird verwendet, um Header innerhalb des Dropdown-Menüs hinzuzufügen

Beispiel

<div class="dropdown-header">Dropdown header 1</div> 

Disable and Active Items

Markieren Sie ein bestimmtes Dropdown-Element mit der Klasse .active (wird eine blaue Hintergrundfarbe hinzugefügt).

Um ein Objekt im Dropdown-Menü zu deaktivieren, verwenden Sie die Klasse .disabled erhält beim Hover eine hellgraue Textfarbe und ein "Parkverbotszeichen" -Symbol)

Dropdown Position

Sie können auch ein Dropdright- oder Dropleft -Menü erstellen, indem Sie dem Dropdown-Element die Klasse .droplight oder .dropleft hinzufügen.
Beachten Sie, dass der Pfeil automatisch hinzugefügt wird

Dropright

<div class="dropdown dropright">

Dropright

<div class="dropdown dropleft">

Dropdown Menu Rechts

Um das Dropdown-Menü rechtsbündig auszurichten, fügen Sie dem Element mit dem .dropdown-menu die Klasse .dropdown-menu-right hinzu:

Beispiel

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

Dropup

Wenn sich das Dropdownmenü nach oben statt nach unten erweitert werden soll, ändern Sie das <div> -Element mit class = "dropdown" in "dropup".

<div class="dropup">

Gruppierte Schaltflächen und 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>

Aufteilen der Dropdown-Buttons

Beispiel

 <div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</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="#">Tablet</a>
    <a class="dropdown-item" href="#">Smartphone</a>
  </div>
</div>

Vertikal ausgerichtete Schaltflächen 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>