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:
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:
Ü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:
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 |