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

<div class="dropdown"></div>

2. Verwenden Sie eine Schaltfläche 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

<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">

Nach dem Login kopieren

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

<ul class="dropdown-menu" role="menu">

Nach dem Login kopieren

  
  
  ActionAnother actionSomething else here

Nach dem Login kopieren

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)

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropup<span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"><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

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);
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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

hinzufügen Fügen Sie diesem

-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;
}

Nach dem Login kopieren

<li role="separator" class="divider"></li>

Nach dem Login kopieren

Dropdown

• Action
• Another action
• Something else here
<li role="separator" class="divider"></li>
• Separated link