Schaltflächengruppe

Gruppieren Sie eine Reihe von Schaltflächen in einer einzelnen Zeile oder stapeln Sie sie in einer vertikalen Spalte.

Auf dieser Seite

Einfaches Beispiel

Umschließen Sie eine Reihe von Schaltflächen mit .btnin .btn-group.

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Stellen Sie sicher, dass es richtig ist `role`, und geben Sie ein Etikett an

Damit unterstützende Technologien (z. B. Screenreader) vermitteln können, dass eine Reihe von Schaltflächen gruppiert sind, muss ein entsprechendes roleAttribut bereitgestellt werden. Für Schaltflächengruppen wäre dies role="group", während Symbolleisten ein role="toolbar".

Außerdem sollten Gruppen und Toolbars mit einem expliziten Label versehen werden, da die meisten Hilfstechnologien sie sonst nicht ankündigen, obwohl das richtige Rollenattribut vorhanden ist. In den hier bereitgestellten Beispielen verwenden wir aria-label, aber es können auch Alternativen wie aria-labelledbyverwendet werden.

Alternativ zu den .navNavigationskomponenten können diese Klassen auch zu Linkgruppen hinzugefügt werden .

Aktiver Link Verknüpfung Verknüpfung

<div class="btn-group">
  <a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
  <a href="#" class="btn btn-primary">Link</a>
  <a href="#" class="btn btn-primary">Link</a>
</div>

Gemischte Stile

<div class="btn-group" role="group" aria-label="Basic mixed styles example">
  <button type="button" class="btn btn-danger">Left</button>
  <button type="button" class="btn btn-warning">Middle</button>
  <button type="button" class="btn btn-success">Right</button>
</div>

Umrissene Stile

<div class="btn-group" role="group" aria-label="Basic outlined example">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>

Checkbox- und Radiobutton-Gruppen

Kombinieren Sie schaltflächenähnliche Kontrollkästchen und Optionsschaltflächen zu einer nahtlos aussehenden Schaltflächengruppe.

Kontrollkästchen 1 Kontrollkästchen 2 Kontrollkästchen 3

<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

  <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>

Radio 1 Radio 2 Radio 3

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

Kombinieren Sie Sätze von Schaltflächengruppen zu Schaltflächensymbolleisten für komplexere Komponenten. Verwenden Sie nach Bedarf Hilfsklassen, um Gruppen, Schaltflächen und mehr zu verteilen.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group me-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-info">8</button>
  </div>
</div>

Fühlen Sie sich frei, Eingabegruppen mit Schaltflächengruppen in Ihren Symbolleisten zu mischen. Ähnlich wie im obigen Beispiel benötigen Sie jedoch wahrscheinlich einige Dienstprogramme, um die Dinge richtig zu platzieren.

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon">@</div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
  </div>
</div>

<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon2">@</div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
  </div>
</div>

Dimensionierung

Anstatt Schaltflächengrößenklassen auf jede Schaltfläche in einer Gruppe anzuwenden, fügen Sie einfach .btn-group-*zu jeder hinzu .btn-group, einschließlich jeder einzelnen, wenn Sie mehrere Gruppen verschachteln.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>

Verschachtelung

Platzieren Sie eines .btn-groupin einem anderen .btn-group, wenn Sie Dropdown-Menüs gemischt mit einer Reihe von Schaltflächen haben möchten.

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Vertikale Variation

Lassen Sie eine Reihe von Schaltflächen vertikal statt horizontal gestapelt erscheinen. Geteilte Schaltflächen-Dropdowns werden hier nicht unterstützt.