Eine kurze Diskussion der Dropdown-Menüklasse (dropdown-menu) in Bootstrap

Bootstrap verfügt über einen vollständigen Satz integrierter Dropdown-Menükomponenten. In diesem Artikel stellen wir Ihnen die Dropdown-Menüklasse in Bootstrap vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Das Dropdown-Menü ist ein sehr häufiger Effekt, der zum Anzeigen eines umschaltbaren und verwandten Satzes von Links verwendet wird. Es kann Platz im Webseiten-Layout sparen und das Webseiten-Layout prägnant und ordentlich gestalten.

Bootstrap verfügt über einen vollständigen Satz integrierter Dropdown-Menükomponenten, die für verschiedene Elemente wie Navigation, Schaltflächen usw. verwendet werden können. In Kombination mit anderen Elementen können Sie auch verschiedene Menüeffekte gestalten.

Das interaktive Verhalten des Dropdown-Menüs erfordert auch die Unterstützung des Dropdown-Menü-Plug-Ins (dropdown.js). Bei Verwendung der Dropdown-Menükomponente muss daher auch die Datei dropdown.js eingeführt werden.

Verwandte Empfehlungen: „Bootstrap-Tutorial“

Erstellen Sie ein Dropdown-Menü

Die Dropdown-Menüs in Bootstrap werden alle basierend auf Listen implementiert, und Sie können ungeordnete Listen (

) oder verwenden Geordnete Listen (), Beschreibungsliste (

) wird noch nicht unterstützt.

Fügen Sie die Klasse .dropdown-menu zu

hinzu, um ein Dropdown-Menü zu erstellen. Zum Beispiel:

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
  <li><a tabindex="-1" href="#">Action</a></li>
  <li><a tabindex="-1" href="#">Another action</a></li>
  <li><a tabindex="-1" href="#">Something else here</a></li>
</ul>

Der Effekt ist in Abbildung 3-8 dargestellt:


Abbildung 3-8 Dropdown-Menü

Normalerweise muss das Dropdown-Menü standardmäßig ausgeblendet werden. Es wird nur angezeigt, wenn das Der Benutzer klickt auf eine Schaltfläche oder einen Link. Daher müssen Sie den Hyperlink oder die Schaltfläche und das Dropdown-Menü in einen Container mit class="dropdown" oder position: relative; einschließen und der Schaltfläche oder dem Link das Attribut data-toggle="dropdown" hinzufügen. Dadurch kann das Dropdown-Menü standardmäßig ausgeblendet werden und nur aktiviert und angezeigt werden, wenn auf eine Schaltfläche oder einen Link geklickt wird. Zum Beispiel:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Zu diesem Zeitpunkt sehen Sie bei der Vorschau im Browser eine Schaltfläche. Wenn Sie auf die Schaltfläche klicken, wird das Dropdown-Menü aktiviert und angezeigt. Der Effekt ist in Abbildung 3-9 dargestellt:


Abbildung 3-9 Aktivieren Sie das Dropdown-Menü

Standardmäßig wird das Untermenü in einer Dropdown-Form angezeigt. Wenn Sie ein Popup-Menü in Pull-up-Form erstellen möchten, packen Sie einfach das gesamte Dropdown-Menü in einen .dropup-Container:

<div class="dropup">
…
</div>

Der Effekt ist in Abbildung 3-10 dargestellt:


Abbildung 3-10 Pull-up-Menü

Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion der Dropdown-Menüklasse (dropdown-menu) in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!