HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap -Dropdowns

❮ Vorherige Nächste ❯

Grundlegendes Dropdown

Ein Dropdown-Menü ist ein umschaltbares Menü, das es dem Benutzer ermöglicht, einen Wert aus einer vordefinierten Liste auszuwä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>

Beispiel erklärt

Die .dropdownKlasse gibt ein Dropdown-Menü an.

Um das Dropdown-Menü zu öffnen, verwenden Sie eine Schaltfläche oder einen Link mit einer Klasse von .dropdown-toggleund dem data-toggle="dropdown"Attribut.

Die .caretKlasse erstellt ein Caret-Pfeilsymbol (), was darauf hinweist, dass es sich bei der Schaltfläche um eine Dropdown-Liste handelt.

Fügen Sie die .dropdown-menuKlasse einem <ul>Element hinzu, um das Dropdown-Menü tatsächlich zu erstellen.

Dropdown-Teiler

Die .dividerKlasse wird verwendet, um Links innerhalb des Dropdown-Menüs mit einem dünnen horizontalen Rahmen zu trennen:

Beispiel

<li class="divider"></li>

Dropdown-Kopfzeile

Die .dropdown-headerKlasse wird verwendet, um Header im Dropdown-Menü hinzuzufügen:

Beispiel

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

Deaktivieren und aktive Elemente

Markieren Sie ein bestimmtes Dropdown-Element mit der Klasse .active (fügt eine blaue Hintergrundfarbe hinzu).

Um ein Element im Dropdown-Menü zu deaktivieren, verwenden Sie die .disabledKlasse (erhält eine hellgraue Textfarbe und ein "Parkverbotszeichen"-Symbol beim Hover):

Beispiel

<li class="disabled"><a href="#">CSS</a></li>
<li class="active"><a href="#">HTML</a></li>

Dropdown-Position

Um das Dropdown rechts auszurichten, fügen Sie die .dropdown-menu-rightKlasse mit .dropdown-menu zum Element hinzu:

Beispiel

<ul class="dropdown-menu dropdown-menu-right">

Herunterfallen

Wenn Sie möchten, dass das Dropdown-Menü nach oben statt nach unten erweitert wird, ändern Sie das Element <div> mit class="dropdown" in "dropup":

Beispiel

<div class="dropup">

Dropdown-Barrierefreiheit

Um die Zugänglichkeit für Personen zu verbessern, die Screenreader verwenden, sollten Sie beim Erstellen eines Dropdown-Menüs die folgenden roleund Attribute einbeziehen:aria-*

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>

Testen Sie sich mit Übungen

Übung:

Fügen Sie die erforderlichen Klassen und Attribute hinzu, um eine Dropdown-Liste zu erstellen.

<div class="">
  <button 
  class="btn btn-primary ">
  Dropdown Example
  <span class="caret"></span></button>
  <ul class="">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Vollständige Bootstrap-Dropdown-Referenz

Eine vollständige Referenz aller Dropdown-Optionen, Methoden und Ereignisse finden Sie in unserer Bootstrap JS Dropdown-Referenz .


❮ Vorherige Nächste ❯