Source

Iqela lamaqhosha

Iqela uthotho lwamaqhosha kunye kumgca omnye kunye neqela leqhosha, kwaye unamandla amakhulu ngeJavaScript.

Umzekelo osisiseko

Gquba uthotho lwamaqhosha .btnnge- .btn-group. Yongeza unomathotholo weJavaScript okhethiweyo kunye nokuziphatha kwesimbo sebhokisi ngamaqhosha ethu eplagi .

<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>
Qinisekisa ukuba ichanekile rolekwaye unikeze ileyibhile

Ukwenzela ukuba iitekhnoloji ezincedisayo (ezifana nezifundi zesikrini) zibonise ukuba uthotho lwamaqhosha abekwe ngokwamaqela, rolekufuneka kubonelelwe ngophawu olufanelekileyo. Kumaqela amaqhosha, oku kuyakuba role="group", ngelixa iibar zesixhobo kufuneka zibe ne role="toolbar".

Ukongeza, amaqela kunye neebar zesixhobo kufuneka zinikwe ileyibhile ecacileyo, njengoko uninzi lwetekhnoloji ezincedisayo aziyi kuzibhengeza, nangona kukho uphawu lwendima oluchanekileyo. Kwimizekelo enikelwe apha, sisebenzisa aria-label, kodwa ezinye iindlela aria-labelledbyezinokuthi zisetyenziswe.

Iqhosha lesixhobo se bar

Dibanisa iiseti zamaqela amaqhosha kwibar yesixhobo seqhosha kumacandelo anzima ngakumbi. Sebenzisa iiklasi eziluncedo njengoko zifuneka ukubeka amaqela, amaqhosha, kunye nokunye.

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

Zive ukhululekile ukudibanisa amaqela egalelo kunye namaqela amaqhosha kwibar yesixhobo sakho. Ngokufana nomzekelo ongasentla, uya kufuna ezinye izinto eziluncedo ukuze ubeke izinto ngokufanelekileyo.

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

Ubungakanani

Endaweni yokufaka iiklasi zokulinganisa iqhosha kwiqhosha ngalinye kwiqela, yongeza .btn-group-*nje kwelinye .btn-group, kuquka nganye xa ufunxa amaqela amaninzi.



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

Ukuzalela

Faka .btn-groupphakathi kwenye .btn-groupxa ufuna iimenu ezihlayo ezixutywe nothotho lwamaqhosha.

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

Ukwahluka ngokuthe nkqo

Yenza isethi yamaqhosha abonakale epakishwe ngokuthe nkqo kunokuba uthe tye. Uwiso lweqhosha lokwahlula aluxhaswa apha.

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