Source

Amaqhosha

Sebenzisa izimbo zeqhosha le-Bootstrap ukwenza izinto 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>
Ukuhambisa intsingiselo kwiiteknoloji ezincedisayo

Ukusebenzisa umbala ukongeza intsingiselo kubonelela kuphela ngesalathiso esibonakalayo, esingayi kuthunyelwa kubasebenzisi betekhnoloji encedisayo - njengezifundi zesikrini. Qinisekisa ukuba ulwazi olubonakaliswe ngumbala lucacile kumxholo ngokwawo (umzekelo, umbhalo obonakalayo), okanye luqukwe ngezinye iindlela, ezifana nesicatshulwa esongezelelweyo esifihlwe .sr-onlyeklasini.

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.

Ikhonkco
<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 (ngemvelaphi emnyama, umda omnyama, kunye nesithunzi somfanekiso) xa usebenza. 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 aziphatha 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 avaliweyo kufuneka abandakanye aria-disabled="true"uphawu lokubonisa imeko yento kwiitekhnoloji ezincedisayo.
<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>

Iklasi .disabledisebenzisa pointer-events: noneukuzama ukukhubaza usebenziso lwekhonkco lwe- <a>s, kodwa loo propati ye-CSS ayikabikho emgangathweni. 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 ukuze ukhuseleke, yongeza tabindex="-1"uphawu kula makhonkco (ukuwathintela ekufumaneni ujoliso lwebhodi yezitshixo) kwaye usebenzise iJavaScript yesiko ukukhubaza ukusebenza kwabo.

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

Indlela Inkcazo
$().button('toggle') Itshintsha imeko yokutyhala. Inika iqhosha inkangeleko yokuba livuliwe.
$().button('dispose') Itshabalalisa iqhosha lesiqalelo.