Gwoup bouton

Gwoup yon seri bouton ansanm sou yon sèl liy ak gwoup bouton an, ak gwo pouvwa yo ak JavaScript.

Egzanp de baz

Vlope yon seri bouton ak .btnnan .btn-group. Ajoute sou opsyon radyo JavaScript ak konpòtman stil kaz ak bouton plugin nou an .

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

Asire w kòrèk `role`epi bay yon etikèt

Nan lòd pou teknoloji asistans (tankou lektè ekran) transmèt ke yon seri de bouton gwoupe, roleyo dwe bay yon atribi apwopriye. Pou gwoup bouton, sa a ta dwe role="group", pandan y ap ba zouti yo ta dwe gen yon role="toolbar".

Anplis de sa, gwoup yo ak ba zouti yo ta dwe bay yon etikèt klè, paske pifò teknoloji asistans pa pral anonse yo, malgre prezans atribi wòl kòrèk la. Nan egzanp yo bay isit la, nou itilize aria-label, men altènativ tankou aria-labelledbyyo ka itilize tou.

Konbine seri gwoup bouton yo nan ba zouti bouton pou eleman ki pi konplèks. Sèvi ak klas sèvis piblik jan sa nesesè pou espas gwoup, bouton, ak plis ankò.

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

Ou lib pou melanje gwoup opinyon ak gwoup bouton nan ba zouti ou yo. Menm jan ak egzanp ki anwo a, ou pral gen anpil chans bezwen kèk sèvis piblik menm si pou espas bagay yo byen.

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

Dimansyon

Olye pou w aplike klas gwosè bouton nan chak bouton nan yon gwoup, jis ajoute .btn-group-*nan chak .btn-group, ki gen ladan yo chak lè nidifikasyon gwoup miltip.

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

Nidifikasyon

Mete yon .btn-groupnan yon lòt .btn-grouplè ou vle meni déroulant melanje ak yon seri de bouton.

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

Varyasyon vètikal

Fè yon seri bouton parèt vètikal anpile olye ke orizontal. Men dewoulman bouton divize yo pa sipòte isit la.

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