Deutsch

Bootstrap-Tutorial

Bootstrap Layouts

Bootstrap-Inhalt

Bootstrap Komponenten

Bootstrap Formulare

Bootstrap-Hilfsfunktionen

Bootstrap Utilities

Bootstrap Demos

Bootstrap - Dropdowns: A Beginner's Guide

Hallo zusammen, zukünftige Web-Entwickler! Heute tauchen wir ein in die wundervolle Welt der Bootstrap-Dropdowns. Als Ihr freundlicher Nachbar-Computerlehrer freue ich mich, Sie auf dieser Reise zu begleiten. Machen Sie sich keine Sorgen, wenn Sie noch nie eine Zeile Code geschrieben haben – wir beginnen bei null und bauen unseren Weg nach oben. Also, holen Sie sich eine Tasse Kaffee (oder Tee, wenn das Ihr Ding ist) und los geht's!

Bootstrap - Dropdowns

Was sind Dropdowns?

Bevor wir uns dem Code widmen, sprechen wir darüber, was Dropdowns sind. Stellen Sie sich vor, Sie sind in einem Restaurant und der Kellner reicht Ihnen eine Speisekarte. Diese Speisekarte ist wie ein Dropdown – sie bietet Ihnen eine Liste von Optionen zur Auswahl. In der Webgestaltung funktionieren Dropdowns ähnlich. Sie sind kompakte Möglichkeiten, mehreren Benutzern ohne das Webpage zu verstopfen mehrere Auswahlmöglichkeiten zu präsentieren.

Grundlegendes Dropdown

Lassen Sie uns mit dem grundlegendsten Dropdown beginnen. So sieht es in Bootstrap aus:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown-Schaltfläche
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Aktion</a></li>
<li><a class="dropdown-item" href="#">Weitere Aktion</a></li>
<li><a class="dropdown-item" href="#">Etwas anderes hier</a></li>
</ul>
</div>

Lassen Sie uns das auseinandernehmen:

  1. Wir beginnen mit einem <div> mit der Klasse dropdown. Das ist unser Behälter.
  2. Innen haben wir eine <button>, die das Dropdown auslöst. Beachten Sie die Klasse dropdown-toggle und das Attribut data-bs-toggle="dropdown".
  3. Das <ul> mit der Klasse dropdown-menu ist unser tatsächlicher Dropdown-Inhalt.
  4. Jedes <li> innerhalb des <ul> ist ein Element in unserem Dropdown-Menü.

Dropdown-Schaltfläche vs. Dropdown-Link

Sie können ein Dropdown mit einer Schaltfläche oder einem Link erstellen. Hier ist der Unterschied:

Dropdown-Schaltfläche

Wir haben das bereits in unserem grundlegenden Beispiel gesehen. Es verwendet das <button>-Element:

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown-Schaltfläche
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- Menüelemente -->
</ul>
</div>

Dropdown-Link

Für ein auf einem Link basierendes Dropdown verwenden wir stattdessen das <a>-Tag:

<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown-Link
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<!-- Menüelemente -->
</ul>
</div>

Der Hauptunterschied liegt im verwendeten HTML-Element (<button> vs. <a>), aber sie funktionieren ähnlich.

Varianten

Bootstrap bietet verschiedene Farbschemata für Ihre Dropdowns. Sie können die btn-secondary-Klasse durch eine dieser ersetzen:

  • btn-primary
  • btn-success
  • btn-info
  • btn-warning
  • btn-danger
  • btn-light
  • btn-dark

Zum Beispiel:

<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Gefahr Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- Menüelemente -->
</ul>
</div>

Split Button

Ein Split-Button-Dropdown trennt die Button-Aktion von der Dropdown-Umschaltung:

<div class="btn-group">
<button type="button" class="btn btn-primary">Aktion</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Dropdown umschalten</span>
</button>
<ul class="dropdown-menu">
<!-- Menüelemente -->
</ul>
</div>

Hier führt das Klicken auf die linke Hälfte des Buttons eine Aktion aus, während die rechte Hälfte das Dropdown öffnet.

Größenanpassung

Sie können größere oder kleinere Dropdowns erstellen, indem Sie die Klassen btn-lg oder btn-sm hinzufügen:

Großes Dropdown

<div class="dropdown">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" id="dropdownMenuButtonLarge" data-bs-toggle="dropdown" aria-expanded="false">
Großes Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLarge">
<!-- Menüelemente -->
</ul>
</div>

Kleinnes Dropdown

<div class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="dropdownMenuButtonSmall" data-bs-toggle="dropdown" aria-expanded="false">
Kleines Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonSmall">
<!-- Menüelemente -->
</ul>
</div>

Dunkles Dropdown

Für ein schickes, dunkelthematisches Dropdown fügen Sie die Klasse dropdown-menu-dark zu Ihrem dropdown-menu hinzu:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dunkles Dropdown
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton">
<!-- Menüelemente -->
</ul>
</div>

Richtung

Bootstrap ermöglicht es Ihnen, die Richtung Ihrer Dropdowns zu ändern. Lassen Sie uns diese Optionen erkunden:

