Heim >Web-Frontend >HTML-Tutorial >Ausführliche Erläuterung der Beispiele für Bootstrap-Dropdown-Menüs
Ausführliche Erläuterung der Beispiele für Bootstrap-Dropdown-Menüs
- 零下一度Original
- 2017-07-03 11:03:281505Durchsuche
Vorherige Wörter
Bei der Interaktion mit Webseiten werden häufig Kontextmenüs oder ausgeblendete/angezeigte Menüelemente benötigt, um standardmäßig ein umschaltbares Kontextmenü für die Anzeige einer Linkliste bereitzustellen. Darüber hinaus muss die Menüanzeige in verschiedenen interaktiven Zuständen in Verbindung mit dem Javascript-Plug-in verwendet werden. In diesem Artikel wird detailliert beschrieben, wie Sie das Bootstrap-Dropdown-Menü verwenden.
Wenn Sie das Dropdown-Menü des Bootstrap-Frameworks verwenden, müssen Sie den Bootstrap aufrufen .js-Datei, die vom Bootstrap-Framework bereitgestellt wird. Wenn Sie die unkompilierte Version verwenden, finden Sie natürlich eine Datei mit dem Namen „dropdown.js“ im js-Ordner, und Sie können diese js-Datei auch
nennen, da die Komponenteninteraktionseffekte von Bootstrap alle von A abhängen Von der jQuery-Bibliothek geschriebenes Plug-in, daher muss jquery.js geladen werden, bevor bootstrap.js verwendet wird, um Effekte zu erzeugen
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css?1.1.11" rel="stylesheet"></head><body><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js?1.1.11"></script></body></html>
Grundlegende Verwendung
Bei der Verwendung der Dropdown-Menükomponente im Bootstrap-Framework ist es sehr wichtig, die richtige Struktur und den Klassennamen zu verwenden. 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“, der das gesamte Dropdown-Menüelement umschließt.
<div class="dropdown"></div>
2. Verwenden Sie eine Schaltfläche
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">
3. Der Drop -down-Menüelement verwendet eine UL-Liste und definiert eine Klasse mit dem Namen „dropdown-menu“
<ul class="dropdown-menu" role="menu">
ActionAnother actionSomething else here
4. Als übergeordnetes Element des Dropdown-Menüs übergeben. Die Elementeinstellung .dropup ermöglicht das Einblenden des Menüs (Standardeinstellung ist das Einblenden)
<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>
Prinzipanalyse
Für die Dropdown-Menükomponente im Bootstrap-Framework sind die Dropdown-Menüelemente standardmäßig ausgeblendet, da das „Dropdown-Menü“ Der Standardstil ist auf „display:none“ eingestellt. Wenn der Benutzer auf das übergeordnete Menüelement klickt, wird das Dropdown-Menü angezeigt. Wenn der Benutzer erneut 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);
}.open > .dropdown-menu {
display: block;
}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 ein leeres
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}<li role="separator" class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #999;
} <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" role="menu" aria-labelledby="dropdownMenu1"><li role="presentation" class="dropdown-header">第一部分菜单头部</li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation" class="divider"></li><li role="presentation" class="dropdown-header">第二部分菜单头部</li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul></div>
.dropdown-menu-right {
right: 0;
left: auto;
} Da display: inline-block; margin-left: 60px;
<div class="dropdown" style="display: inline-block;margin-left: 60px;"> <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 dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation" class="divider"></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul></div>
[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 <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" role="menu" aria-labelledby="dropdownMenu1"><li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation" class="divider"></li><li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul></div>
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Beispiele für Bootstrap-Dropdown-Menüs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!