TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie erstelle ich Bootstrap 5-Dropdowns?

127

Wir haben die Dropdown-Komponente bereits in unserem vorherigen Tutorial zu Bootstrap-Schaltflächen berührt. Dropdown ist nichts anderes als eine Schaltfläche (oder ein Link) und zeigt eine Liste an, wenn Sie darauf klicken. In diesem Tutorial lassen Sie uns verschiedene Arten von Bootstrap 5-Dropdowns mit Beispielen untersuchen. Denken Sie daran, bootstrap.bundled.min.js einzuschließen, damit das Dropdown-Menü funktioniert. Sie können die Starter-Vorlage hier beziehen .

Bootstrap 5 Dropdowns-Tutorial

  1. Grundlegende Funktionen von Dropdowns
  2. Standard-Dropdown-Schaltfläche erstellen
  3. Teiler hinzufügen
  4. Link im Dropdown deaktivieren
  5. Dropdown mit rechter Menüausrichtung
  6. Dropdown-Schaltfläche mit Kopfzeile
  7. Größe der Dropdown-Schaltfläche
  8. Dropdown-Schaltfläche teilen
  9. Drop-up-Schaltfläche teilen
  10. Punkte, die man sich merken sollte

1 Grundlagen von Bootstrap 5 Dropdowns

  • Dropdowns sind umschaltbare Listen von Links oder Schaltflächenelementen, die in Aufwärts- oder Abwärtsrichtung angezeigt werden.
  • Dies wird im Allgemeinen für Dropdown- oder Dropdown-Menüelemente und Navigationselemente in der Seitenleiste verwendet.
  • Es funktioniert basierend auf dem Popper.js-Skript.
  • Sie sollten popper.min.js und dann bootstrap.min.js in derselben Reihenfolge einschließen. Verwenden Sie alle Beispiele in diesem Tutorial zusammen mit unserer Starter-Vorlage.
  • Dem Dropdown-Element werden standardmäßig keine "Rolle"- oder "aria-"-Attribute hinzugefügt. Sie sollten sie manuell einfügen, wo immer dies erforderlich ist.
  • Die Dropdown-Elemente können entweder durch Klicken auf die Schaltfläche oder durch Klicken außerhalb geschlossen werden. Sie können auch die „Esc”-Taste verwenden, um die Dropdown-Elemente zu schließen.

2 Standard-Dropdown-Schaltfläche erstellen

Unten ist der Code zum Erstellen eines Standard-Dropdowns in Bootstrap 5:

<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownmenu" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Im Browser wird folgendes Ergebnis ausgegeben:

Wie erstelle ich Bootstrap 5-Dropdowns?

  • Grundsätzlich müssen Sie den Inhalt mit der Klasse ".dropdown" in ein Div einschließen. Dadurch wird die Schaltfläche als Dropdown-Schaltfläche identifiziert. Sie können auch Tag anstelle von Schaltfläche verwenden.
  • Die Schaltfläche (oder der Link) soll in die Klasse „.dropdown-toggle” aufgenommen werden. In diesem Beispiel haben wir die Klasse „btn-primary” verwendet, um die Schaltfläche mit Primärfarbe zu erstellen. Sie können jede der Farbdienstprogrammklassen verwenden, um eine andere Farbschaltfläche zu verwenden.
  • Nach der Schaltfläche erstellen Sie ein Dropdown-Menü mit Elementen.

3 Hinzufügen von Teilern in Dropdown

Jetzt wissen Sie, wie Sie die grundlegende Dropdown-Schaltfläche erstellen. Lassen Sie uns einige dekorative Dinge hinzufügen, wie das Hinzufügen von Trennwänden zwischen den Menüpunkten und der Kopfzeile.

<div class="dropdown"> <button class="btn btn-info dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <h6 class="dropdown-header">Dropdown Header</h6> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown One</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown Two</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Das Dropdown-Menü sieht wie folgt aus:

Wie erstelle ich Bootstrap 5-Dropdowns?

4 Deaktivieren des Links im Dropdown-Element

Sie können das Element in der Dropdown-Liste deaktivieren, um das Klicken zu verhindern:

<div class="dropdown"> <button class="btn btn-info dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown Two</a> <div class="dropdown-divider"></div> <a class="dropdown-item disabled" href="#">Dropdown Three</a> </div> </div>

Wir haben den Info-Button verwendet und den dritten Link deaktiviert. Wenn Sie die Maus über den deaktivierten Link bewegen, wird das Stopp-Cursor-Symbol angezeigt und Sie können nicht darauf klicken.

Wie erstelle ich Bootstrap 5-Dropdowns?

5 Dropdown mit rechter Menüausrichtung

Wie Sie in den obigen Beispielen bemerkt haben, wird das Menü standardmäßig linksbündig angezeigt. Sie können es in die rechte Ausrichtung ändern, indem Sie die Klasse „.dropdown-menu-right” zusammen mit der Klasse „.dropdown-menu” hinzufügen. Denken Sie daran, dass dadurch die gesamte Menübox rechts neben dem Container verschoben wird. Sie sollten zusätzliche CSS-Stile verwenden, um das Menü richtig unter dem Dropdown-Schaltflächenelement zu positionieren.

<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button Alignment Right </button> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Die rechtsbündig ausgerichteten Menüpunkte sehen wie folgt aus:

Wie erstelle ich Bootstrap 5-Dropdowns?

6 Dropdown-Schaltfläche mit Kopfzeile

Sie können auch einen Kopfzeilentext innerhalb der Menüelemente hinzufügen, indem Sie die Klasse ".dropdown-header" mit einem der H1-H6-Tags verwenden. Im Allgemeinen wird die Kopfzeile über dem Menü hinzugefügt und ist nicht anklickbar.

<div class="dropdown"> <button class="btn btn-warning dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <h5 class="dropdown-header" href="#">Dropdown Header</h5> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> </div> </div>

Dropdown mit Kopfzeile führt zu folgendem Ergebnis:

Wie erstelle ich Bootstrap 5-Dropdowns?

7 Dropdown-Button-Größen

Machen Sie die Dropdown-Schaltfläche groß oder klein, indem Sie die Klassen „.btn-lg” und „.btn-sm” wie unten verwenden:

<div class="btn-group"> <button class="btn btn-danger btn-lg dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div> <div class="btn-group"> <button class="btn btn-danger btn-sm dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Beachten Sie, dass wir zwei Schaltflächengruppen verwendet haben, um zwei Schaltflächen inline anzuzeigen. Wenn Sie nur eine Schaltfläche anzeigen möchten (z. B. groß), können Sie die Standardklasse ".dropdown" verwenden.

Die großen und kleinen Dropdown-Schaltflächen werden unten angezeigt:

Wie erstelle ich Bootstrap 5-Dropdowns?

8 Dropdown-Schaltfläche teilen

Bis jetzt haben wir verschiedene Arten von Dropdowns als eine einzige Schaltfläche gesehen. Die geteilte Schaltfläche hat zwei Schaltflächen, daher sollten Sie die Schaltflächengruppe verwenden, um sie ohne Lücke inline anzuzeigen. Das Teilen von zwei Buttons wird über die CSS-Klasse „.dropdown-toggle-split” ermöglicht.

<div class="btn-group"> <button type="button" class="btn btn-secondary">Split Button</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">Dropdown Button Group</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Dropdown-Schaltfläche teilen sieht wie folgt aus:

Wie erstelle ich Bootstrap 5-Dropdowns?

9 Split-Dropup-Taste

Dies ist einfach ein Dropdown-Stil anstelle des Standard-Dropdowns mit der Klasse ".dropup".

<div class="btn-group dropup"> <button type="button" class="btn btn-warning">Split Dropup Button</button> <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Dropdown Button Group</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Die Dropdown-Schaltfläche sieht wie folgt aus:

Wie erstelle ich Bootstrap 5-Dropdowns?

10 wichtige Punkte, die Sie sich merken sollten

Das Dropdown-Menü wird je nach Ansichtsfenster des Browsers automatisch nach unten oder oben angezeigt. Wenn Sie sich beispielsweise am Ende der Seite befinden, werden die Dropdown-Menüelemente oben wie ein Dropdown-Menü angezeigt.

Das Schaltflächenelement in der Dropdown-Liste unterstützt alle Dienstprogrammklassen für Hintergrundfarben, die der Standardschaltflächenkomponente ähnlich sind. Bootstrap 3 unterstützt nur Links für Menüpunkte. Aber in Bootstrap 4 und 5 kann jeder Menüpunkt ein Link- oder Button-Element sein.


Bootstrap 5 lernen (Index )


Aufnahmequelle: www.webnots.com

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen