Bootstrap-Dropdown-Plugin

Das Bootstrap-Dropdown-Menü wird manchmal auch als Pulldown-Menü oder Dropdown-Liste bezeichnet und erscheint, wenn auf eine Schaltfläche oder Textauswahl geklickt wird, sodass der Benutzer einen einzelnen Wert auswählen kann. Eine Dropdown-Liste kann verwendet werden, um eine große Liste von Optionen anzuzeigen, wobei zunächst nur eine Option angezeigt wird. Die übrigen Optionen werden angezeigt, wenn der Benutzer das Dropdown-Feld aktiviert.

lesen Sie auch:

  • Bootstrap-Setup
  • Bootstrap-Typografie

Mit dem Dropdown-Plugin können wir Dropdown-Menüs für beliebige Komponenten wie Navigationsleisten, Registerkarten und Pillen erstellen, wie in den folgenden Beispielen gezeigt:

Dropdown-Menü in der Navigationsleiste

Mit können wir ein Dropdown-Menü für die Navigationsleiste erstellen .navbar Klasse innerhalb des Navigationselements. Das folgende Beispiel zeigt, wie man der Navigationsleiste ein Dropdown-Menü hinzufügt:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Basic Dropdown Menu</h2>
<nav   role="navigation">
   <div  >
      <a href="#"  >Home</a>
   </div>
   <div>
    <ul  >
         <li  ><a href="#">Tutorials</a></li>
         <li><a href="#">Java/J2EE</a></li>
	  <li  >
	  <a href="#"   data-toggle="dropdown">JS Frameworks<span  ></span></a>
	     <ul  >
		 <li><a href="#">DOJO</a></li>
		 <li><a href="#">JavaScript</a></li>
		 <li><a href="#">jQuery</a></li>
		 <li><a href="#">Ajax</a></li>
	     </ul>
	  </li>
   </ul>
</div>
</nav>
</div>
</body>
</html>
  • Führen Sie ein Bootstrap-Navbar-Dropdown-Beispiel aus

Beispiel für ein Bootstrap-Navbar-Dropdown-Menü

Dropdown-Menü in Navpills

Mithilfe der Klasse können wir mit Bootstrap eine pillenbasierte Navigation erstellen .nav-pillen. Das Folgende ist ein Beispiel:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Basic Dropdown Menu</h2>
<ul  >
    <li><a href="#">Home</a></li>
    <li  ><a href="#">Tutorials</a></li>
    <li><a href="#">Java/J2EE</a></li>
    <li  >
    <a href="#"   data-toggle="dropdown">JS Frameworks<span  ></span></a>
    <ul  >
	 <li><a href="#">DOJO</a></li>
	 <li><a href="#">JavaScript</a></li>
	 <li><a href="#">jQuery</a></li>
	 <li><a href="#">Ajax</a></li>
    </ul>
    </li>
</ul>
</body>
</html>
  • Führen Sie das Bootstrap Navpills Dropdown-Beispiel aus

Bootstrap Navpills Dropdown-Beispiel

Bootstrap-Dropdown-Nutzung

Wir können den versteckten Inhalt des Dropdown-Plugins mithilfe von Datenattributen und Java-Skript umschalten.

Über Datenattribute

Wir können ein Dropdown-Menü erstellen, indem wir das Datenattribut verwenden data-toggle=“dropdown“ zum Verlinken oder Klicken, wie im folgenden einfachen Snippet gezeigt:

<div  >
<a href="#"   data-toggle="dropdown">Dropdown Trigger</a>
<ul  brush: xml; title: ; notranslate" title="">
$(".dropdown-toggle").dropdown();

Das Folgende ist ein Beispiel:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $(".dropdown-toggle").dropdown();
});
</script>
</head>
<body>
<div  >
<h2>Basic Dropdown Menu</h2>
	<div  >
	<a href="#"  >Country List<span  ></span></a>
	<ul  >
	 <li><a href="#">India</a></li>
	 <li><a href="#">Australia</a></li>
	 <li><a href="#">Srilanka</a></li>
	 <li><a href="#">South Africa</a></li>
	 <li><a href="#">New Zealand</a></li>
	</ul>
	</div>
</body>
</html>
  • Führen Sie Bootstrap Dropdown mithilfe eines JavaScript-Beispiels aus

Bootstrap-Dropdown mit JavaScript-Beispiel

Bootstrap-Dropdown-Ereignisse

Die folgende Tabelle zeigt vier Dropdown-Ereignisse, die basierend auf dem Verhalten des Dropdown-Menüs verwendet werden. Alle diese Ereignisse werden innerhalb der verwendet .Dropdown-Menüist das übergeordnete Element.

Beschreibung des Ereignistyps

show.bs.dropdownEs wird verwendet, wenn die Methode „Show-Instanz“ aufgerufen wird.
angezeigt.bs.dropdownEs wird ausgelöst, wenn das Dropdown-Menü für den Benutzer sichtbar gemacht wurde.
hide.bs.dropdownEs wird verwendet, wenn die Methode zum Ausblenden von Instanzen aufgerufen wurde.
verstecktes.bs.dropdownEs wird ausgelöst, wenn das Dropdown-Menü für den Benutzer verborgen ist.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen