Izinkinobho
Sebenzisa izitayela zenkinobho yangokwezifiso ye-Bootstrap ngezenzo ngamafomu, izingxoxo, nokuningi ngosekelo losayizi abaningi, izifunda, nokuningi.
Izibonelo
I-Bootstrap ifaka phakathi izitayela zezinkinobho ezichazwe ngaphambilini, ngasinye sisebenzisa inhloso yaso ye-semantic, kanye nokwengeziwe okumbalwa okuphonswe ukuze kulawulwe okwengeziwe.
<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>
Ukudlulisa incazelo kubuchwepheshe obusizayo
Ukusebenzisa umbala ukwengeza incazelo kunikeza kuphela inkomba ebonakalayo, engeke idluliselwe kubasebenzisi bobuchwepheshe obusizayo - njengezifundi zesikrini. Qinisekisa ukuthi ulwazi olushiwo umbala lusobala kokuqukethwe ngokwako (isb umbhalo obonakalayo), noma lufakwe ngezinye izindlela, njengombhalo owengeziwe ofihliwe .sr-only
nekilasi.
Khubaza ukugoqa umbhalo
Uma ungafuni ukuthi umbhalo wenkinobho ugoqwe, ungangeza .text-nowrap
iklasi enkinobho. Ku-Sass, ungasetha $btn-white-space: nowrap
ukukhubaza ukugoqa umbhalo kunkinobho ngayinye.
Omaka bezinkinobho
Amakilasi .btn
aklanyelwe ukusetshenziswa ne- <button>
elementi. Kodwa-ke, ungasebenzisa la makilasi kuwo <a>
noma <input>
izakhi (yize ezinye iziphequluli zingasebenzisa ukunikezwa okuhlukile kancane).
Uma usebenzisa izinkinobho zamakilasi kuma- <a>
elementi asetshenziselwa ukuqalisa ukusebenza kwekhasi (njengokuqukethwe okugoqiwe), esikhundleni sokuxhuma emakhasini amasha noma izigaba ezingaphakathi kwekhasi lamanje, lezi zixhumanisi kufanele zinikezwe role="button"
ukuze zidlulisele injongo yazo ngendlela efanele kubuchwepheshe obusizayo obufana no. izifundi zesikrini.
<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">
Izinkinobho zohlaka
Udinga inkinobho, kodwa hhayi imibala yangemuva enzima abayilethayo? Miselela amakilasi okulungisa azenzakalelayo .btn-outline-*
nalawo ukuze ususe zonke izithombe ezingemuva nemibala kunoma iyiphi inkinobho.
<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>
Osayizi
Uyathanda izinkinobho ezinkulu noma ezincane? Engeza .btn-lg
noma .btn-sm
osayizi abengeziwe.
<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>
Dala izinkinobho zeleveli yebhulokhi—lezo ezinobubanzi obugcwele bomzali—ngokwengeza .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>
Isimo esisebenzayo
Izinkinobho zizovela zicindezelwe uma zisebenza ngengemuva elimnyama, umngcele omnyama, futhi, lapho izithunzi zinikwe amandla, isithunzi esifakiwe. Asikho isidingo sokwengeza iklasi ku- <button>
s njengoba zisebenzisa i-pseudo-class . Nokho, usengaphoqa ukubonakala okufanayo okusebenzayo nge .active
(futhi ufake aria-pressed=“true”
isibaluli) uma udinga ukuphindaphinda isimo ngokohlelo.
<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>
Isimo sokukhubazeka
Yenza izinkinobho zibukeke zingasebenzi ngokwengeza disabled
isibaluli se-boolean kunoma iyiphi i- <button>
elementi.
<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>
Izinkinobho ezikhutshaziwe ezisebenzisa i- <a>
elementi ziziphatha ngendlela ehlukile:
<a>
s azisekelidisabled
isibaluli, ngakho-ke kufanele wengeze.disabled
ikilasi ukuze ulenze libonakale likhubazekile.- Ezinye izitayela ezilungele ikusasa zifakiwe ukuze kukhubazwe konke
pointer-events
kuzinkinobho zehange. Kuziphequluli ezisekela leso sakhiwo, ngeke usibone nakancane ikhesa ekhutshaziwe. - Izinkinobho ezikhubazekile ezisebenzisayo
<a>
kufanele zifakearia-disabled="true"
isibaluli ukuze zibonise isimo se-elementi kubuchwepheshe obusizayo. - Izinkinobho ezikhubazekile ezisebenzisayo
<a>
akufanele zifakehref
isibaluli.
<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>
Xhumanisa i-caveat yokusebenza
Ukumboza izimo lapho kufanele ugcine khona href
isibaluli kusixhumanisi esikhubazekile, .disabled
ikilasi lisebenzisa pointer-events: none
ukuzama ukukhubaza ukusebenza kwesixhumanisi se- <a>
s. Qaphela ukuthi lesi sici se-CSS asikakafaneliselwa i-HTML, kodwa zonke iziphequluli zesimanje ziyayisekela. Ngaphezu kwalokho, ngisho nasezipheqululini ezisekelayo pointer-events: none
, ukuzulazula kwekhibhodi kuhlala kungathinteki, okusho ukuthi abasebenzisi bekhibhodi ababonayo nabasebenzisi bobuchwepheshe obusizayo basazokwazi ukwenza lezi zixhumanisi zisebenze. Ngakho-ke ukuze uphephe, ngaphezu kwalokho aria-disabled="true"
, faka tabindex="-1"
isibaluli kulezi zixhumanisi ukuze uzivikele ekutholeni ukugxila kwekhibhodi, futhi usebenzise i-JavaScript yangokwezifiso ukukhubaza ukusebenza kwazo ngokuphelele.
<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>
I-plugin yenkinobho
Yenza okwengeziwe ngezinkinobho. Inkinobho yokulawula ithi noma dala amaqembu ezinkinobho zezingxenye ezengeziwe njengamabha wamathuluzi.
Guqula izifundazwe
Engeza data-toggle="button"
ukuze uguqule isimo senkinobho active
. Uma uguqula ngaphambili inkinobho, kufanele wengeze .active
ikilasi mathupha kanye aria-pressed="true"
naku- <button>
.
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
Single toggle
</button>
Ibhokisi lokuhlola nezinkinobho zomsakazo
Izitayela ze -Bootstrap .button
zingasetshenziswa kwezinye izici, ezifana no- <label>
s, ukunikeza ibhokisi lokuhlola noma inkinobho yesitayela somsakazo. Engeza data-toggle="buttons"
kokuqukethe .btn-group
lezo zinkinobho eziguquliwe ukuze unike amandla ukuziphatha kwazo kokuguqula nge-JavaScript futhi wengeze .btn-group-toggle
kusitayela u- <input>
s ngaphakathi kwezinkinobho zakho. Qaphela ukuthi ungakha izinkinobho ezinamandla okufakwayo okukodwa noma amaqembu azo.
Isimo esithikhiwe salezi zinkinobho sibuyekezwa kuphela click
ngomcimbi osenkinobho. Uma usebenzisa enye indlela ukuze ubuyekeze okokufaka—isb, usebenzisa <input type="reset">
noma ngokufaka checked
impahla yokokufaka ngokwakho—kuzodingeka uguqule .active
ngokuzenzela <label>
.
Qaphela ukuthi izinkinobho ezihloliwe zidinga ukuthi ungeze .active
ikilasi mathupha kokokufaka <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>
Izindlela
Indlela | Incazelo |
---|---|
$().button('toggle') |
Iguqula isimo sohlelo. Inikeza inkinobho ukubonakala sengathi yenziwe yasebenza. |
$().button('dispose') |
Icekela phansi inkinobho yento. |