Groupe ya ba boutons

Sangisa molongo ya ba boutons esika moko na ligne moko na groupe ya ba boutons, mpe super-power yango na JavaScript.

Ndakisa ya moboko

Envelopper série ya ba boutons na .btnin .btn-group. Bakisa na radio JavaScript optionnel mpe comportement ya style ya case ya kotiya elembo na plugin na biso ya ba boutons .

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

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.

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

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

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

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.

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