Butongrupo

Grupu serion da butonoj kune sur unu linio kun la butongrupo, kaj superfortigu ilin per JavaScript.

Baza ekzemplo

Envolvu serion da butonoj per .btnen .btn-group. Aldonu laŭvolan JavaScript-radion kaj markobuton-stilan konduton per nia butonaldonaĵo .

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

Certigu ĝustan `role`kaj donu etikedon

Por ke helpaj teknologioj (kiel ekranlegiloj) peri ke serio de butonoj estas grupigitaj, taŭga roleatributo devas esti disponigita. Por butongrupoj, ĉi tio estus role="group", dum ilobretoj devus havi role="toolbar".

Krome, grupoj kaj ilobretoj devus ricevi eksplicitan etikedon, ĉar la plej multaj helpaj teknologioj alie ne anoncos ilin, malgraŭ la ĉeesto de la ĝusta rola atributo. En la ekzemploj provizitaj ĉi tie, ni uzas aria-label, sed alternativoj kiel ekzemple aria-labelledbyankaŭ povas esti uzataj.

Kombinu arojn de butongrupoj en butonajn ilbretojn por pli kompleksaj komponantoj. Uzu utilajn klasojn laŭbezone por malspacigi grupojn, butonojn kaj pli.

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

Bonvolu miksi eniggrupojn kun butongrupoj en viaj ilbretoj. Simile al la ĉi-supra ekzemplo, vi verŝajne bezonos iujn ilojn por ĝuste spacigi aferojn.

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

Dimensio

Anstataŭ apliki klasojn pri grandeco de butonoj al ĉiu butono en grupo, simple aldonu .btn-group-*al ĉiu .btn-group, inkluzive de ĉiu kiam nestas plurajn grupojn.

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

Nestumado

Metu a .btn-groupen alian .btn-groupkiam vi volas falmenuojn miksitajn kun serio de butonoj.

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

Vertikala variado

Faru aron da butonoj aperi vertikale stakitaj prefere ol horizontale. Dividaj butonfalumoj ne estas subtenataj ĉi tie.

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