Utubuto
Koresha Bootstrap yihariye ya buto yuburyo bwibikorwa muburyo, ibiganiro, nibindi byinshi hamwe nubufasha kubunini bwinshi, leta, nibindi byinshi.
Bootstrap ikubiyemo buto yuburyo bwateganijwe mbere, buri kimwe gikora intego yacyo, hamwe ninyongera zijugunywe kubindi bigenzura.
Gutanga ibisobanuro kubuhanga bufasha
Gukoresha ibara kugirango wongere ibisobanuro bitanga gusa icyerekezo cyerekana, kitazashyikirizwa abakoresha tekinoroji ifasha - nk'abasoma ecran. Menya neza ko amakuru yerekanwe n'ibara agaragara uhereye kubirimo ubwabyo (urugero: inyandiko igaragara), cyangwa bigashyirwa muburyo butandukanye, nk'inyandiko y'inyongera ihishe hamwe .sr-only
n'ishuri.
Amasomo .btn
yagenewe gukoreshwa hamwe nibintu <button>
. Ariko, urashobora kandi gukoresha aya masomo kumurongo <a>
cyangwa <input>
ibice (nubwo mushakisha zimwe zishobora gukoresha uburyo butandukanye).
Mugihe ukoresheje ibyiciro bya buto kubintu <a>
bikoreshwa mugukurura page mumikorere (nkibintu bisenyuka), aho guhuza page cyangwa ibice bishya kurupapuro rwubu, aya mahuza agomba guhabwa a role="button"
kugirango yerekane neza intego zabo muburyo bwikoranabuhanga bufasha nka abasomyi ba ecran.
Ukeneye buto, ariko ntabwo amabara meza cyane bazana? Simbuza ibyiciro byahinduye ibyiciro hamwe .btn-outline-*
nibyo kugirango ukureho amashusho yose yibara n'amabara kuri buto iyariyo yose.
Ibyiza binini cyangwa bito? Ongeraho .btn-lg
cyangwa .btn-sm
kubunini bwinyongera.
Kora urwego rwo guhagarika buto-izenguruka ubugari bwuzuye bwababyeyi - wongeyeho .btn-block
.
Utubuto tuzagaragara gukanda (hamwe numwijima wijimye, umupaka wijimye, no gushiramo igicucu) mugihe ukora. Ntibikenewe ko wongera urwego kuri <button>
s nkuko bakoresha pseudo-urwego . Ariko, urashobora guhatira isura imwe igaragara hamwe .active
(kandi ushizemo aria-pressed="true"
ikiranga) mugihe ukeneye kwigana leta gahunda.
Kora buto isa nkidakora wongeyeho disabled
ikiranga boolean kubintu byose <button>
.
Utubuto twahagaritswe ukoresheje <a>
element yitwara gato:
<a>
s ntushyigikiredisabled
ikiranga, ugomba rero kongeramo urwego.disabled
kugirango bigaragare ko byahagaritswe.- Bimwe mubihe bizaza-byinshuti zirimo guhagarika byose
pointer-events
kuri buto ya ankor. Muri mushakisha ishyigikira uwo mutungo, ntuzabona indanga yahagaritswe na gato. - Utubuto twahagaritswe tugomba gushyiramo
aria-disabled="true"
ikiranga kugirango twerekane imiterere yibintu bifasha tekinoroji.
Ihuza imikorere caveat
Icyiciro .disabled
gikoresha pointer-events: none
kugirango ugerageze guhagarika imikorere yimikorere ya <a>
s, ariko uwo mutungo wa CSS nturagerwaho. Mubyongeyeho, no muri mushakisha zishyigikira pointer-events: none
, kugendana na clavier bikomeza kutagira ingaruka, bivuze ko abakoresha clavier babonye hamwe nabakoresha tekinoroji ifasha bazakomeza gukora iyo miyoboro. Kugirango rero ugire umutekano, ongeramo tabindex="-1"
ikiranga kuriyi miyoboro (kugirango ubabuze kwakira intumbero ya clavier) hanyuma ukoreshe JavaScript yihariye kugirango uhagarike imikorere yabo.
Kora byinshi hamwe na buto. Kugenzura buto ivuga cyangwa gukora amatsinda ya buto kubindi bikoresho nkibikoresho.
Ongeraho data-toggle="button"
kugirango uhindure buto ya active
leta. Niba ubanziriza guhinduranya buto, ugomba gukoresha intoki wongeyeho .active
urwego no aria-pressed="true"
kuri <button>
.
Imisusire ya Bootstrap .button
irashobora gukoreshwa mubindi bintu, nka <label>
s, kugirango itange agasanduku cyangwa radio imiterere ya buto. Ongeraho data-toggle="buttons"
ikubiyemo .btn-group
ibyo byahinduwe kugirango ushoboze imyitwarire yabo ihindagurika ukoresheje JavaScript hanyuma wongere .btn-group-toggle
muburyo bwa <input>
s muri buto yawe. Menya ko ushobora gukora ikintu kimwe cyinjijwe-na buto cyangwa amatsinda yabyo.
Igenzurwa rya leta kuriyi buto ivugururwa gusa binyuze click
mubyabaye kuri buto. Niba ukoresheje ubundi buryo bwo kuvugurura ibyinjijwe - urugero, hamwe <input type="reset">
cyangwa ukoresheje intoki ukoresheje checked
umutungo winjiza - uzakenera guhinduranya .active
intoki <label>
.
Menya ko mbere-yagenzuwe buto igusaba kwongera intoki ibyiciro .active
byinjira <label>
.
Uburyo | Ibisobanuro |
---|---|
$().button('toggle') |
Toggles gusunika leta. Itanga buto igaragara ko yakoreshejwe. |
$().button('dispose') |
Gusenya buto yibintu. |