Zentrierte Dropdowns

Um Ihr Dropdown-Menü zuzentrieren, fügen Sie die Klasse dropdown-center zum Behälter hinzu:

<div class="dropdown-center">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownCenteredButton" data-bs-toggle="dropdown" aria-expanded="false">
Zentriertes Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownCenteredButton">
<!-- Menüelemente -->
</ul>
</div>

Dropup

Für ein Dropdown, das nach oben öffnet, verwenden Sie die Klasse dropup:

<div class="dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu" aria-labelledby="dropupMenuButton">
<!-- Menüelemente -->
</ul>
</div>

Zentrierter Dropup

Kombinieren Sie dropup und dropdown-center für einen zentrierten Dropup:

<div class="dropup-center dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupCenteredButton" data-bs-toggle="dropdown" aria-expanded="false">
Zentrierter Dropup
</button>
<ul class="dropdown-menu" aria-labelledby="dropupCenteredButton">
<!-- Menüelemente -->
</ul>
</div>

Dropend

Für ein Dropdown, das nach rechts öffnet, verwenden Sie die Klasse dropend:

<div class="dropend">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropendMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropend
</button>
<ul class="dropdown-menu" aria-labelledby="dropendMenuButton">
<!-- Menüelemente -->
</ul>
</div>

Dropstart

Für ein Dropdown, das nach links öffnet, verwenden Sie die Klasse dropstart:

<div class="dropstart">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu" aria-labelledby="dropstartMenuButton">
<!-- Menüelemente -->
</ul>
</div>

Menüelemente

Nun, lassen Sie uns darüber sprechen, was in Ihr Dropdown-Menü kommt. Sie haben mehrere Optionen:

Überschriften

Fügen Sie eine Überschrift hinzu, um Menüelemente zu gruppieren:

<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown-Überschrift</h6></li>
<li><a class="dropdown-item" href="#">Aktion</a></li>
<li><a class="dropdown-item" href="#">Weitere Aktion</a></li>
</ul>

Trennlinien

Verwenden Sie Trennlinien, um verwandte Menüelementegruppen zu trennen:

<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Aktion</a></li>
<li><a class="dropdown-item" href="#">Weitere Aktion</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Etwas anderes hier</a></li>
</ul>

Text

Sie können auch nicht-interaktiven Text einfügen:

<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Aktion</a></li>
<li><a class="dropdown-item" href="#">Weitere Aktion</a></li>
<li><a class="dropdown-item" href="#">Etwas anderes hier</a></li>
<li><span class="dropdown-item-text">Dropdown-Elementtext</span></li>
</ul>

Formulare

Sie können sogar Formulare in Ihre Dropdowns einfügen:

<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="mb-3">
<label for="exampleDropdownFormEmail1" class="form-label">E-Mail-Adresse</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword1" class="form-label">Passwort</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Passwort">
</div>
<div class="mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Mich merken
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Anmelden</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Neu hier? Registrieren</a>
<a class="dropdown-item" href="#">Passwort vergessen?</a>
</div>

Menüausrichtung

Standardmäßig sind Dropdown-Menüs links ausgerichtet. Sie können dies mit Ausrichtungs-Klassen ändern:

Rechts ausgerichtetes Menü

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Rechts ausgerichtetes Menü
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
<!-- Menüelemente -->
</ul>
</div>

Responsives Ausrichten

Sie können auch eine responsive Ausrichtung machen:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Links ausgerichtet, aber rechts ausgerichtet auf großen Bildschirmen
</button>
<ul class="dropdown-menu dropdown-menu-lg-end" aria-labelledby="dropdownMenuButton">
<!-- Menüelemente -->
</ul>
</div>

Dieses Dropdown wird standardmäßig links ausgerichtet, aber rechts ausgerichtet auf großen Bildschirmen und darüber.

Dropdown-Optionen

Bootstrap-Dropdowns bieten einige zusätzliche Optionen:

Automatisches Schließen-Verhalten

Sie können das Schließenverhalten des Dropdowns mit dem data-bs-auto-close-Attribut steuern:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Klickbare Außenfläche
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- Menüelemente -->
</ul>
</div>

Optionen für data-bs-auto-close:

  • true (Standard): Schließt das Dropdown, wenn außerhalb oder innerhalb des Dropdowns geklickt wird
  • false: Das Dropdown wird nicht geschlossen, wenn außerhalb oder innerhalb geklickt wird
  • inside: Schließt das Dropdown, wenn innerhalb des Dropdowns geklickt wird
  • outside: Schließt das Dropdown, wenn außerhalb des Dropdowns geklickt wird

Und das war's! Sie haben gerade eine wilde Reise durch die Welt der Bootstrap-Dropdowns absolviert. Denken Sie daran, dass Übung den Meister macht, also experimentieren Sie ruhig mit diesen Beispielen. Frohes Coden und möge Ihre Dropdowns immer in die richtige Richtung fallen!

Credits: Image by storyset

Vorheriges Tutorial:
Bootstrap - Zoll összeomlás
Nächstes Tutorial:
Bootstrap - Listen Gruppe