Neueste Web-Entwicklung Tutorials
 

Bootstrap Dropdowns


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:

Beispiel

<li class="divider"></li>
Versuch es selber "

Dropdown-Header

Die .dropdown-header - Klasse wird verwendet Header in der Drop - Down - Menü hinzugefügt werden :

Beispiel

<li class="dropdown-header">Dropdown header 1</li>
Versuch es selber "

Deaktivieren Sie einen Artikel

Um ein Element in dem Dropdown - Menü zu deaktivieren, verwenden Sie die .disabled Klasse:

Beispiel

<li class="disabled"><a href="#">CSS</a></li>
Versuch es selber "

Dropdown Position

Zum Rechts richten Sie die Dropdown - Liste, fügen Sie das .dropdown-menu-right Klasse auf das Element mit .dropdown-Menü:

Beispiel

<ul class="dropdown-menu dropdown-menu-right">
Versuch es selber "

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

Beispiel

<div class="dropup">
Versuch es selber "

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 .