Bootstrap -Schaltflächengruppen
Schaltflächengruppen
Mit Bootstrap können Sie eine Reihe von Schaltflächen (in einer einzelnen Zeile) in einer Schaltflächengruppe zusammenfassen:
Verwenden Sie ein <div>Element mit Klasse .btn-group, um eine Schaltflächengruppe 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>
Tipp: Anstatt Schaltflächengrößen auf jede Schaltfläche in einer Gruppe anzuwenden, verwenden Sie die Klasse .btn-group-lg|sm|xs, um die Größe aller Schaltflächen in der Gruppe festzulegen:
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>
Vertikale Schaltflächengruppen
Bootstrap unterstützt auch vertikale Schaltflächengruppen:
Verwenden Sie die Klasse .btn-group-vertical, um eine vertikale Schaltflächengruppe 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>
Ausgerichtete Schaltflächengruppen
Verwenden Sie die Klasse, um die gesamte Breite des Bildschirms .btn-group-justified
abzudecken:
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>
Hinweis: Bei <button>Elementen müssen Sie jede Schaltfläche in eine .btn-groupKlasse einschließen:
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>
Schaltflächengruppen und Dropdown-Menüs verschachteln
Schaltflächengruppen verschachteln, um 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>
Geteilte Schaltflächen-Dropdowns
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>