Latest web development tutorials

Bootstrap Dropdown-Menü

In diesem Kapitel wird auf Bootstrap Dropdown-Menü konzentrieren. Drop-Down-Menü eingeschaltet ist, wird der Link angezeigt im Listenformat Kontextmenü. Dies kann mit getan werden dem Pull-Down - Menü (Dropdown) JavaScript - Plug-Ins zu erreichen zu interagieren.

Um das folgende Menü zu verwenden, müssen Sie nur das Dropdown-Menü in derKlasse .dropdown hinzuzufügen.Das folgende Beispiel veranschaulicht die Grund Dropdown-Menü:

Beispiele

<Div class = "Dropdown"> <Taste type = "button" class = "BTN Dropdown-Toggle" id = "dropdownMenu1" Daten-Toggle = "Dropdown"> Thema <span class = "Caret"> </ span> </ Button> <Ul class = "Drop - Down-Menü" role = "Menü" aria-labelledby = "dropdownMenu1"> <Li role = "Präsentation"> <A role = "menuitem" tabindex = "-1" href = "#"> Java < / a> </ Li> <Li role = "Präsentation"> <A role = "menuitem" tabindex = "-1" href = "#"> Data Mining </ a> </ Li> <Li role = "Präsentation"> <A role = "menuitem" tabindex = "-1" href = "#"> Datenkommunikation / Netzwerk </ a> </ Li> <Li role = "Präsentation" class = "Teiler"> </ li> <Li role = "Präsentation"> <A role = "menuitem" tabindex = "-1" href = "#"> isoliert Link </ a> </ Li> </ Ul> </ Div>

Versuchen »

Die Ergebnisse sind wie folgt:

Grund Dropdown-Menü (Auswahlmenüs)

Optionen

ausrichten

Durch die Zugabe vonKlasse .pull-Rechts-Menü .dropdowndas Dropdown-Menü rechts auszurichten. Das folgende Beispiel veranschaulicht diesen Punkt:

Beispiele

<Div class = "Dropdown"> <Taste type = "button" class = "BTN Dropdown-Toggle" id = "dropdownMenu1" Daten-Toggle = "Dropdown"> Thema <span class = "Caret"> </ span> </ Button> <Ul class = "Drop - Down-Menü Pull- rechts" role = "Menü" aria-labelledby = "dropdownMenu1"> <Li role = "Präsentation"> <A role = "menuitem" tabindex = "-1" href = "#"> Java < / a> </ Li> <Li role = "Präsentation"> <A role = "menuitem" tabindex = "-1" href = "#"> Data Mining </ a> </ Li> <Li role = "Präsentation"> <A role = "menuitem" tabindex = "-1" href = "#"> Datenkommunikation / Netzwerk </ a> </ Li> <Li role = "Präsentation" class = "Teiler"> </ li> <Li role = "Präsentation"> <A role = "menuitem" tabindex = "-1" href = "#"> isoliert Link </ a> </ Li> </ Ul> </ Div>

Versuchen »

Die Ergebnisse sind wie folgt:

Richten Sie im Dropdown-Menü auf der rechten Seite

Überschrift

Sie können dieKlasse Dropdown-Header verwenden , um den Titel zu dem Beschriftungsfeld Drop - Down - Menü hinzuzufügen.Das folgende Beispiel veranschaulicht diesen Punkt:

Beispiele

<Div class = "Dropdown"> <Taste type = "button" class = "BTN Dropdown-Toggle" id = "dropdownMenu1" Daten-Toggle = "Dropdown"> Thema <span class = "Caret"> </ span> </ Button> <Ul class = "Drop - Down-Menü" role = "Menü" aria-labelledby = "dropdownMenu1"> <Li role = "Präsentation" class = "Drop - Down-header"> Dropdown-Menü Titel </ li> <Li role = "Präsentation"> <A role = "menuitem" tabindex = "-1" href = "#"> Java < / a> </ Li> <Li role = "Präsentation"> <A role = "menuitem" tabindex = "-1" href = "#"> Data Mining </ a> </ Li> <Li role = "Präsentation"> <A role = "menuitem" tabindex = "-1" href = "#"> Datenkommunikation / Netzwerk </ a> </ Li> <Li role = "Präsentation" class = "Teiler"> </ li> <Li role = "Präsentation" class = "Drop - Down-header"> Dropdown-Menü Titel </ li> <Li role = "Präsentation"> <A role = "menuitem" tabindex = "-1" href = "#"> isoliert Link </ a> </ Li> </ Ul> </ Div>

Versuchen »

Die Ergebnisse sind wie folgt:

Drop-Down-Menü-Titel

Weitere Beispiele

Kategorie Beschreibung Beispiele
.dropdown Gibt die Pull-Down-Menüs, Dropdown-Menüs werden in .dropdown Lane gewickelt versuchen
.dropdown-Menü Erstellen Sie ein Drop-Down-Menü versuchen
.dropdown-menu-right Drop-Down-Menü rechts gerechtfertigt versuchen
.dropdown-header Drop-Down-Menü einen Titel hinzufügen versuchen
.dropup Pop-up-Drop-Down-Menü an, versuchen
.disabled Drop-Down-Menüpunkt ist deaktiviert versuchen
.divider Die Trennlinie in der Drop-Down-Menü versuchen