Groupe ya ba boutons

Sangisa molɔngɔ́ ya ba boutons esika moko na molɔngɔ moko to tyá yango na molɔngɔ oyo ezali semba.

Na lokasa oyo

Ndakisa ya moboko

Envelopper série ya ba boutons na .btnin .btn-group.

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

Salá ete ezali malamu `role`mpe pesa elembo

Mpo ete mayele ya kosalisa (na ndakisa batángi ya écran) emonisa ete molɔngɔ ya ba boutons esangisi, esengeli rolekopesa ezaleli oyo ebongi. Mpo na bituluku ya ba boutons, oyo ekozala role="group", nzokande ba barres ya bisaleli esengeli kozala na role="toolbar".

En plus, esengeli kopesa ba groupes na ba barres d’outils étiquette ya polele, lokola mingi ya ba technologies d’assistance ekosakola yango te, malgré présence ya attribut ya rôle correct. Na bandakisa oyo epesami awa, tosalelaka aria-label, kasi banzela mosusu lokola aria-labelledbyekoki mpe kosalelama.

Ba classes oyo ekoki pe kobakisama na ba groupes ya ba liens, comme alternative na ba .navcomposants ya navigation .

Lien actif Lien Lien

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

Mitindo ya kosangisa

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

Ba styles oyo elakisami

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

Boîte de coche na ba groupes ya bouton ya radio

Sangisa esika ya kotiya elembo oyo ezali lokola bouton mpe ba boutons ya kobalusa radio na etuluku ya ba boutons oyo ezali komonana malamu te.

Encadré ya kotiya elembo 1 Esika ya kotya elembo 2 Encadré ya kotiya elembo 3

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

Radio ya 1 Radio ya 2 Radio ya 3

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

Sangisa ba ensembles ya ba groupes ya ba boutons na ba barres d'outils ya ba boutons pona ba composants complexes mingi. Salelá bakelasi ya utilité soki esengeli mpo na kopesa esika na bituluku, ba boutons, mpe makambo mosusu.

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

Bozala na bonsomi ya kosangisa bituluku ya bokoti na bituluku ya bouton na ba barres ya bisaleli na bino. Ndenge moko na ndakisa oyo ezali likolo, okozala mbala mosusu na mposa ya mwa ba utilitaires atako mpo na esika makambo malamu.

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

Kosala bonene ya biloko

Na esika ya kosalela bakelasi ya bonene ya bouton na bouton nyonso na kati ya etuluku, bakisa kaka .btn-group-*na moko na moko .btn-group, bakisa mpe moko na moko ntango ozali kosala yango na bituluku mingi.

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

Kosala zumbu

Tia moko na .btn-groupkati ya mosusu .btn-groupntango olingi ba menu oyo ezali kokita esangana na molɔngɔ ya ba boutons.

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

Bokeseni ya semba

Salá ete ensemble ya ba boutons emonana ebelemi na verticale na esika ya kozala horizontalement. Ba déroulants ya bouton ya kokabola esimbami awa te.