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
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>
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
按钮下拉菜单
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;
}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;
}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;
}<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>
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>
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>
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!
