Bootstrap-Schaltflächengruppen

Bootstrap Bietet die Möglichkeit, mithilfe der Bootstrap-Klasse eine Reihe von Schaltflächen in einer einzelnen Zeile zu gruppieren .btn-Gruppe. Wir verwenden diese Klasse einfach innerhalb des div-Elements und wenden die Klasse an .btn-Gruppe darauf. Es verwaltet den ausgewählten oder nicht ausgewählten Status für eine Reihe von Schaltflächen. In diesem Tutorial wird die Verwendung erklärt Schaltflächengruppen im Bootstrap.

lesen Sie auch:

  • Bootstrap-Setup
  • Bootstrap-CSS
  • Einführung in das Foundation Framework
  • Bootstrap vs. Foundation
<!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>Buttons Group</h2>
<div  >
	<button type="button"  >One</button>
	<button type="button"  >Two</button>
	<button type="button"  >Three</button>
	<button type="button"  >Four</button>
	<button type="button"  >Five</button>
</div>
<h2>Buttons Checkbox</h2>
<div   data-toggle="buttons-checkbox">
	<button type="button"  >Checkbox One</button>
	<button type="button"  >Checkbox Two</button>
	<button type="button"  >Checkbox Three</button>
	<button type="button"  >Checkbox Four</button>
	<button type="button"  >Checkbox Five</button>
</div>
<h2>Buttons Radio</h2>
<div   data-toggle="buttons">
	<button  >
	<input type="radio" name="options">Option One</button>
	<button  >
	<input type="radio" name="options">Option Two</button>
	<button  >
	<input type="radio" name="options">Option Three</button>
</div>
</div>
</body>
</html>

Das obige Skript definiert verschiedene Arten von Schaltflächen in einer Gruppe, einer Schaltflächen-Kontrollkästchengruppe und einer Schaltflächen-Optionsgruppe auf der Webseite. Alle Schaltflächentypen müssen unter der Klasse definiert werden .btn-Gruppe. Sie können das obige Beispiel über den folgenden Link ausführen:

  • Führen Sie die Bootstrap Button Group-Demo aus

Beispiel für eine Bootstrap-Schaltflächengruppe

Symbolleiste der Bootstrap-Schaltfläche

Wir können Schaltflächengruppen wie eine Schaltflächensymbolleiste zusammenstellen. Verwenden .btn-Gruppe Klasse innerhalb .btn-Symbolleiste Klasse für komplexe Komponenten. Wir verwenden diese Klasse einfach innerhalb des div-Elements und wenden die Klasse an .btn-Symbolleiste darauf. 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>Buttons Toolbar</h2>
<div  >
<div  >
	<button type="button"  >One</button>
	<button type="button"  >Two</button>
	<button type="button"  >Three</button>
	<button type="button"  >Four</button>
	<button type="button"  >Five</button>
</div>
<div  >
	<button type="button"  >One</button>
	<button type="button"  >Two</button>
	<button type="button"  >Three</button>
</div>
<div  >
	<button type="button"  >One</button>
	<button type="button"  >Two</button>
</div>
</div>
</div>
</body>
</html>
  • Führen Sie Bootstrap aus Demo der Schaltflächen-Symbolleiste

Beispiel für die Symbolleiste der Bootstrap-Schaltfläche

Bootstrap-Verschachtelung von Schaltflächengruppen

Wir können eine Schaltflächengruppe innerhalb einer anderen Schaltflächengruppe verschachteln, also eine verschachteln .btn-Gruppe innerhalb eines anderen .btn-Gruppe. Diese Klasse kann innerhalb des div-Elements verwendet werden. 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>Nesting of Button Groups</h2>
<div  >
	<button type="button"  >One</button>
	<button type="button"  >Two</button>
	<button type="button"  >Three</button>
<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>
</div>
</body>
</html>
  • Führen Sie Bootstrap aus Demo zu verschachtelten Schaltflächengruppen

Beispiel für Bootstrap-Verschachtelungsschaltflächengruppen

Vertikale Bootstrap-Schaltflächengruppe

Der Bootstrap bietet die Möglichkeit, Schaltflächengruppen mithilfe von vertikal statt horizontal anzuzeigen .btn-group-vertikal Klasse. Wenn wir jedoch mit Dropdowns arbeiten, können wir Dropdown-Schaltflächen nicht vertikal teilen. 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>Vertical Button Groups</h2>
<div  >
	<button type="button"  >One</button>
	<button type="button"  >Two</button>
	<button type="button"  >Three</button>
<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>
</div>
</body>
</html>
  • Führen Sie Bootstrap aus Demo der vertikalen Tastengruppe

Beispiel für vertikale Bootstrap-Schaltflächengruppen

Kommentar verfassen

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

Nach oben scrollen