Beispiel-Tutorial für das Dropdown-Menü der Bootstrap-Schaltfläche

In diesem Kapitel wird erläutert, wie Sie mit der Bootstrap-Klasse einer Schaltfläche ein Dropdown-Menü hinzufügen. Um einer Schaltfläche ein Dropdown-Menü hinzuzufügen, platzieren Sie einfach die Schaltfläche und das Dropdown-Menü in einer .btn-group . Sie können auch verwenden, um anzugeben, dass die Schaltfläche als Dropdown-Menü fungiert.

Wie bereits erwähnt

Das Dropdown-Menü vom Typ „Schaltfläche“ entspricht im Wesentlichen dem Aussehen des Dropdown-Menüs. Der Unterschied besteht darin, dass gewöhnliche Dropdown-Menüs Blockelemente sind, während Schaltflächen-Dropdown-Menüs Inline-Blockelemente sind. In diesem Artikel wird das Dropdown-Menü der Bootstrap-Schaltfläche im Detail vorgestellt

Übersicht

Das Schaltflächen-Dropdown-Menü ist eigentlich ein gewöhnliches Dropdown-Menü, der einzige Unterschied ist der externe Container „div.dropdown“ in „div.btn-group“ geändert, die Anzeige wurde von Block zu Inline-Block geändert

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">按钮式下拉菜单 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu"><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><div class="dropdown">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">普通下拉菜单 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu"><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>

Pop-up

Einige Menüs müssen zum Beispiel am Ende der Seite angezeigt werden, und dieses Menü verfügt über ein Dropdown-Menü, um den Benutzern ein besseres Erlebnis zu bieten , das Dropdown-Menü muss erscheinen. Im Bootstrap-Framework wird speziell für diesen Effekt ein Klassenname „dropup“ vorgeschlagen. Sie müssen diesen Klassennamen nur zu „btn-group“ hinzufügen

[Triangle]

Button Die Standardeinstellung Ein nach unten gerichtetes Dreieck wird erstellt, indem ein „“-Tag-Element zum -Tag hinzugefügt und es „caret“ genannt wird.

　　按钮下拉菜单

Nach dem Login kopieren

Dieses Dreieck ist vollständig implementiert durch CSS-Code

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

Nach dem Login kopieren

Darüber hinaus wurde das Dreieck „Caret“ in der Schaltfläche bis zu einem gewissen Grad gestaltet:

.btn .caret {
  margin-left: 0;
}.btn-lg .caret {
  border-width: 5px 5px 0;
  border-bottom-width: 0;
}.dropup .btn-lg .caret {
  border-width: 0 5px 5px;
}

Nach dem Login kopieren

Wenn die Richtung des Dreiecks nach oben angezeigt werden muss, müssen Sie den Klassennamen „dropup“ an die Klasse „.btn-group“ anhängen. Es ist ersichtlich, dass der Unterschied zwischen dem nach oben gerichteten Dreieck und dem nach unten gerichteten Dreieck tatsächlich besteht , es ändert einen Wert am unteren Rand

.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
  content: "";
  border-top: 0;
  border-bottom: 4px solid;
}

Nach dem Login kopieren

<div class="btn-group dropup" style="margin-top:140px"><button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="##">按钮下拉菜单项</a></li><li><a href="##">按钮下拉菜单项</a></li><li><a href="##">按钮下拉菜单项</a></li><li><a href="##">按钮下拉菜单项</a></li></ul></div>

Nach dem Login kopieren

Split-Typ

Split-Typ Das Schaltflächen-Dropdown-Menü ist eigentlich eine künstliche Trennung der Schaltfläche und des Dreiecks, sodass am Ende nur eine separate Schaltfläche vorhanden ist

<div class="btn-group">
  <button type="button" class="btn">Action</button>
  <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span>
  </button>
  <ul class="dropdown-menu"><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>

Nach dem Login kopieren

Größe

Das Schaltflächen-Dropdown-Menü ist für Schaltflächen aller Größen geeignet, einschließlich btn-xs, btn-lg, btn-sm, usw. Natürlich unterstützt die normale Dropdown-Liste auch das Ändern der Schaltflächengröße

<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li>
  </ul></div><div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li>
  </ul></div><div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li>
  </ul></div>

Nach dem Login kopieren

Endlich

Einige erweiterte Verwendungsmöglichkeiten für gewöhnliche Dropdown-Listen, wie z. B. Trennlinien, Trennlinien, Ausrichtung, Status von Menüelementen usw., Schaltflächen-Dropdown-Menüs werden ebenfalls unterstützt. Daher halte ich es persönlich für etwas überflüssig, die Schaltflächen-Dropdown-Menükomponente im Bootstrap einzurichten. Es gibt nur den Unterschied zwischen Block und Inline-Block, aber es gibt keinen funktionalen Unterschied

Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial für das Dropdown-Menü der Bootstrap-Schaltfläche. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!