So entwerfen Sie Dropdown -Menüs in Bootstrap 5
Mit einem Dropdown -Menü kann der Benutzer einer Website eine bestimmte Option/Aktion aus der angegebenen Liste der Optionen/Aktionen auswählen. Ein solches Menü ist umschaltbar und besteht aus Links, die als Listenelemente angeordnet sind. Diese Links wickeln eine große Menge an Inhalten in sich, wodurch das Layout eines Webseiten sauberer wird. Das Erstellen eines Dropdown -Menüs mit Bootstrap 5 erfolgt durch die Verwendung verschiedener Klassen, die damit verbunden sind. Hier präsentieren wir, wie Sie ein Dropdown -Menü mit Bootstrap 5 und verschiedenen Möglichkeiten erstellen können, es zu stylen.
So erstellen Sie ein Dropdown -Menü mit Bootstrap 5
Um ein Dropdown -Menü über Bootstrap 5 zu erstellen, verwenden Sie die .Dropdown-Liste Klasse. Hier haben wir gezeigt, wie ein einfaches Dropdown -Menü erstellt wird.
Html
Dem Div -Container wurde der zugewiesen .Dropdown-Liste Klasse, die ein Dropdown -Menü darstellt. Um den Benutzer das Dropdown -Menü zu öffnen, verwenden Sie entweder eine Schaltfläche oder einen Link und zuweisen sie die .Dropdown-Toggle-Klasse und set Data-BS-Toggle = "Dropdown" Damit das Menü zum Umlauf machen kann. Erstellen Sie anschließend eine ungeordnete Liste und weisen Sie sie die zu .Dropdown-Menu-Klasse, während zuweisen, die zuweisen .Dropdown-Item-Klasse Zu jedem Listenelement, um dem Benutzer im Menü Optionen zur Verfügung zu stellen.
Ausgang
Ein Dropdown -Menü wurde erfolgreich erstellt.
So erstellen Sie einen Dropdown -Teiler
Wenn Sie die im Menü vorhandenen Links oder Optionen mit einer horizontalen Linie trennen möchten, verwenden Sie die .Dropdown-Divider Klasse. Dies kann in Szenarien hilfreich sein, in denen Links im Menü zu verschiedenen Kategorien gehören.
Html
Der Rest des Codes ist der gleiche wie oben mit dem einzigen Unterschied, der, um den letzten Link von den restlichen Links zu trennen, die wir verwenden, um die zu trennen
Element, um eine horizontale Regel zu erstellen und sie zuzuweisen .Dropdown-Divider Klasse. Beachten Sie, dass dieser Teiler in einem Listenelement verschachtelt ist.
Ausgang
So erstellen Sie einen horizontalen Teiler.
So erstellen Sie einen Dropdown -Header
Wenn Sie im Menü eine Überschrift zu mehreren Kategorien von Links hinzufügen möchten, verwenden Sie die .Dropdown-Header Klasse.
Html
Im obigen Code nisten wir vor jeder Kategorie von Links eine Element in An Element und zuweisen es die .Dropdown-Header Klasse. Auf diese Weise wird vor jeder Kategorie von Optionen eine Überschrift eingefügt.
Ausgang
Die Ausgabe zeigt ein Dropdown -Menü mit zwei Header an.
So ordnen Sie in einem Dropdown -Menü aktive und deaktivierte Zustände zu Elementen zu
Um bestimmten Links im Menü aktive und deaktivierte Zustände hinzuzufügen, verwenden Sie einfach die .aktiv und .Behinderte Klassen.
Html
Im obigen Code wird dem ersten Link ein aktiver Zustand zugewiesen, während der zweite Link den deaktivierten Zustand erhält. Ein Link mit einem aktiven Zustand hat eine blaue Farbe, ein Link mit einem behinderten Zustand hat hellgraue Farbe.
Ausgang
Der .aktiv und .Behinderte Klassen funktionieren ordnungsgemäß.
So weisen Sie Dropdown -Menüs verschiedene Positionen zu
Um Ihr Dropdown -Menü zu stylen. Hier wurde jede dieser Positionen demonstriert.
So weisen Sie dem Dropdown -Menü Aufwärtsposition zu
Verwenden Sie das Menü zum Zweck der Zuweisung einer Aufwärtsrichtung .Dropup Klasse.
Html
Etwas Text.
Etwas Text.
Etwas Text.
Das Div, das das Dropdown -Menü darstellt .Dropup Klasse, mit dem das Menü beim Klicken in eine Aufwärtsrichtung geöffnet werden kann. Beachten Sie, dass wir einige hinzugefügt haben Ausgang Die Ausgabe zeigt ein Menü, das nach oben geöffnet wird. So weisen Sie die Endposition dem Dropdown -Menü zu Um das Menü am Ende der Dropdown -Schaltfläche zu öffnen, verwenden Sie die .Dropend Klasse zusammen mit dem .Dropdown-Liste Klasse. Html Der obige Code generiert ein Dropdown -Menü, das am Ende der Dropdown -Schaltfläche geöffnet wird, sobald die Schaltfläche klickt. Ausgang Hier haben wir das Dropdown -Menü erfolgreich am Ende der Schaltfläche geöffnet. So weisen Sie die Startposition dem Dropdown -Menü zu Diese Position funktioniert entgegengesetzt zu der im vorherigen Beispiel diskutierten Position, und diese Position kann mit dem erreicht werden .Dropstart Klasse. Html Für ein Dropdown -Menü mit einer Startposition muss es am Ende einer Webseite platziert werden. Deshalb verwenden wir die .Text-Ende Klasse zusammen mit dem .Dropstart Und .Dropdown-Liste Klassen. Darüber hinaus wird der Pfeil vor dem Text automatisch eingefügt. Ausgang Der .DropStart -Klasse funktioniert ordnungsgemäß. So weisen Sie dem Dropdown -Menü die richtige Position zu Verwenden Sie das Dropdown -Menü auf der rechten Seite, um das auszurichten .Dropdown-Menu-Ende Klasse. Html Wenn Sie Ihr Dropdown -Menü auf der rechten Seite öffnen möchten, anstatt den gesamten Speicherplatz unterhalb der Schaltfläche zu bedecken .Dropdown-Menu-Ende Klasse zusammen mit dem .Dropdown -Klasse. Beachten Sie, dass wir, um die Arbeit dieser Klasse ordnungsgemäß zu demonstrieren. Ausgang Das Dropdown -Menü war mit Erfolg nach rechts ausgerichtet. So fügen Sie einem Dropdown -Menü einfache Text hinzu In einigen Szenarien möchten Sie im Dropdown -Menü einfache Text hinzufügen, also verwenden Sie die .Dropdown-Item-Text Klasse. Html Im obigen Code wurde ein einfaches Dropdown -Menü erstellt, während am Ende der Links ein anderes Listenelement erstellt wurde. Fügen Sie jedoch einen einfachen Text hinzu, anstatt das Anker -Tag zu verwenden Tag wurde verwendet und wurde zugewiesen .Dropdown-Item-Text Klasse. Der Text wurde in die platziert Schild. Ausgang So fügen Sie einfacher Text im Dropdown -Menü hinzu. So erstellen Sie einen Dropdown mit gruppierten Schaltflächen Eine weitere interessante Sache, die mit Dropdown -Menüs erfolgen kann. Im Folgenden haben wir gezeigt, wie dies getan werden kann. Html Der oben genannte Code generiert zwei Schaltflächengruppen jeweils aus einer einzelnen Taste, und jede Schaltfläche ist ein Dropdown -Menü zugeordnet. Jede der Dropdown -Menüs wurde auf ähnliche Weise erstellt, wie in den vorherigen Beispielen gezeigt. Ausgang Das Dropdown -Menü, das mit der ersten Schaltflächengruppe verknüpft ist. Das Dropdown -Menü, das mit der zweiten Schaltflächengruppe verknüpft ist. Abschluss Zum Erstellen eines Dropdown -Menüs zuweisen .Dropdown-Liste Menü zu einem Div -Container, in dem das Dropdown -Menü darin enthalten ist. Verwenden Sie anschließend eine Schaltfläche oder einen Link, damit der Benutzer das Dropdown -Menü öffnen kann und es die zuweisen kann .Dropdown-Toggle-Klasse Und Setzen Sie Data-BS-Toggle = "Dropdown" Damit das Menü zum Umlauf machen kann. Erstellen Sie anschließend eine ungeordnete Liste und weisen Sie sie die zu .Dropdown-Menu-Klasse, während zuweisen, die zuweisen .Dropdown-Item-Klasse Zu jedem Listenelement, um dem Benutzer im Menü Optionen zur Verfügung zu stellen. In diesem Beitrag wird erläutert, wie ein Dropdown -Menü genauso erstellt und style.