Dropdown-Menüs der Bootstrap-Schaltfläche

In diesem Tutorial wird das Hinzufügen eines Dropdown-Menüs zu Schaltflächen im Bootstrap erläutert. Wir können ein Dropdown-Menü mit verschiedenen Arten von Schaltflächen erstellen, indem wir einfach verwenden .btn-Gruppe im Dropdown-Menü. Das folgende Beispiel zeigt, wie man Dropdown-Menüs zu Schaltflächen hinzufügt.

lesen Sie auch:

  • Bootstrap-Setup
  • Bootstrap-CSS
  • Einführung in die Stiftung
  • HTML5-Tutorials
<!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>Dropdown Menu with different buttons</h2>
<div  >
<button type="button"   data-toggle="dropdown">Country List<span  ></span></button>
   <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>
<div  >
<button type="button"   data-toggle="dropdown">Country List<span  ></span></button>
   <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>
<div  >
<button type="button"   data-toggle="dropdown">Country List<span  ></span></button>
   <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>
<div  >
<button type="button"   data-toggle="dropdown">Country List<span  ></span></button>
   <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>
<div  >
<button type="button"   data-toggle="dropdown">Country List<span  ></span></button>
   <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>
</div>
</body>
</html>
  • Führen Sie die Bootstrap-Dropdown-Buttons-Demo aus

Beispiel für Bootstrap-Dropdown-Schaltflächen

Bootstrap-Splitting-Dropdown-Menüschaltflächen

Es ist auch möglich, Dropdown-Listen zu geteilten Schaltflächen hinzuzufügen. Das folgende Beispiel zeigt, wie Dropdown-Schaltflächen mit einigen Markup-Änderungen geteilt werden:

<!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>Splitting Dropdown Menu Buttons</h2>
<div  >
<button  >Country List</button>
<button type="button"   data-toggle="dropdown"><span  ></span></button>
   <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>
<div  >
<button  >Country List</button>
<button type="button"   data-toggle="dropdown"><span  ></span></button>
   <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>
<div  >
<button  >Country List</button>
<button type="button"   data-toggle="dropdown"><span  ></span></button>
   <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>
<div  >
<button  >Country List</button>
<button type="button"   data-toggle="dropdown"><span  ></span></button>
   <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>
<div  >
<button  >Country List</button>
<button type="button"   data-toggle="dropdown"><span  ></span></button>
   <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>
<div  >
<button  >Country List</button>
<button type="button"   data-toggle="dropdown"><span  ></span></button>
   <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>
</div>
</body>
</html>
  • Führen Sie Bootstrap aus Demo zur geteilten Dropdown-Schaltfläche

Beispiel für eine Bootstrap-Splitting-Dropdown-Schaltfläche

Dropdown-Schaltfläche „Bootstrap-Größe“.

Wir können Dropdown-Schaltflächen mit beliebigen Größen erstellen, z. B. größer, kleiner und besonders klein, indem wir verwenden .btn-lg, .btn-sm Und .btn-xs Klassen.

<!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>Sizing Dropdown Menu Buttons</h2>
<div  >
<button type="button"   data-toggle="dropdown">Country List<span  ></span></button>
   <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>
<div  >
<button type="button"   data-toggle="dropdown">Country List<span  ></span></button>
   <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>
<div  >
<button type="button"   data-toggle="dropdown">Country List<span  ></span></button>
   <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>
</div>
</body>
</html>
  • Führen Sie Bootstrap aus Demo zur Größenanpassung der Dropdown-Schaltfläche

Beispiel für Dropdown-Schaltflächen zur Bootstrap-Größenanpassung

Bootstrap-Dropdown-Variante

Es ist möglich, das Dropdown-Menü nach oben statt nach unten zu verschieben. Wir können die Optionsliste durch Hinzufügen erweitern .dropup Klasse an die Eltern .btn-Gruppe Container. 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   style="margin-top:150px">
<div  >
<button type="button"   data-toggle="dropdown">Country List<span  ></span></button>
   <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>
<div  >
<button type="button"   data-toggle="dropdown">Country List<span  ></span></button>
   <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>
</div>
</body>
</html>
  • Führen Sie Bootstrap aus Dropdown-Variationsdemo

Beispiel für eine Bootstrap-Dropdown-Variation

Kommentar verfassen

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

Nach oben scrollen