Button-Gruppen
Bootstrap ermöglicht Ihnen die Gruppe eine Reihe von Schaltflächen zusammen (in einer einzigen Zeile) in einer Feldgruppe:
Verwenden Sie ein <div> Element mit Klasse .btn-group eine Schaltfläche Gruppe zu erstellen:
Beispiel
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div> Versuch es selber " Tipp: Statt Knopfgrößen für jede Taste in einer Gruppe von Anwendung verwenden Klasse .btn-group-* Größe alle Tasten in der Gruppe:
Beispiel
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div> Versuch es selber " Vertikale Knopfgruppen
Bootstrap auch die vertikale Tastengruppen:
Verwenden Sie die Klasse .btn-group-vertical eine vertikale Tastengruppe zu erstellen:
Beispiel
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div> Versuch es selber " Justified Button-Gruppen
Um die gesamte Breite des Bildschirms erstrecken, verwenden Sie die .btn-group-justified Klasse:
Beispiel mit <a> Elementen:
Beispiel
<div class="btn-group
btn-group-justified">
<a
href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div> Versuch es selber " Hinweis: Für die <button> Elemente, müssen Sie jede Taste in einer wickeln .btn-group Klasse:
Beispiel
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn
btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div> Versuch es selber " Nesting-Knopf Gruppen & Dropdown-Menüs
Nest Schaltfläche Gruppen Dropdown-Menüs zu erstellen:
Beispiel
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div
class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony <span class="caret"></span></button>
<ul
class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div> Versuch es selber " Split-Taste Auswahlmenüs
Beispiel
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div> Versuch es selber " Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 »