Button ƒe ƒuƒoƒo

Ƒo abɔta siwo kplɔ wo nɔewo ɖo ɖe fli ɖeka dzi kple abɔta ƒe ƒuƒoƒoa, eye nàtsɔ JavaScript ana ŋusẽ gã aɖe wo.

Kpɔɖeŋu vevi aɖe

Kpe abɔta siwo kplɔ wo nɔewo ɖo kple .btnin .btn-group. Tsɔ JavaScript radio kple aɖaka ƒe atsyã ƒe nuwɔna si nètia la kpe ɖe eŋu kple míaƒe abɔtawo ƒe kpeɖeŋutɔ .

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

Kpɔ egbɔ be esɔ `role`eye nàna dzesidenu

Be mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu (abe screen reader ene) naɖee afia be woƒo abɔta siwo kplɔ wo nɔewo ɖo nu ƒu la, roleele be woana nɔnɔme si sɔ. Le abɔta ƒuƒoƒowo gome la, esia anye role="group", esime ele be dɔwɔnu ƒe ƒuƒoƒowo nakpɔ role="toolbar".

Tsɔ kpe ɖe eŋu la, ele be woana dzeside si me kɔ ƒã ƒuƒoƒowo kple dɔwɔnuwo ƒe ƒuƒoƒowo, elabena ne menye nenema o la, kpekpeɖeŋunamɔ̃ akpa gãtɔ maɖe gbeƒã wo o, togbɔ be akpa si wowɔ ƒe nɔnɔme nyuitɔ le afima hã. Le kpɔɖeŋu siwo wona le afisia me la, míezãa aria-label, gake woate ŋu azã mɔnu bubuwo abe alesi aria-labelledbywoate ŋu azãe ene hã.

Ƒo abɔta ƒe ƒuƒoƒowo ƒe hatsotsowo nu ƒu ɖe abɔta ƒe dɔwɔnuwo me hena akpa siwo sesẽ wu. Zã dɔwɔnu ƒe klasswo alesi wòhiãe nàtsɔ ade vovototo ƒuƒoƒowo, abɔtawo, kple bubuwo dome.

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

Miate ŋu atsaka nyawo tsɔtsɔ de eme ƒe ƒuƒoƒowo kple abɔta ƒe ƒuƒoƒowo faa le wò dɔwɔnuwo me. Abe kpɔɖeŋu si le etame ene la, anɔ eme be àhiã dɔwɔnu aɖewo togbɔ be nàte ŋu aɖo nuwo dome nyuie hã.

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

Sizing ƒe lolome

Le esi teƒe be nàwɔ abɔta ƒe lolome ƒe klasswo ŋudɔ ɖe abɔta ɖesiaɖe ŋu le ƒuƒoƒo aɖe me la, ɖeko nàtsɔe akpe .btn-group-*ɖe ɖesiaɖe ŋu .btn-group, ɖesiaɖe hã le eme ne èle ƒuƒoƒo geɖe ƒom.

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

Atɔwɔwɔ

Da a .btn-groupɖe bubu me .btn-groupne èdi be woatsɔ nu siwo le tsia dzi la tsaka kple abɔta siwo kplɔ wo nɔewo ɖo.

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

Tɔtrɔ le tsitrenu

Na abɔtawo ƒe hatsotso aɖe nadze le tsia dzi tsɔ wu be woanɔ tsia dzi. Womedoa alɔ split button ƒe ʋuʋudediwo le afisia o.

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