Knoppie groep

Groepeer 'n reeks knoppies saam op 'n enkele lyn met die knoppiegroep, en versterk hulle met JavaScript.

Basiese voorbeeld

Draai 'n reeks knoppies toe met .btnin .btn-group. Voeg opsionele JavaScript-radio- en merkblokkie-stylgedrag by met ons knoppies-inprop .

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

Verseker korrek `role`en verskaf 'n etiket

Ten einde hulptegnologieë (soos skermlesers) oor te dra dat 'n reeks knoppies gegroepeer is, moet 'n toepaslike rolekenmerk verskaf word. Vir knoppiegroepe sal dit wees role="group", terwyl nutsbalke 'n role="toolbar".

Daarbenewens moet groepe en nutsbalke 'n eksplisiete etiket gegee word, aangesien die meeste hulptegnologieë hulle andersins nie sal aankondig nie, ten spyte van die teenwoordigheid van die korrekte rolkenmerk. In die voorbeelde wat hier verskaf word, gebruik ons aria-label, maar alternatiewe soos aria-labelledbykan ook gebruik word.

Kombineer stelle knoppiegroepe in knoppienutsbalke vir meer komplekse komponente. Gebruik nutsklasse soos nodig om groepe, knoppies en meer uit te spasieer.

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

Meng gerus insetgroepe met knoppiegroepe in jou nutsbalke. Soortgelyk aan die voorbeeld hierbo, sal jy waarskynlik 'n paar hulpmiddels nodig hê om dinge behoorlik te spasieer.

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

Grootte

In plaas daarvan om knoppiegrootteklasse op elke knoppie in 'n groep toe te pas, voeg net by .btn-group-*elkeen .btn-group, insluitend elkeen wanneer verskeie groepe nesgemaak word.

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

Nestel

Plaas 'n .btn-groupin 'n ander .btn-groupwanneer jy aftrekkieslys gemeng wil hê met 'n reeks knoppies.

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

Vertikale variasie

Laat 'n stel knoppies vertikaal gestapel vertoon eerder as horisontaal. Verdeelknoppie-aftrekkies word nie hier ondersteun nie.

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