Das Dropdown-Menü wird verwendet, um ein kontextualisiertes Menü "Togglable) in der Linkliste anzuzeigen.
1. Fall
Wickeln Sie das Dropdown-Menü Trigger und Dropdown-Menü in .dropdown ein und fügen Sie dann den HTML-Code hinzu, aus dem das Menü besteht.
<Div> <button type = "button" id = "DropdownMenu1" data-toggle = "Dropdown"> Dropdown <span> </span> </button> <ul rollen = "Menü" Aria-labelledBy = "DropdownMenu1"> <li rolle = "Präsentation"> <a rollen = "menuitem" tabindex = "-1"-1 "-1"-1 "-1"-"href role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"></li> <li role="presentation"><a role="menuitem" tabindex = "-1" href = "#"> getrennter Link </a> </li> </ul> </div>
Sie können durch den obigen Code finden, dass es viele unbekannte Klassen oder Attribute gibt.
Auf der rechten Seite befindet sich eine Dropdown -Taste und ein kleines Symbolpflege. Natürlich ist der Text dieses kleinen Symbols und der Schaltfläche von der gleichen Ebene.
Lassen Sie uns zunächst sehen, dass in der Schaltfläche Schaltflächen und ein Data-Toggle-Attribut ein Dropdown-Toggle enthält. Die Liste wird basierend auf diesem Attribut angezeigt.
Unmittelbar danach sollte die Dropdown-Menu der UL-Etikett in Verbindung mit dem Dropdown-Treffer der Style-Klasse der obigen Taste verwendet werden und die obige Taste durch Aria-markiertes Bindungsbetrag bindet.
Als nächstes gibt es einen Teiler im vierten Li -Tag, der eigentlich eine Stilklasse für die Trennung von Linien ist.
Vielleicht verstehe ich so, aber ich verstehe es definitiv nicht richtig.
2. Ausrichtungsoptionen
Fügen Sie .Text-Recht zum Dropdown-Menü hinzu.
<Div> <button type = "button" id = "DropdownMenu1" data-toggle = "Dropdown"> Dropdown <span> </span> </button> <ul rollen = "Menü" Aria-labelledBy = "DropdownMenu1"> <li rolle = "Präsentation"> <a rollen = "menuitem" tabindex = "-1"-1 "-1"-1 "-1"-"href role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"></li> <li role="presentation"><a role="menuitem" tabindex = "-1" href = "#"> getrennter Link </a> </li> </ul> </div>
Fügen Sie dem UL-Tag im obigen Code einfach eine Klasse für Text-Rechts-Stile hinzu.
3. Titel
Eine Reihe von Aktionen kann durch Hinzufügen eines Titels in jedem Dropdown-Menü markiert werden.
<h1> Dropdown-Menü </h1> <div> <button type = "button" id = "dropdownMenu1" data-toggle = "Dropdown"> Dropdown <span> </span> </button> <ul rollen = "Menü" Aria-labelledBy = "Dropdownu1"> <li rollen = "rollen". tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li rollen = "Präsentation"> </li> <li rollen = "Präsentation"> Dropdown-Header </li> <li rollen = "Präsentation"> <a rollen = "Menuitem" tabindex = "-1" href = "#"> getrennter Link </a> </li> </ul> </div>
Die Hauptsache ist, eine Klasse-Klasse-Klasse-Klasse in <li rollen = "Präsentation"> Dropdown-Header </li> hinzuzufügen.
4.. Deaktivierte Menüelemente
Fügen Sie im Dropdown-Menü zu <li> hinzugefügt, um den Link zu deaktivieren.
Ändern Sie den obigen Code weiter, um den Code in der Zeile von etwas anderem hier zu ersetzen
Kopieren Sie den Code wie folgt: <li rollen = "Präsentation"> <a rollen = "Menuitem" tabindex = "-1" href = "#"> Etwas anderes hier </a> </li>
Fügen Sie hauptsächlich .Disabled Style -Klassen in das Li -Tag hinzu.
Nachdem Sie es ausgeführt haben, können Sie den Effekt anzeigen. Tatsächlich ähnelt der Effekt dem obigen Titelstil. Wenn Sie klicken, wird ein deaktiviertes Symbol angezeigt.
5. Grundfälle
1) Dropdown-Menü vom Typ Button
Geben Sie alle Tasten in .BTN-Gruppe ein und fügen Sie die richtige Menümarkierung hinzu, um einen Dropdown-Menüauslöser zu erstellen.
Dropdown-Menü einzelner Taste
Ändern Sie einfach einige grundlegende Markierungen und verwandeln Sie die Taste in einen Dropdown-Menüschalter.
<Div> <button type = "button" data-toggle = "Dropdown"> Aktion <span> </span> </button> <ul rollen = "Menü"> <li> <a href = "#"> action </a> </li> <li> <a href = "#"> Eine andere Aktion </a> <li> <li> <a href = " <li> <a href = "#"> getrennter Link </a> </li> </ul> </div>
Pulldown-Menü "Taste Taste Taste"
In ähnlicher Weise erfordert das Dropdown-Menü der Split-Taste dieselbe Änderungsmarke, jedoch nur eine weitere separate Taste.
<div> <button type="button">Action</button> <div> <button type="button" data-toggle="dropdown"> <span></span> <span>Toggle Dropdown</span> </button> <ul role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href = "#"> Etwas anderes hier </a> </li> <li> </li> <li> <a href = "#"> getrennter Link </a> </li> </div> </div
Sie können nur auf das kleine Symbol klicken, um angezeigt zu werden.
2) Größe
Die Schaltfläche Dropdown-Menü gilt für Schaltflächen aller Größen.
<div> <button type="button" data-toggle="dropdown"> Large button <span></span> </button> <ul> ... </ul></div><!-- Small button group --><div> <button type="button" data-toggle="dropdown"> Small button <span></span> </button> <ul> ... </ul></div><!-- Extra small button group --><div> <button type="button" Data-Toggle = "Dropdown"> extra kleiner Taste <span> </span> </button> <ul> ... </ul> </div>
Steuern Sie die Größe der Taste durch die Stilklassen .BTN-LG, .BTN-SM und .BTN-XS.
3) Aufwärts-Popup-Menü
Durch das Hinzufügen von .dropup zum übergeordneten Element führt das ausgelöste Dropdown-Menü über dem Element.
<Div> <Button type = "button"> Dropup </button> <button type = "button" data-toggle = "Dropdown"> <span> </span> <span> Dropdown-Taste </span> </button> <ul> <!-Dropdown-Menü Links-> </ul> </div>
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
In diesem Artikel wird hauptsächlich den relevanten Inhalt des Dropdown-Menüs vorgestellt und dann die Kombination aus Schaltflächen und Dropdown-Menüs eingeführt. Es gibt ziemlich viele Veränderungen und der Stil ist auch gut. Ich hoffe, es mag alle.