Dropdown-Menü Ein umschaltbares Kontextmenü zum Anzeigen einer Linkliste.
1. Fall
Umschließen Sie den Dropdown-Menü-Trigger und das Dropdown-Menü in .dropdown und fügen Sie dann den HTML-Code hinzu, aus dem das Menü besteht.
<div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" 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 role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div>
Sie können dem obigen Code entnehmen, dass er möglicherweise viele unbekannte Stilklassen oder Attribute enthält.
Eine Dropdown-Schaltfläche und ein kleines Symbol-Caret auf der rechten Seite. Natürlich befinden sich der Text dieses kleinen Symbols und der Schaltfläche auf derselben Ebene.
Stellen Sie zunächst sicher, dass es in der Schaltfläche eine Dropdown-Umschaltfläche und ein Datenumschalt-Attribut gibt. Basierend auf diesem Attribut wird die Dropdown-Liste angezeigt.
Das Dropdown-Menü unmittelbar nach dem ul-Tag sollte in Verbindung mit dem Drop-Down-Schalter der Stilklasse der Schaltfläche oben verwendet werden, und die Schaltfläche oben ist an aria-labelledby gebunden.
Im vierten li-Tag gibt es einen Teiler, der eigentlich eine Stilklasse zum Trennen von Linien ist.
Das ist wahrscheinlich das, was ich verstehe, und mein Verständnis ist definitiv nicht vorhanden.
2. Ausrichtungsoptionen
Fügen Sie .text-right zum Dropdown-Menü .dropdown-menu hinzu, um den Text rechtsbündig auszurichten.
<div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" 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 role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div>
Fügen Sie einfach eine Text-Rechts-Stilklasse zum ul-Tag im obigen Code hinzu.
3. Titel
Eine Gruppe von Aktionen kann in jedem Dropdown-Menü durch Hinzufügen eines Titels identifiziert werden.
<h1>下拉菜单</h1> <div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">Dropdown header</li> <li role="presentation"><a role="menuitem" 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 role="presentation" class="divider"></li> <li role="presentation" class="dropdown-header">Dropdown header</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div>
Hauptsächlich hinzufügen
4. Deaktivierte Menüpunkte
Fügen Sie im Dropdown-Menü den Link „.disabled“ zu
Ändern Sie den obigen Code weiter und ersetzen Sie den Code in der Zeile „Etwas anderes hier“
Sie können den Effekt nach dem Ausführen überprüfen. Tatsächlich ähnelt der Effekt dem oben genannten Titelstil. Wenn Sie darauf klicken, wird ein deaktiviertes Symbol angezeigt.
5. Grundgehäuse
1), Schaltflächen-Dropdown-Menü
Sie können einen Dropdown-Menüauslöser erstellen, indem Sie eine beliebige Schaltfläche in einer .btn-Gruppe platzieren und die richtigen Menü-Tags hinzufügen.
Dropdown-Menü mit einer Schaltfläche
Ändern Sie einfach einige grundlegende Markierungen, um eine Schaltfläche in einen Dropdown-Menüschalter umzuwandeln.
<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>
Dropdown-Menü mit geteilter Schaltfläche
In ähnlicher Weise erfordert ein Dropdown-Menü mit geteilten Schaltflächen dasselbe Änderungsmarkup, jedoch mit einer separaten Schaltfläche.
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<div class="dropdown">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div
Sie können nur auf das kleine Symbol klicken, um das Menü anzuzeigen.
2), Größe
Die Dropdown-Menüschaltfläche funktioniert mit allen Schaltflächengrößen.
<div class="btn-group"> <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> Large button <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div> <!-- Small button group --> <div class="btn-group"> <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> Small button <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div> <!-- Extra small button group --> <div class="btn-group"> <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown"> Extra small button <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div>
Steuern Sie die Schaltflächengröße über die Stilklassen .btn-lg, .btn-sm, .btn-xs.
3), Popup-Menü
Fügen Sie .dropup zum übergeordneten Element hinzu, um das ausgelöste Dropdown-Menü über dem Element zu erstellen.
<div class="btn-group dropup"> <button type="button" class="btn btn-default">Dropup</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <!-- Dropdown menu links --> </ul> </div>
Untuk maklumat lanjut, sila rujuk: Tutorial pembelajaran Bootstrap
Ringkasan:
Artikel ini terutamanya memperkenalkan kandungan menu lungsur turun yang berkaitan, dan kemudian memperkenalkan gabungan butang dan menu lungsur turun Terdapat sedikit perubahan dan gayanya saya harap anda menyukainya.
