Bootstrap - Dropdown-Demo

Was ist ein Dropdown?

Hallo da draußen, angehende Web-Entwickler! Heute tauchen wir ein in die wunderbare Welt der Bootstrap Dropdowns. Als dein freundlicher Nachbarschafts-Computerlehrer freue ich mich darauf, dich auf dieser Reise zu begleiten, selbst wenn du noch nie eine Zeile Code geschrieben hast. Verlass dich darauf, bis zum Ende dieses Tutorials wirst du Dropdowns wie ein Profi erstellen können!

Bootstrap - Dropdowns Demo

Ein Dropdown ist ein Benutzeroberflächenelement, das es Benutzern ermöglicht, eine Option aus einer Liste von Elementen auszuwählen. Es ist wie ein digitales Menü, das angezeigt wird, wenn man auf eine Schaltfläche oder einen Link klickt. Stell dir vor, du bist in einem Restaurant und anstelle eines Papiermenüs übergibt dir der Kellner eine magische Taste. Wenn du sie drückst, erscheint eine Liste köstlicher Gerichte schwebend in der Luft. Genau das macht ein Dropdown auf einer Webseite!

Warum Dropdowns verwenden?

Dropdowns sind unglaublich nützlich für:

Sparen von Platz auf deiner Webseite
Organisieren verwandter Optionen
Bereitstellung einer sauberen und intuitiven Benutzeroberfläche

Nun, lassen's mal mit ein bisschen Code in die Tiefe gehen!

Einrichtung von Bootstrap

Bevor wir unser erstes Dropdown erstellen, müssen wir Bootstrap in unserer HTML-Datei einrichten. Keine Sorge, es ist einfacher als die Einrichtung eines neuen Handys!

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Dropdown Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Dein Inhalt kommt hier hin -->

<!-- Bootstrap JS und Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Dieser Code richtet eine grundlegende HTML-Struktur ein und inkludiert die notwendigen Bootstrap-Dateien. Denk daran wie das Vorbereiten deiner Küche, bevor du mit dem Kochen beginnst!

Erstellung eines einfachen Dropdowns

Lassen's mit einem einfachen Dropdown beginnen. Wir erstellen eine Schaltfläche, die, wenn sie geklickt wird, eine Liste von Optionen reveals.

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Wähle eine Frucht
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Apfel</a></li>
<li><a class="dropdown-item" href="#">Banane</a></li>
<li><a class="dropdown-item" href="#">Kirsche</a></li>
</ul>
</div>

Lassen's das auseinandernehmen:

<div class="dropdown">: Das ist der Behälter für unser Dropdown.
<button class="btn btn-primary dropdown-toggle" ...>: Das erstellt die Schaltfläche, die Benutzer klicken, um das Dropdown zu öffnen.
data-bs-toggle="dropdown": Dasweil Bootstrap, dass diese Schaltfläche ein Dropdown umschalten soll.
<ul class="dropdown-menu">: Das ist die Liste, die angezeigt wird, wenn die Schaltfläche geklickt wird.
<li><a class="dropdown-item" href="#">...: Diese sind die einzelnen Elemente in der Dropdown-Liste.

Dropdown-Richtungen

Genau wie du bei einem Buffet die Speisen aus verschiedenen Richtungen servieren kannst, ermöglicht Bootstrap es dir, die Richtung deines Dropdowns zu ändern. Lassen's einige Optionen erkunden:

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

Der einzige Unterschied hier ist die Klasse dropup anstelle von dropdown. Es ist, als ob du dein Menü kopfüber umdrehst!

Dropright und Dropleft

<div class="dropend">
<button class="btn btn-info dropdown-toggle" type="button" id="droprightMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<ul class="dropdown-menu" aria-labelledby="droprightMenuButton">
<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>

<div class="dropstart">
<button class="btn btn-warning dropdown-toggle" type="button" id="dropleftMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropleft
</button>
<ul class="dropdown-menu" aria-labelledby="dropleftMenuButton">
<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>

Verwende dropend für rechts ausgerichtete Dropdowns und dropstart für links ausgerichtete. Es ist, als ob du entscheidest, auf welcher Seite des Tellers du deinen Esser platzierst!

Dropdown-Menüelemente

Jetzt peppen wir unser Dropdown-Menü mit einigen zusätzlichen Funktionen auf:

<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><h6 class="dropdown-header">Dropdown-Kopfzeile</h6></li>
<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>
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Deaktivierte Aktion</a></li>
</ul>
</div>

In diesem Beispiel haben wir hinzugefügt:

Eine Kopfzeile (dropdown-header)
Ein Trennstrich (dropdown-divider)
Ein deaktiviertes Element (dropdown-item disabled)

Es ist, als ob du Abschnitte in deinem Menü erstellst und Artikel, die nicht vorrätig sind, abgraut!

Dropdown-Größen

Genau wie du eine kleine, mittlere oder große Getränkegröße bestellen kannst, kannst du die Größe deiner Dropdown-Schaltfläche ändern:

<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Große Schaltfläche
</button>
<ul class="dropdown-menu">
<!-- Dropdown-Menüelemente -->
</ul>
</div>

<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Kleine Schaltfläche
</button>
<ul class="dropdown-menu">
<!-- Dropdown-Menüelemente -->
</ul>
</div>

Verwende btn-lg für eine große Schaltfläche und btn-sm für eine kleine. Es ist so einfach!

Dropdown-Methoden

Bootstrap bietet mehrere Methoden, um Dropdowns programmatisch zu steuern. Hier ist eine Tabelle dieser Methoden:

Methode	Beschreibung
show	Zeigt das Dropdown an
hide	Versteckt das Dropdown
toggle	Umschaltet das Dropdown
update	Aktualisiert die Position eines Elements Dropdown
dispose	Zerstört ein Elements Dropdown

Um diese Methoden zu verwenden, kannst du JavaScript benutzen. Zum Beispiel:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})

// Dropdown anzeigen
dropdownList[0].show()

// Dropdown verstecken
dropdownList[0].hide()

// Dropdown umschalten
dropdownList[0].toggle()

Und da hast du es! Du hast gerade einen Crashkurs in Bootstrap Dropdowns abgeschlossen. Denke daran, Übung macht den Meister, also habe keine Angst, diese Elemente auf deinen eigenen Webseiten auszuprobieren.

Bald wirst du Dropdown-Menüs erstellen, die selbst das schickste Restaurant neidisch machen würden. Viel Spaß beim Coden und möge deine Dropdowns immer in die richtige Richtung fallen!

Credits: Image by storyset

Vorheriges Tutorial:

Bootstrap - Sidebars-Demo

Nächstes Tutorial:

Bootstrap - Listen groups Demo