suchen

Heim  >  Artikel  >  Web-Frontend  >  Erlernen Sie die Javascript-Kenntnisse des Bootstrap-Komponenten-Dropdown-Menüs

Erlernen Sie die Javascript-Kenntnisse des Bootstrap-Komponenten-Dropdown-Menüs

WBOY
WBOYOriginal
2016-05-16 15:48:281494Durchsuche

Bootstrap ist ein einfaches und flexibles, beliebtes Front-End-Framework, das von Twitter-Ingenieuren gestartet wurde. Wir können es uns als CSS- und JS-Bibliothek vorstellen, die viele Effekte definiert . Komponentenanzeigeeffekte und Animationen.

.dropdown – Legen Sie das übergeordnete Element als Dropdown-Menükomponente fest und öffnen Sie das Untermenü nach unten
.dropup – Legen Sie das übergeordnete Element als Dropdown-Menükomponente fest und öffnen Sie das Untermenü .dropdown-toggle – Legen Sie die Schaltfläche als Dropdown-Menü-Umschaltschaltfläche fest .dropdown-menu – Legen Sie das ul-Element als Dropdown-Menü fest .dropdown-menu-right – Richtet das Menü nach rechts aus;
.pull-right – Richtet das übergeordnete Element der Menükomponente rechts aus; .dropdown-header – Fügen Sie dem Menüpunkt einen Titel hinzu; .divider – Trennlinien für Menüelemente hinzufügen; .disabled – Deaktivieren Sie den entsprechenden Menüpunkt
Der Implementierungscode lautet wie folgt:




Realisierungseffekt: 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width,initial-scale=1"> 
 <title>CSS全局样式_下拉菜单</title> 
 <link rel="stylesheet" href="bootstrap.min.css" type="text/css"> 
 <script src="jquery-1.11.1.min.js"></script> 
 <script src="bootstrap.min.js"></script> 
</head> 
<body> 
<div class="container"> 
 <div class="dropdown pull-right"> 
 <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
 下拉菜单 
 <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1"> 
 <li role="presentation" class="dropdown-header">中超Big4</li> 
 <li><a href="#" role="menuitem">上海上港</a></li> 
 <li><a href="#" role="menuitem">广州恒大</a></li> 
 <li><a href="#" role="menuitem">山东鲁能</a></li> 
 <li class="disabled"><a href="#" role="menuitem">北京国安</a></li> 
 <li role="presentation" class="divider"></li> 
 <li role="presentation" class="dropdown-header">中超5-8</li> 
 <li><a href="#" role="menuitem">上海申花</a></li> 
 <li><a href="#" role="menuitem">江苏舜天</a></li> 
 <li><a href="#" role="menuitem">长春亚泰</a></li> 
 <li><a href="#" role="menuitem">河南建业</a></li> 
 </ul> 
 </div> 
</div> 
 
</body> 
</html>
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass es für alle hilfreich ist, Bootstrap-Komponenten zum Erstellen von Dropdown-Menüs zu verwenden.
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Javascript Canvas implementiert Rubbellos-Lotterie-Effekt_Javascript-FähigkeitenNächster Artikel：Javascript Canvas implementiert Rubbellos-Lotterie-Effekt_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen