Trɔ yi nya veviwo gbɔ Trɔ yi docs ƒe mɔfiamewo dzi
Check
in English

Button ƒe ƒuƒoƒo

Ƒo abɔta siwo kplɔ wo nɔewo ɖo nu ƒu ɖe fli ɖeka dzi alo nàƒo wo nu ƒu ɖe sɔti si le tsitrenu dzi.

Le axa sia dzi

Kpɔɖeŋu vevi aɖe

Kpe abɔta siwo kplɔ wo nɔewo ɖo kple .btnin .btn-group.

html 
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>
Kpɔ egbɔ be esɔ roleeye 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ã.

Woateŋu atsɔ klass siawo hã akpe ɖe kadodowo ƒe ƒuƒoƒowo ŋu, abe mɔnu bubu si woatsɔ aɖɔli .navmɔfiame ƒe akpawo ene .

Kadodo si le dɔ wɔm Kadodo Kadodo
html 
<div class="btn-group">
  <a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
  <a href="#" class="btn btn-primary">Link</a>
  <a href="#" class="btn btn-primary">Link</a>
</div>

Atsyã siwo wotsaka

html 
<div class="btn-group" role="group" aria-label="Basic mixed styles example">
  <button type="button" class="btn btn-danger">Left</button>
  <button type="button" class="btn btn-warning">Middle</button>
  <button type="button" class="btn btn-success">Right</button>
</div>

Atsyã siwo ŋu woƒo nu tsoe

html 
<div class="btn-group" role="group" aria-label="Basic outlined example">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>

Dzesiɖaka kple radio ƒe abɔta ƒe ƒuƒoƒowo

Tsɔ dzesideɖaka si le abe abɔta ene kple radio ƒe tɔtrɔ ƒe abɔtawo ƒo ƒu ɖe abɔta ƒe ƒuƒoƒo si me dzedzeme mele o me.

html 
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

  <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>
html 
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

Dɔwɔnu ƒe akpa si le abɔta

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

html 
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group me-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-info">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ã.

html 
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon">@</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-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon2">@</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.



html 
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
  <button type="button" class="btn btn-outline-dark">Left</button>
  <button type="button" class="btn btn-outline-dark">Middle</button>
  <button type="button" class="btn btn-outline-dark">Right</button>
</div>
<br>
<div class="btn-group" role="group" aria-label="Default button group">
  <button type="button" class="btn btn-outline-dark">Left</button>
  <button type="button" class="btn btn-outline-dark">Middle</button>
  <button type="button" class="btn btn-outline-dark">Right</button>
</div>
<br>
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
  <button type="button" class="btn btn-outline-dark">Left</button>
  <button type="button" class="btn btn-outline-dark">Middle</button>
  <button type="button" class="btn btn-outline-dark">Right</button>
</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.

html 
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>

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

html 
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-dark">Button</button>
  <button type="button" class="btn btn-dark">Button</button>
  <button type="button" class="btn btn-dark">Button</button>
  <button type="button" class="btn btn-dark">Button</button>
  <button type="button" class="btn btn-dark">Button</button>
  <button type="button" class="btn btn-dark">Button</button>
</div>
html 
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary">Button</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary">Button</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>
html 
<div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked>
  <label class="btn btn-outline-danger" for="vbtn-radio1">Radio 1</label>
  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
  <label class="btn btn-outline-danger" for="vbtn-radio2">Radio 2</label>
  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
  <label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
</div>