Bootstrap 4 Button-Gruppen
Bootstrap 4 ermöglicht es uns, Buttons in derselben Zeile zu platzieren.
Sie können<div>zu einem Element hinzufügen.btn-groupdie Klasse, um eine Button-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>
Selbst ausprobieren »
Tipp:Wir können.btn-group-lg|smdie Klasse verwenden, um die Größe der Button-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>
Selbst ausprobieren »
Vertikale Button-Gruppe
Sie können.btn-group-verticaldie Klasse verwenden, um eine vertikale Button-Gruppe 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>
Selbst ausprobieren »
Verschachtelte Button-Gruppen und Dropdown-Menüs
Wir können ein Dropdown-Menü innerhalb einer Button-Gruppe platzieren:
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>
Selbst ausprobieren »
Split-Button-Dropdown-Menü
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>
Selbst ausprobieren »
Vertikale Button-Gruppen und Dropdown-Menüs
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>
Selbst ausprobieren »
Mehrere Button-Gruppen
Button-Gruppen können nebeneinander in derselben Zeile angezeigt werden:
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>
Selbst ausprobieren »