So machen Sie Bootstrap-Dropdown-Menü

Das Dropdown-Menü ist ein Panel, in dem eine Liste der Optionen angezeigt wird, die durch Klicken oder Schwebeauslöser angezeigt werden (Schaltflächen oder Links). Erstellen Sie das Dropdown-Menü Bootstrap sind die folgenden Schritte: Erstellen Sie einen Container und fügen Sie die Dropdown-Klasse hinzu. Fügen Sie ein Triggerelement (Taste oder Link) hinzu und fügen Sie Dropdown-Toggle und Data-Toggle = "Dropdown" -Formen hinzu. Erstellen Sie eine ungeordnete Liste und fügen Sie die Dropdown-Menusklasse hinzu. Fügen Sie der Liste ein Listenelement hinzu, das Links oder Inhalte enthält.

Bootstrap-Dropdown-Menü erstellen

Was ist ein Dropdown-Menü?

Das Dropdown-Menü ist eine interaktive Komponente, in der ein Panel mit einer Liste von Optionen angezeigt wird, wenn der Benutzer klickt oder schwebt.

Wie erstelle ich ein Bootstrap-Dropdown-Menü?

Um ein Dropdown-Menü zu erstellen, sind die folgenden HTML-Elemente erforderlich:

<li> <div> Container wird verwendet, um das Dropdown-Menü einzuwickeln<li> <code><button></button> oder <a></a> Elemente als Trigger, und das Menü wird angezeigt, wenn der Benutzer klickt oder schwebt. <li> <ul></ul> Unbestrafte Liste wird verwendet, um Menüoptionen einzuschließen <li> <li> Listelemente werden verwendet, um einzelne Menüoptionen darzustellen

Schritt:

<li> Erstellen Sie einen <div> -Container und fügen Sie <code>dropdown -Klasse hinzu.<li> Fügen Sie das Trigger-Element ( <button></button> oder <a></a> ) im Container hinzu und fügen Sie dropdown-toggle und data-toggle="dropdown" -Formen hinzu. <li> Erstellen Sie eine ungeordnete Liste von <ul></ul> und fügen Sie dieser Liste dropdown-menu -Klasse hinzu. <li> Fügen Sie in der Liste <ul></ul> ein <li> Listenelement hinzu und fügen Sie für jede Option einen Link oder einen anderen Inhalt hinzu.

Beispielcode:

 <code class="html"><div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Dropdown </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> </ul> </div></code>

Erweiterte Optionen:

<li> Untermenü: Erstellen Sie das Untermenü mit verschachtelten <ul></ul> und <li> Elementen. <li> Abgrenzer: add <li role="separator" class="divider"> zu separate Menüelemente. <li> Titel: add <li role="heading" class="dropdown-header"> um einen Titel zu erstellen. <li> Elemente deaktivieren: Hinzufügen von disabled Attribut, um Menüelemente zu deaktivieren.

Hinweis:

<li> Stellen Sie sicher, dass das Triggerelement aria-haspopup="true" und aria-expanded="false" Eigenschaften für eine verbesserte Zugänglichkeit enthält. <li> Verwenden Sie JavaScript, um Dropdown-Menüereignisse zu verarbeiten (z. B. Menüs anzeigen/ausblenden). <li> Nutzen Sie die Bootstrap -Dokumentations- und Komponentenbeispiele für fortgeschrittene Nutzung.