Bootstrap-Taste Drop-Down-Menü
In diesem Kapitel wird erläutert, wie die Bootstrap-Klasse verwenden, um das Dropdown-Menü-Taste, um hinzuzufügen. So fügen Sie im Drop-Down - Menü - Taste, einfach platzierten Tasten und Drop-Down - Menüs in einer.btn-Gruppe kann in sein.Sie können auch die <span class = "Caret"> </ span> verwenden, um ein Dropdown-Menü anzuzeigen.
Das folgende Beispiel zeigt eine grundlegende einfache Schaltfläche Drop-Down-Menü:
Beispiele
<Div class = "BTN-Gruppe">
<Taste type = "button" class = "btn btn-default Dropdown Toggle" Daten-Toggle = "Dropdown"> Standard <span class = "Caret"> </ span>
</ Button>
<Ul class = "Drop - Down-Menü" role = "Menü">
<Li>
<A href = "#"> Funktion </ a>
</ Li>
<Li>
<A href = "#"> Ein weiteres Merkmal </ a>
</ Li>
<Li>
<A href = "#"> Andere </ a>
</ Li>
<Li class = "Teiler"> </ li>
<Li>
<A href = "#"> isoliert Link </ a>
</ Li>
</ Ul>
</ Div>
<Div class = "BTN-Gruppe">
<Taste type = "button" class = "btn btn-primären Drop - Down - Toggle" Daten-Toggle = "Dropdown"> original <span class = "Caret"> </ span>
</ Button>
<Ul class = "Drop - Down-Menü" role = "Menü">
<Li>
<A href = "#"> Funktion </ a>
</ Li>
<Li>
<A href = "#"> Ein weiteres Merkmal </ a>
</ Li>
<Li>
<A href = "#"> Andere </ a>
</ Li>
<Li class = "Teiler"> </ li>
<Li>
<A href = "#"> isoliert Link </ a>
</ Li>
</ Ul>
</ Div>
Versuchen »
Die Ergebnisse sind wie folgt:
Split-Taste Drop-Down-Menü
Split Tasten und Drop-Down-Menüs über das Drop-Down-Taste etwa den gleichen Stil, aber das Drop-Down-Menü auf die ursprüngliche Funktion hinzuzufügen. Split-Taste links der ursprünglichen Eigenschaften, ist das Recht, das Dropdown-Menü, um die Anzeige zu wechseln.
Beispiele
<Div class = "BTN-Gruppe">
<Taste type = "button" class = "btn btn-default" > default </ button>
<Taste type = "button" class = "btn btn-default Dropdown Toggle"
Daten-Toggle = "Dropdown">
<span class = "Caret"> </ span>
<span class = "sr-only"> Schalter Dropdown-Menü </ span>
</ Button>
<Ul class = "Drop - Down-Menü" role = "Menü">
<Li> <a href = "#"> Funktion </ a> </ li>
<Li> <a href = "#"> Ein weiteres Merkmal </ a> </ li>
<Li> <a href = "#"> Andere </ a> </ li>
<Li class = "Teiler"> </ li>
<Li> <a href = "#"> isoliert Link </ a> </ li>
</ Ul>
</ Div>
<Div class = "BTN-Gruppe">
<Taste type = "button" class = "BTN BTN-primary" > Original </ button>
<Taste type = "button" class = "btn btn-primären Drop - Down - Toggle" Daten-Toggle = "Dropdown">
<span class = "Caret"> </ span>
<span class = "sr-only"> Schalter Dropdown-Menü </ span>
</ Button>
<Ul class = "Drop - Down-Menü" role = "Menü">
<Li> <a href = "#"> Funktion </ a> </ li>
<Li> <a href = "#"> Ein weiteres Merkmal </ a> </ li>
<Li> <a href = "#"> Andere </ a> </ li>
<Li class = "Teiler"> </ li>
<Li> <a href = "#"> isoliert Link </ a> </ li>
</ Ul>
</ Div>
Versuchen »
Die Ergebnisse sind wie folgt:
Größe Pull-Down-Menü-Taste
Sie können die Drop-down - Menü mit einer Vielzahl vonKnopfgröße verwenden: .btn-large, .btn-sm oder .btn-xs.
Beispiele
<Div class = "BTN-Gruppe">
<Taste type = "button" class = "btn btn-default Drop - Down - Toggle - BTN-lg" Daten-Toggle = "Dropdown"> Standard <span class = "Caret"> </ span>
</ Button>
<Ul class = "Drop - Down-Menü" role = "Menü">
<Li>
<A href = "#"> Funktion </ a>
</ Li>
<Li>
<A href = "#"> Ein weiteres Merkmal </ a>
</ Li>
<Li>
<A href = "#"> Andere </ a>
</ Li>
<Li class = "Teiler"> </ li>
<Li>
<A href = "#"> isoliert Link </ a>
</ Li>
</ Ul>
</ Div>
<Div class = "BTN-Gruppe">
<Taste type = "button" class = "btn btn-primären Drop - Down - Toggle - BTN-sm" Daten-Toggle = "Dropdown"> original <span class = "Caret"> </ span>
</ Button>
<Ul class = "Drop - Down-Menü" role = "Menü">
<Li>
<A href = "#"> Funktion </ a>
</ Li>
<Li>
<A href = "#"> Ein weiteres Merkmal </ a>
</ Li>
<Li>
<A href = "#"> Andere </ a>
</ Li>
<Li class = "Teiler"> </ li>
<Li>
<A href = "#"> isoliert Link </ a>
</ Li>
</ Ul>
</ Div>
<Div class = "BTN-Gruppe">
<Taste type = "button" class = "btn btn-Erfolg Drop - Down - Toggle - BTN-xs" Daten-Toggle = "Dropdown"> Erfolg <span class = "Caret"> </ span> </ button>
<Ul class = "Drop - Down-Menü" role = "Menü">
<Li>
<A href = "#"> Funktion </ a>
</ Li>
<Li>
<A href = "#"> Ein weiteres Merkmal </ a>
</ Li>
<Li>
<A href = "#"> Andere </ a>
</ Li>
<Li class = "Teiler"> </ li>
<Li>
<A href = "#"> isoliert Link </ a>
</ Li>
</ Ul>
</ Div>
Versuchen »
Die Ergebnisse sind wie folgt:
Down-Menü-Taste
Das Menü kann auch erstellt werden, fügen Sie einfach.dropup .btn-Gruppezu den übergeordneten Container.
Beispiele
<Div class = "Zeile" style = "margin-left: 50px ; margin-top: 200px">
<Div class = "BTN-Gruppe dropup" >
<Taste type = "button" class = "btn btn-default Dropdown Toggle" Daten-Toggle = "Dropdown"> Standard <span class = "Caret"> </ span>
</ Button>
<Ul class = "Drop - Down-Menü" role = "Menü">
<Li>
<A href = "#"> Funktion </ a>
</ Li>
<Li>
<A href = "#"> Ein weiteres Merkmal </ a>
</ Li>
<Li>
<A href = "#"> Andere </ a>
</ Li>
<Li class = "Teiler"> </ li>
<Li>
<A href = "#"> isoliert Link </ a>
</ Li>
</ Ul>
</ Div>
<Div class = "BTN-Gruppe dropup" >
<Taste type = "button" class = "btn btn-primären Drop - Down - Toggle" Daten-Toggle = "Dropdown"> original <span class = "Caret"> </ span>
</ Button>
<Ul class = "Drop - Down-Menü" role = "Menü">
<Li>
<A href = "#"> Funktion </ a>
</ Li>
<Li>
<A href = "#"> Ein weiteres Merkmal </ a>
</ Li>
<Li>
<A href = "#"> Andere </ a>
</ Li>
<Li class = "Teiler"> </ li>
<Li>
<A href = "#"> isoliert Link </ a>
</ Li>
</ Ul>
</ Div>
</ Div>
Versuchen »
Die Ergebnisse sind wie folgt:
