Bootstrap-Dropdowns

Das Dropdown-Menü wird manchmal auch als Pull-Down-Menü oder Dropdown-Liste bezeichnet und erscheint, wenn auf eine Schaltfläche oder eine Textauswahl geklickt wird, sodass der Benutzer einen einzelnen Wert auswählen kann. A runterfallen Die 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

In diesem Tutorial wird erklärt, wie Sie das implementieren Bootstrap-Dropdown Menü mit der Bootstrap-Framework. Wie wir uns die vorherigen Bootstrap-Tutorials angesehen haben, bietet Bootstrap gute Ergebnisse CSS Attraktivität für alle Komponenten.

Um das Dropdown-Menü zu verwenden, stellt Bootstrap eine Klasse bereit .runterfallen die das folgende grundlegende Dropdown-Menübeispiel veranschaulichen:

<!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="#"   data-toggle="dropdown">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>
</li>
</ul>
</body>
</html>

Wie im obigen Skript gezeigt, schließen wir das Dropdown-Menü einfach in die .dropdown-Klasse ein. Mithilfe des Dropdown-Plug-Ins haben wir ein Dropdown-Menü mithilfe der Basisklassennavigation erstellt Navigationspillen. Das Ankerelement verwendet die Dropdown-Toggle-Klasse und das Data-Toggle-Attribut, das die Optionen anzeigt, wenn der Benutzer das Dropdown-Feld aktiviert.

  • Führen Sie die Bootstrap Basic Dropdown List-Demo aus

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

Bootstrap-Dropdown-Ausrichtungsoptionen

Standardmäßig wird das Dropdown-Menü auf der linken Seite seines übergeordneten Menüs positioniert. Wenn wir die Dropdown-Liste auf der rechten Seite positionieren möchten, können wir dies nutzen .dropdown-menu-rechts Klasse. 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="#"   data-toggle="dropdown" id="mydropdown">Country List<span  ></span></a>
   <ul   area-labelledby="mydropdown">
	<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>
</li>
</ul>
</body>
</html>
  • Führen Sie Bootstrap aus Demo der Ausrichtungsoptionen

Beispiel für Bootstrap-Ausrichtungsoptionen

Bootstrap-Dropdown-Header

Wir können Kopfzeilen zu einer bestimmten Option oder mehreren Optionen im Dropdown-Menü hinzufügen, indem wir die verwenden .dropdown-header. 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>Headers in Dropdown Menu</h2>
<div  >
<button type="button"   data-toggle="dropdown">Country List<span  ></span></button>
   <ul  >
	<li  >Countries_List1</li>
	<li><a href="#">India</a></li>
	<li><a href="#">Australia</a></li>
	<li><a href="#">Srilanka</a></li>
	<li  ></li>
	<li  >Countries_List2</li>
	<li><a href="#">South Africa</a></li>
	<li><a href="#">New Zealand</a></li>
   </ul>
</div>
</div>
</body>
</html>

Wie im Skript gezeigt, haben wir verwendet .dropdown-header innerhalb Dropdown-Menü Klasse. Der Dropdown-Header enthält eine bestimmte Überschrift für die Liste der Optionen im Dropdown-Menü und die Klasse Teiler wird verwendet, um zwischen der Liste der Optionen im Dropdown-Menü zu unterteilen.

  • Führen Sie Bootstrap aus Header-Demo

Beispiel für Bootstrap-Header

lesen Sie auch:

  • Bootstrap-Setup
  • Bootstrap-Typografie

Kommentar verfassen

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

Nach oben scrollen