Beispiel-Tutorial des Bootstrap-Dropdown-Menüs

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 f092556db850dedfd562431d5552770054bdf357c58b8a65c66d7c19c8e4d114 verwenden, um anzugeben, dass die Schaltfläche als Dropdown-Menü fungiert.

Das folgende Beispiel zeigt ein einfaches Dropdown-Menü für einfache Schaltflächen:

Beispiel

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">功能</a>
        </li>
        <li>
            <a href="#">另一个功能</a>
        </li>
        <li>
            <a href="#">其他</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">分离的链接</a>
        </li>
    </ul></div><div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">功能</a>
        </li>
        <li>
            <a href="#">另一个功能</a>
        </li>
        <li>
            <a href="#">其他</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">分离的链接</a>
        </li>
    </ul></div>

Grundlegende Verwendung

Verwendung des Bootstrap-Frameworks Bei Verwendung von a Wenn die Struktur und der Klassenname nicht korrekt verwendet werden, wirkt sich dies direkt darauf aus, ob die Komponente normal verwendet werden kann.

1. Verwenden Sie ein Containerpaket mit dem Namen „dropdown“ Das gesamte Dropdown-Menüelement

c0a838506a57d6efb82c3faebdcfa64e16b28748ea4df4d9c2150843fecfba68

2. Verwenden Sie eine Schaltfläche bb9345e55eb71822850ff156dfde57c8 als übergeordnetes Menü und definieren Sie den Klassennamen „dropdown-toggle“ und das benutzerdefinierte „data- toggle“-Attribut, und der Wert muss mit dem Namen der äußersten Containerklasse übereinstimmen

8af15fa9ce0b1cee92d5ee57b078822f

3. Der Dropdown-Menüpunkt verwendet eine UL-Liste und definiert einen Klassennamen „Dropdown-Menü“

ae363fd8bc2e4ee3b3446338ba23f464

  
  
  ActionAnother actionSomething else here

4. Durch Setzen des .dropup Klasse für das übergeordnete Element des Dropdown-Menüs können Sie Folgendes tun: Das Menü wird angezeigt (Standardeinstellung ist Popup)

14481b0d0ba7c394e2501a352872843d
  1172180f0ea09fa48126f1bf9c16d1a6Dropupa11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114
  65281c5ac262bf6d81768915a4a77ac0
  c5f7c33631c7deafd5f3bd6bcd1eea2f25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Another action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Something else here5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
  929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68

Prinzipienanalyse

Bootstrap Für die Dropdown-Menükomponente im Framework sind ihre Dropdown-Menüelemente standardmäßig ausgeblendet, da der Standardstil von „dropdown-menu“ auf „ display:none"; wenn der Benutzer auf das übergeordnete Menüelement klickt, wird das Dropdown-Menü angezeigt; wenn der Benutzer erneut darauf klickt, wird das Dropdown-Menü weiterhin ausgeblendet

