Heim >Web-Frontend >Bootstrap-Tutorial >Eine einfache Einführung in Dropdown-Menüs in Bootstrap

Eine einfache Einführung in Dropdown-Menüs in Bootstrap

青灯夜游
青灯夜游nach vorne
2021-06-22 11:10:402780Durchsuche

Dieser Artikel gibt Ihnen eine detaillierte Einführung in das Dropdown-Menü in Bootstrap. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Eine einfache Einführung in Dropdown-Menüs in Bootstrap

Bei der Interaktion mit Webseiten werden häufig Kontextmenüs oder ausgeblendete/angezeigte Menüelemente benötigt. Bootstrap bietet standardmäßig ein umschaltbares Kontextmenü zum Anzeigen einer Linkliste. Darüber hinaus muss die Menüanzeige in verschiedenen interaktiven Zuständen in Verbindung mit dem Javascript-Plug-in verwendet werden. [Verwandte Empfehlung: „Bootstrap-Tutorial“]

Verwendung

Wenn Sie das Dropdown-Menü des Bootstrap-Frameworks verwenden, müssen Sie die vom Bootstrap-Framework bereitgestellte Datei bootstrap.js aufrufen. Wenn Sie die unkompilierte Version verwenden, finden Sie natürlich eine Datei mit dem Namen „dropdown.js“ im js-Ordner und können diese js-Datei auch aufrufen

Da die Komponenteninteraktionseffekte von Bootstrap alle auf der Grundlage der jQuery-Bibliothek geschrieben sind Plug-in, daher müssen Sie jquery.js laden, bevor Sie bootstrap.js verwenden, um den Effekt zu erzielen Struktur. 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 einen Container mit dem Namen „dropdown“, um das gesamte Dropdown-Menüelement einzuschließen
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
 2. Verwenden Sie eine Schaltfläche

<div></div>

  3. Die Dropdown-Menüelement verwendet eine UL-Liste und definiert eine Klasse mit dem Namen „dropdown-menu“

<button></button>

     4. Durch Festlegen der

    -Klasse für das übergeordnete Element des Dropdown-Menüs können Sie das Menü als Popup anzeigen lassen (Die Standardeinstellung ist Pop-Down)

    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <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>

    Eine einfache Einführung in Dropdown-Menüs in Bootstrap

    .dropupPrinzipielle Analyse

    Eine einfache Einführung in Dropdown-Menüs in Bootstrap Für die Dropdown-Menükomponente im Bootstrap-Framework sind die Dropdown-Menüelemente aufgrund der Standardeinstellung „Dropdown-Menü“ standardmäßig ausgeblendet Der Stil ist auf „display:none“ eingestellt. Wenn der Benutzer auf das übergeordnete Menüelement klickt, wird das Dropdown-Menü weiterhin ausgeblendet ]

     1. Wenn die Webseite geladen wird, führt das Dropdown-Plug-in eine Ereignisbindung für alle Elemente mit dem data-toggle="dropdown"-Stil durch 2. Wenn der Benutzer mit dem data-toggle auf einen Link oder eine Schaltfläche klickt ="Dropdown"-Stil, der Javascript-Ereigniscode wird ausgelöst

     3. Der Javascript-Ereigniscode fügt dem übergeordneten Container einen .open-Stil hinzu

     4. Das .dropdown ist standardmäßig ausgeblendet – nachdem das Menü extern den .open-Stil hat , es kann angezeigt werden, um den gewünschten Effekt zu erzielen

     5. Wenn der Benutzer erneut klickt, wird der Klassenname „open“ im „p.dropdown“-Container wieder entfernt

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

    [Andere Verwendung]

    Eine weitere interessante Verwendung besteht darin, dass das Triggerelement außerhalb des übergeordneten Containers des Menüs platziert werden kann

     Bei dieser Verwendung sind jedoch zwei Punkte zu beachten

     1. Legen Sie die ID des übergeordneten Containerwerts fest

      2. Um den Datenumschalter festzulegen Attribut und Datenzielattribut des Triggerelements, der Datenzielattributwert ist #id

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

    Erweiterte Verwendung

    【Trennzeichen】

    Eine einfache Einführung in Dropdown-Menüs in Bootstrap Im Bootstrap-Framework bietet das Dropdown-Menü ein Drop- Unter der Annahme, dass das Dropdown-Menü zwei Gruppen enthält, können Sie zwischen den Gruppen ein leeres

  • hinzufügen und diesem
  • die Funktion des Dropdown-Teilers hinzufügen

    【Menütitel】

    Sie können einen Titel hinzufügen, um eine Reihe von Aktionen in jedem Dropdown-Menü anzugeben Linksbündig. Wenn Sie möchten, dass das Dropdown-Menü relativ zum übergeordneten Container rechtsbündig ist, können Sie einen Klassennamen „dropdown-menu-right“ zu „dropdown-menu“ hinzufügen

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

    Da

Das obige ist der detaillierte Inhalt vonEine einfache Einführung in Dropdown-Menüs in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen