Source

Kooxda badhanka

Ku xidh badhamada taxane ah hal xariiq oo keliya oo wata kooxda badhanka, oo aad ugu xoog weyn iyaga oo isticmaalaya JavaScript.

Tusaalaha aasaasiga ah

Ku duub badhamada taxane ah .btngudaha .btn-group. Ku dar raadiyaha JavaScript ee ikhtiyaarka ah iyo habdhaqanka qaabka sanduuqa hubinta adigoo isticmaalaya badhamadayada plugin .

<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>
Xaqiiji sax roleoo bixi calaamad

Si teknoolojiyadda caawinta (sida akhristayaasha shaashadda) ay u gudbiyaan in badhamada taxane ah la kooxeeyay, rolesifo habboon ayaa loo baahan yahay in la bixiyo. Kooxaha badhanka, tani waxay noqonaysaa role="group", halka aaladaha ay tahay inay lahaadaan a role="toolbar".

Intaa waxaa dheer, kooxaha iyo aaladaha waa in la siiyaa calaamad cad, maadaama inta badan tignoolajiyada caawinta aysan ku dhawaaqi doonin iyaga, in kasta oo ay jirto sifo doorka saxda ah. Tusaalooyinka halkan lagu soo bandhigay, waxaan isticmaalnaa aria-label, laakiin beddelka sida aria-labelledbysidoo kale waa la isticmaali karaa.

Qalabka badhanka

Isku-dubarid kooxo badhanno ah oo geli baararka aaladaha badhanka ee qaybo aad u adag. Isticmaal fasallada utility sida loogu baahdo si aad meel bannaan uga saarto kooxaha, badhamada, iyo in ka badan.

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

Dareen xornimo inaad ku qasto kooxaha wax gelinta iyo kooxaha badhanka ee ku jira aaladahaaga. Si la mid ah tusaalaha kore, waxaad u badan tahay inaad u baahan doonto xoogaa yutiilitida ah in kastoo si sax ah wax loo meeleeyo.

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

Cabbirka

Halkii aad ka codsan lahayd fasalada cabbirka badhanka badhanka kasta oo koox ah, kaliya ku dar .btn-group-*mid kasta .btn-group, oo ay ku jiraan mid kasta marka aad buul ka samaysanayso kooxo badan.



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

Buul

Meel .btn-groupkale .btn-groupgeli marka aad rabto liiska hoos-u-dhaca ee lagu qasay badhammo taxane ah.

Isku xirka hoos u dhaca Isku xirka hoos u dhaca 
<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>

Kala duwanaansho toosan

Samee badhamada u muuqda kuwo toosan oo is dulsaaran halkii ay ahaan lahaayeen kuwo toosan. Hoos u dhigida badhanka kala qaybsan halkan lagama taageero.

Isku xirka hoos u dhaca Isku xirka hoos u dhaca
Isku xirka hoos u dhaca Isku xirka hoos u dhaca
Isku xirka hoos u dhaca Isku xirka hoos u dhaca
Isku xirka hoos u dhaca Isku xirka hoos u dhaca 
<div class="btn-group-vertical">
  ...
</div>