.dropdown-menu {
  position: absolute;/*设置绝对定位，相对于父元素div.dropdown*/
  top: 100%;/*让下拉菜单项在父菜单项底部，如果父元素不设置相对定位，该元素相对于body元素*/
  left: 0;
  z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*/
  display: none;/*默认隐藏下拉菜单项*/
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

Lassen Sie uns nun das Implementierungsprinzip analysieren. Fügen Sie mithilfe der js-Technologie den Klassennamen „open“ hinzu oder fügen Sie ihn hinzu, um die Anzeige oder das Ausblenden des Dropdowns zu steuern Speisekarte. Das heißt, „div.dropdown“ hat standardmäßig nicht den Klassennamen „open“. Wenn der Benutzer zum ersten Mal klickt, fügt „div.dropdown“ den Klassennamen „open“ hinzu erneut „div.dropdown“ „Der Klassenname „open“ im Container wird wieder entfernt

.open > .dropdown-menu {
  display: block;
}

Erweiterte Verwendung

[Trennlinie]

Das Dropdown-Menü im Bootstrap-Framework stellt ein Dropdown-Trennzeichen bereit. Vorausgesetzt, dass das Dropdown-Menü zwei Gruppen enthält, können Sie zwischen den Gruppen und ein leeres 25edfb22a4f469ecb59f1190150159c6 hinzufügen Fügen Sie diesem 25edfb22a4f469ecb59f1190150159c6-Namen „Teiler“ eine Klasse hinzu, um die Funktion zum Hinzufügen von Dropdown-Teilern zu implementieren

.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

9aa02a4f45fec1ec76777df05ea7dcabbed06894275b65c1ab86501b08a632eb

c0a838506a57d6efb82c3faebdcfa64e
  1172180f0ea09fa48126f1bf9c16d1a6Dropdowna11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114
  65281c5ac262bf6d81768915a4a77ac0
  c5f7c33631c7deafd5f3bd6bcd1eea2f25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Another action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Something else here5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb9aa02a4f45fec1ec76777df05ea7dcabbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Separated link5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
  929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68

【Menütitel】

Sie können jedem Dropdown-Menü einen Titel hinzufügen, um eine Reihe von Aktionen anzuzeigen

c220632b5e888796ad159d12fa43bfcbDropdown headerbed06894275b65c1ab86501b08a632eb

.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #999;
}

c0a838506a57d6efb82c3faebdcfa64e
  1172180f0ea09fa48126f1bf9c16d1a6Dropdowna11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114
  65281c5ac262bf6d81768915a4a77ac0
  f2d98710ffe286210bb25d6dcee36a5c53aee3cf423ceaf51d11d60f48002773第一部分菜单头部bed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb34180452588631f7294f6e20e4d7d79ebed06894275b65c1ab86501b08a632eb53aee3cf423ceaf51d11d60f48002773第二部分菜单头部bed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
  929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68

[Ausrichtung]

Das Dropdown-Menü im Das Bootstrap-Framework ist standardmäßig linksbündig. Wenn Sie möchten, dass das Dropdown-Menü relativ zum übergeordneten Container ist, können Sie bei rechtsbündiger Ausrichtung einen Klassennamen „dropdown-menu-right“ zu „dropdown-menu“

hinzufügen

.dropdown-menu-right {
  right: 0;
  left: auto;
}

Da c015d0f164ad1b1988b34ffbc5d30df0Default Es handelt sich um ein Element auf Blockebene, das die Breite seines übergeordneten Elements ausfüllt. Hier müssen Sie inline-block und margin-left für das Element festlegen, sodass sein Inhalt die Breite ausdehnt und einen bestimmten Abstand von der linken Seite hat

    display: inline-block;
    margin-left: 60px;

bc237f0a329903d1c97cfadcb81fa83a
  1172180f0ea09fa48126f1bf9c16d1a6Dropdowna11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114
  65281c5ac262bf6d81768915a4a77ac0
  0e067206866e68769a13ad0253578a2717107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb34180452588631f7294f6e20e4d7d79ebed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
  929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68

[Menüelementstatus]

Der Standardstatus des Dropdown-Menüelements ist Hover-Status (:hover) und Fokusstatus (:focus)

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}

Zusätzlich zu den oben genannten beiden Zuständen haben die Dropdown-Menüpunkte auch den aktuellen Zustand (.active) und den deaktivierten Zustand (.disabled). Um diese beiden Zustände zu nutzen, müssen Sie lediglich den entsprechenden Klassennamen

c0a838506a57d6efb82c3faebdcfa64e
  1172180f0ea09fa48126f1bf9c16d1a6Dropdowna11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114
  65281c5ac262bf6d81768915a4a77ac0
  f2d98710ffe286210bb25d6dcee36a5c556e13e9c9f7f01f9fb88f9dc143761412127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb34180452588631f7294f6e20e4d7d79ebed06894275b65c1ab86501b08a632eb9e19533ed9cabe256346eae338ee3b4412127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
  929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68

zum entsprechenden Menüpunkt hinzufügen

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