Bootstrap 4 Schaltflächengruppen
Schaltflächengruppen
Mit Bootstrap 4 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-lgfür eine große Schaltflächengruppe oder die .btn-group-smfür eine kleine Schaltflächengruppe:
Große Tasten:
Standardschaltflächen:
Kleine Knöpfe:
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 4 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>
Schaltflächengruppen und Dropdown-Menüs verschachteln
Verschachteln Sie Schaltflächengruppen, um Dropdown-Menüs zu erstellen (mehr über Dropdowns erfahren Sie in einem späteren Kapitel):
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
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</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
dropdown-toggle-split"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
Vertikale Schaltflächengruppe mit Dropdown
Beispiel
<div class="btn-group-vertical">
<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
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Schaltflächengruppen nebeneinander
Schaltflächengruppen sind standardmäßig "inline", wodurch sie nebeneinander angezeigt werden, wenn Sie mehrere Gruppen haben:
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>
<div class="btn-group">
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</button>
</div>