Schaltflächengruppe

Gruppieren Sie mit der Schaltflächengruppe eine Reihe von Schaltflächen in einer einzigen Zeile und verstärken Sie sie mit JavaScript.

Einfaches Beispiel

Umschließen Sie eine Reihe von Schaltflächen mit .btnin .btn-group. Fügen Sie mit unserem Schaltflächen-Plug-in ein optionales JavaScript-Radio- und Checkbox-Stilverhalten hinzu .

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">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.

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 mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-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-secondary">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 mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon">@</div>
    </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-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon2">@</div>
    </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-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </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.

<div class="btn-group-vertical">
  ...
</div>