Knop groep

Groepeer een reeks knoppen op één regel met de knopgroep en maak ze superkrachtig met JavaScript.

Basis voorbeeld

Wikkel een reeks knopen in met .btnin .btn-group. Voeg optioneel JavaScript-radio en checkbox-stijlgedrag toe met onze plug-in voor knoppen .

<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>

Zorg voor correct `role`en geef een label op

Om ervoor te zorgen dat ondersteunende technologieën (zoals schermlezers) aangeven dat een reeks knoppen is gegroepeerd, moet een geschikt roleattribuut worden opgegeven. Voor knopgroepen is dit role="group", terwijl werkbalken een role="toolbar".

Daarnaast moeten groepen en werkbalken een expliciet label krijgen, omdat de meeste ondersteunende technologieën ze anders niet zullen aankondigen, ondanks de aanwezigheid van het juiste rolattribuut. In de voorbeelden die hier worden gegeven, gebruiken we aria-label, maar alternatieven zoals die aria-labelledbykunnen ook worden gebruikt.

Combineer sets met knopgroepen in knopwerkbalken voor complexere componenten. Gebruik zo nodig hulpprogramma-klassen om groepen, knoppen en meer uit elkaar te halen.

<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>

Voel je vrij om inputgroepen te mixen met knopgroepen in je werkbalken. Net als in het bovenstaande voorbeeld, heb je waarschijnlijk enkele hulpprogramma's nodig om dingen op de juiste manier te plaatsen.

<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>

Maatvoering

In plaats van klassen voor knopgrootte toe te passen op elke knop in een groep, voegt u gewoon toe .btn-group-*aan elke .btn-group, inclusief elke wanneer u meerdere groepen nest.

<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>

Nesten

Plaats een .btn-groupin een andere .btn-groupwanneer u vervolgkeuzemenu's wilt vermengen met een reeks knoppen.

<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 id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

Verticale variatie

Laat een set knoppen verticaal gestapeld lijken in plaats van horizontaal. Dropdownmenu's met gesplitste knoppen worden hier niet ondersteund.

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