Bootstrap 5-Schaltflächengruppe

Knopfgruppe

Bootstrap 5 ermöglicht es Ihnen, eine Reihe von Knöpfen in einer Knopfgruppe zusammenzuführen (auf einer Zeile):

Verwenden Sie Knopfgruppen mit .btn-group der Klasse <div> Elemente, um Knopfgruppen zu erstellen:

Beispiel

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>

Probieren Sie es selbst aus

Hinweis:Bitte verwenden Sie nicht die Knopfgröße für jeden Knopf in der Gruppe, sondern die Klasse .btn-group-lg Für große Knopfgruppen oder .btn-group-sm Für kleine Knopfgruppen:

Beispiel

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>

Probieren Sie es selbst aus

Vertikale Button-Gruppen

Bootstrap 5 unterstützt auch vertikale Button-Gruppen:

Verwenden Sie die Klasse .btn-group-vertical Erstellen Sie eine vertikale Button-Gruppe:

Beispiel

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>

Probieren Sie es selbst aus

Bereite Button-Gruppen nebeneinander

Standardmäßig sind Button-Gruppen "inline", und bei mehreren Button-Gruppen werden sie nebeneinander angezeigt:

Beispiel

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-primary">Geely</button>
  <button type="button" class="btn btn-primary">Great Wall</button>
  <button type="button" class="btn btn-primary">Chery</button>
</div>

Probieren Sie es selbst aus

Eingebettete Button-Gruppen und Dropdown-Menüs

Eingebettete Button-Gruppen, um Dropdown-Menüs zu erstellen (Sie werden im folgenden Kapitel mehr über Dropdown-Menüs lernen):

Beispiel

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Xiaomi</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Handy</a>
      <a class="dropdown-item" href="#">Tablet</a>
    </div>
  </div>
</div>

Probieren Sie es selbst aus