Grund Dropdown
Ein Dropdown-Menü ist ein togglebar Menü, das dem Benutzer ermöglicht, ein Wert aus einer vordefinierten Liste zu wählen:
Beispiel
<div class="dropdown">
<button class="btn btn-primary
dropdown-toggle" type="button" data-toggle="dropdown">Dropdown
Example
<span class="caret"></span></button>
<ul
class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div> Versuch es selber " Beispiel erklärt
Die .dropdown Klasse zeigt ein Dropdown - Menü.
Um das Drop - Down - Menü zu öffnen, verwenden Sie eine Schaltfläche oder einen Link mit einer Klasse von .dropdown-toggle und der data-toggle="dropdown" - data-toggle="dropdown" Attribut.
Die .caret Klasse erstellt eine caret Pfeil - Symbol ( ) ( ) ( ) , Was darauf hindeutet , dass die Schaltfläche ein Dropdown ist.
Fügen Sie die .dropdown-menu - Klasse in eine <ul> Element , um tatsächlich das Dropdown - Menü erstellen.
Dropdown Divider
Die .divider Klasse ist in der Drop - Down - Menü mit einer dünnen horizontalen Grenze zu trennen Links verwendet:
Dropdown-Header
Die .dropdown-header - Klasse wird verwendet Header in der Drop - Down - Menü hinzugefügt werden :
Deaktivieren Sie einen Artikel
Um ein Element in dem Dropdown - Menü zu deaktivieren, verwenden Sie die .disabled Klasse:
Dropdown Position
Zum Rechts richten Sie die Dropdown - Liste, fügen Sie das .dropdown-menu-right Klasse auf das Element mit .dropdown-Menü:
Dropup
Wenn Sie das Drop - Down - Menü wollen nach oben statt nach unten zu erweitern, ändern Sie die <div> Element mit class="dropdown" auf "dropup" :
Dropdown Zugänglichkeit
Zur Verbesserung der Zugänglichkeit für Menschen Bildschirmlesegeräte verwenden, sollten Sie die folgenden Angaben enthalten role und aria-* Attribute, wenn ein Dropdown - Menü zu erstellen:
Beispiel
<div class="dropdown">
<button class="btn btn-default
dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu"
role="menu" aria-labelledby="menu1">
<li
role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li
role="presentation"><a role="menuitem" href="#">About
Us</a></li>
</ul>
</div> Versuch es selber " Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 »
Füllen Sie Bootstrap Dropdown Referenz
Eine vollständige Referenz aller Drop - Down - Optionen, Methoden und Ereignisse finden Sie auf unserer Bootstrap JS Dropdown Referenz .