Bootstrap implementiert Dropdown-Menü-Effekt_Javascript-Fähigkeiten-js-Tutorial-php.cn

Bootstrap implementiert Dropdown-Menü-Effekt_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:02:51

Original

1930 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Hauptsächlich hinzufügen

Es gibt eine Klasse im .dropdown-header-Stil.

4. Deaktivierte Menüpunkte

Fügen Sie im Dropdown-Menü den Link „.disabled“ zu

hinzu.

Ändern Sie den obigen Code weiter und ersetzen Sie den Code in der Zeile „Etwas anderes hier“

Code kopieren Der Code lautet wie folgt:

Hier noch etwas

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.

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.

Ä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>

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

<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>  <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>  <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.

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">  </ul> </div>

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.