Amaqhosha

Sebenzisa izimbo zeqhosha le-Bootstrap ukwenza iintshukumo kwiifom, iingxoxo, kunye nokunye ngenkxaso yeesayizi ezininzi, amazwe, kunye nokunye.

Imizekelo

I-Bootstrap ibandakanya izitayile zamaqhosha achazwe kwangaphambili, nganye isebenzela injongo yayo ye-semantic, kunye nokongezwa okumbalwa okuphoswe kulawulo olungaphezulu.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Khubaza ukusonga umbhalo

Ukuba awufuni ukuba umbhalo weqhosha usongelwe, unokongeza .text-nowrapiklasi kwiqhosha. Kwi-Sass, unokuseta $btn-white-space: nowrapukuvala ukuvalwa kokubhaliweyo kwiqhosha ngalinye.

Iithegi zeqhosha

Iiklasi .btnziyilelwe ukuba zisetyenziswe kunye <button>nesiqalelo. Nangona kunjalo, ungasebenzisa ezi klasi kwi <a>okanye <input>izinto (nangona ezinye iibhrawuza zinokusebenzisa unikezelo olwahluke kancinane).

Xa usebenzisa iiklasi zamaqhosha <a>kwizinto ezisetyenziselwa ukuqalisa ukusebenza kwekhasi (njengomxholo odilikayo), endaweni yokudibanisa amaphepha amatsha okanye amacandelo angaphakathi kwephepha langoku, la makhonkco kufuneka anikwe role="button"ukuhambisa ngokufanelekileyo injongo yawo kubuchwephesha obuncedisayo njenge abafundi besikrini.

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Amaqhosha enkcazo

Ngaba ufuna iqhosha, kodwa hayi imibala engasemva enzima abayizisayo? Buyisela iiklasi zesilungisi esingagqibekanga ngezo .btn-outline-*zokususa yonke imifanekiso yangasemva kunye nemibala kulo naliphi na iqhosha.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Ubukhulu

Unqwenela amaqhosha amakhulu okanye amancinci? Yongeza .btn-lgokanye .btn-smiisayizi ezongezelelweyo.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Yenza amaqhosha omgangatho webhlokhi—awo anobubanzi obupheleleyo bomzali—ngokongeza .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

Imeko esebenzayo

Amaqhosha azakuvela ecinezelwe xa esebenza ngemvelaphi emnyama, umda omnyama, kwaye, xa imithunzi yenziwe yasebenza, isithunzi somfanekiso. Akukho mfuneko yokongeza iklasi ku- <button>s njengoko besebenzisa i-pseudo-class . Nangona kunjalo, usenakho ukunyanzela inkangeleko efanayo esebenzayo kunye .active(kwaye ubandakanye aria-pressed=“true”uphawu) ukuba ufuna ukuphinda urhulumente ngokwenkqubo.

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Ilizwe labakhubazekileyo

Yenza amaqhosha abonakale engasebenzi ngokongeza disableduphawu lwe boolean kuyo nayiphi na <button>into.

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

Amaqhosha angasebenziyo asebenzisa <a>isiqalelo aziphathe ngokwahlukileyo:

• <a>s ayiluxhasi disableduphawu, ngoko ke kufuneka udibanise .disablediklasi ukuyenza ibonakale ingasebenzi.
• Ezinye izimbo ezilungele ixesha elizayo zibandakanyiwe ukuvala zonke pointer-eventskumaqhosha eankile. Kwibhrawuza ezixhasa lo propati, awuzukubona ikhesa ekhubazekileyo kwaphela.
• Amaqhosha angasebenziyo asebenzisayo <a>kufuneka abandakanye aria-disabled="true"uphawu lokubonisa imeko yento kwiitekhnoloji ezincedisayo.
• Amaqhosha angasebenziyo asebenzisayo <a> akufuneki aquke hrefuphawu loyelelwano.

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

Icaveat yokusebenza kwekhonkco

Ukugubungela iimeko apho kufuneka ugcine hrefuphawu kwikhonkco elikhubazekileyo, .disablediklasi isebenzisa pointer-events: noneukuzama ukukhubaza ukusebenza kwekhonkco <a>s. Qaphela ukuba le propati ye-CSS ayikabikho emgangathweni we-HTML, kodwa zonke iibhrawuza zangoku ziyayixhasa. Ukongeza, nakwiziphequluli ezixhasayo pointer-events: none, ukukhangela kwekhibhodi kuhlala kungachaphazeleki, okuthetha ukuba abasebenzisi bekhibhodi ababoniweyo kunye nabasebenzisi bobuchwephesha bokuncedisa baya kuba nakho ukwenza la makhonkco asebenze. Ke ukukhuseleka, ukongeza aria-disabled="true", kukwabandakanya tabindex="-1"uphawu kula makhonkco ukuwathintela ekufumaneni ujoliso lwebhodi yezitshixo, kwaye usebenzise iJavaScript yesiko ukukhubaza ukusebenza kwazo ngokupheleleyo.

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Iqhosha leplagi

Yenza ngakumbi ngamaqhosha. Iqhosha lokulawula lixela okanye wenze amaqela amaqhosha amalungu amaninzi njengebar yesixhobo.

Guqula amazwe

Yongeza data-toggle="button"ukuguqula imeko yeqhosha active. Ukuba ucofa ngaphambili iqhosha, kufuneka udibanise .activeiklasi ngesandla kwaye aria-pressed="true" kwi <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

Ibhokisi yokukhangela kunye namaqhosha erediyo

Izitayile zeBootstrap .buttonzinokusetyenziswa kwezinye izinto, ezinje nge- <label>s, ukunika ibhokisi yokukhangela okanye iqhosha lesimbo serediyo. Yongeza data-toggle="buttons"kwi .btn-groupequlathe loo maqhosha alungisiweyo ukwenza ukuziphatha kwawo ujiko ngeJavaScript kwaye wongeze .btn-group-togglekwisimbo i <input>s ngaphakathi kwamaqhosha akho. Qaphela ukuba ungenza amaqhosha afakwe amandla elinye okanye amaqela awo.

Imo ekhangelweyo kula maqhosha ihlaziywa kuphela clickngesiganeko kwiqhosha. Ukuba usebenzisa enye indlela yokuhlaziya igalelo-umz., usebenzisa <input type="reset">okanye ngokwenza ngesandla checkedipropathi yegalelo-kuya kufuneka uguqule .activengokuzenzela <label>.

Qaphela ukuba amaqhosha atshekishwe kwangaphambili afuna ukuba wongeze ngokwenza .activeiklasi kwigalelo <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

Iindlela