JavaScript
Zisa izinto zeBootstrap ebomini ngaphezulu kweshumi elinesibini leeplagi ze-jQuery zesiko. Zibandakanye ngokulula zonke, okanye nganye nganye.
Zisa izinto zeBootstrap ebomini ngaphezulu kweshumi elinesibini leeplagi ze-jQuery zesiko. Zibandakanye ngokulula zonke, okanye nganye nganye.
Iiplagi zingabandakanywa ngabanye (usebenzisa iifayile zomntu ngamnye *.js
zeBootstrap), okanye zonke ngaxeshanye (usebenzisa bootstrap.js
okanye iminified bootstrap.min.js
).
Zombini bootstrap.js
kwaye bootstrap.min.js
ziqulathe zonke iiplagi kwifayile enye. Bandakanya enye kuphela.
Ezinye iiplagi kunye namalungu eCSS axhomekeke kwezinye iiplagi. Ukuba ubandakanya ii-plugins nganye, qiniseka ukuba ukhangele ezi zixhomekeke kumaxwebhu. Kwakhona qaphela ukuba zonke iiplagi zixhomekeke kwijQuery (oku kuthetha ukuba i-jQuery kufuneka ifakwe phambi kweefayile zeplagin). Qhagamshelana nathibower.json
ukuze ubone ukuba zeziphi iinguqulelo zejQuery ezixhaswayo.
Ungasebenzisa zonke iiplagi ze-Bootstrap ngaphandle kwe-API yokuphawula ngaphandle kokubhala umgca omnye weJavaScript. Le yiBootstrap yodidi lokuqala lwe-API kwaye kufuneka ibe yingqwalasela yakho yokuqala xa usebenzisa iplagi.
Oko kwathiwa, kwezinye iimeko kunokunqweneleka ukucima lo msebenzi. Ngoko ke, sikwabonelela ngokukwazi ukukhubaza uphawu loyelelwano lwedatha ye-API ngokukhulula zonke iziganeko kuxwebhu olunezithuba zamagama data-api
. Oku kukhangeleka ngolu hlobo:
Kungenjalo, ukujolisa iplagin ethile, faka nje igama leplagin njengendawo yegama kunye ne-data-api namespace efana nale:
Musa ukusebenzisa iimpawu zedatha ezivela kwiiplagi ezininzi kwindawo enye. Umzekelo, iqhosha alinakuba nencam yesixhobo kunye nokuguqula imodali. Ukuze wenze oku, sebenzisa i-elementi yokusonga.
Sikwakholelwa ukuba kufuneka ukwazi ukusebenzisa zonke iiplagi zeBootstrap ngeJavaScript API. Zonke ii-API zikawonke-wonke zinye, iindlela ezibotshelelwayo, kwaye zibuyisela ingqokelela eyenziweyo.
Zonke iindlela kufuneka zamkele into ekhethiweyo yeenketho, umtya ojolise kwindlela ethile, okanye akukho nto (eqalisa iplagin ngokuziphatha okungagqibekanga):
I-plugin nganye iphinda iveze umakhi wayo ekrwada Constructor
kwipropati: $.fn.popover.Constructor
. Ukuba ungathanda ukufumana umzekelo othile weplagi, yifumane ngokuthe ngqo kwinto: $('[rel="popover"]').data('popover')
.
Ungatshintsha useto olungagqibekanga lweplagi ngokulungisa Constructor.DEFAULTS
into yeplagin:
Ngamanye amaxesha kuyimfuneko ukusebenzisa iiplagi ze-Bootstrap kunye nezinye izikhokelo ze-UI. Kwezi meko, ukungqubana kwesithuba segama kunokwenzeka ngamanye amaxesha. Ukuba oku kuyenzeka, .noConflict
ungafowunela iplagin onqwenela ukubuyisela ixabiso layo.
I-Bootstrap ibonelela ngeziganeko zesiko kwiintshukumo ezininzi ezizodwa zeeplagi. Ngokuqhelekileyo, ezi ziza ngendlela engapheliyo kunye neyexesha elidlulileyo - apho i-infinitive (umz. show
) iqaliswa ekuqaleni kwesiganeko, kwaye imo yaso yexesha elidlulileyo ye-participle (umz. shown
) ivuselelwe ekugqityweni kwesenzo.
Ukusukela nge-3.0.0, zonke iziganeko ze-Bootstrap zinezithuba zamagama.
Zonke iziganeko ezingapheliyo zibonelela preventDefault
ngokusebenza. Oku kubonelela ukukwazi ukumisa ukuphunyezwa kwesenzo phambi kokuba siqale.
Uguqulelo lweplagi nganye yeBootstrap's jQuery inokufikelelwa VERSION
ngepropati yomakhi weplagi. Umzekelo, kwi-plugin yengcebiso yesixhobo:
Iiplagi zeBootstrap azibuyeli ngasemva ngokukodwa xa iJavaScript ivaliwe. Ukuba unenkathalo ngamava omsebenzisi kule meko, sebenzisa <noscript>
ukuchaza imeko (kunye nendlela yokwenza kwakhona iJavaScript) kubasebenzisi bakho, kunye/okanye ukongeza okwakho ukusilela.
I-Bootstrap ayizixhasi ngokusemthethweni iilayibrari zeJavaScript zomntu wesithathu njengePrototype okanye i-jQuery UI. Ngaphandle .noConflict
kweziganeko ezinamagama, kusenokubakho iingxaki zokuhambelana ekufuneka uzilungise wedwa.
Ngeziphumo ezilula zotshintsho, bandakanya transition.js
kanye ecaleni kwezinye iifayile zeJS. Ukuba usebenzisa i compiled (okanye minified) bootstrap.js
, akukho mfuneko yokubandakanya oku-sele kukho.
I-Transition.js ingumncedi osisiseko wemisitho transitionEnd
kunye ne-emulator yenguqu ye-CSS. Isetyenziswa zezinye iiplagi ukujonga inkxaso yenguqu yeCSS nokubamba iinguqu ezijingayo.
Utshintsho lunokuvalwa kwihlabathi jikelele kusetyenziswa le JavaScript ilandelayo ya snippet, emayize emva kokuba transition.js
(okanye bootstrap.js
, bootstrap.min.js
njengoko kusenokuba njalo) ilayishiwe:
Iimodyuli zilungelelanisiwe, kodwa zibhetyebhetye, iingxoxo zencoko yababini ezinobuncinci obufunekayo obufunekayo kunye nokungagqibekanga okuhlakaniphile.
Qinisekisa ukuba ungayivuli imodali ngelixa enye isabonakala. Ukubonisa ngaphezulu kwemodali enye ngexesha kufuna ikhowudi yesiko.
Ngalo lonke ixesha zama ukubeka ikhowudi yeHTML yemodal kwindawo ephezulu kuxwebhu lwakho ukunqanda amanye amalungu achaphazela inkangeleko yemodal kunye/okanye ukusebenza.
Kukho ezinye izilumkiso malunga nokusetyenziswa kweemodyuli kwizixhobo eziphathwayo. Jonga amaxwebhu ethu enkxaso kwisikhangeli ukuze ufumane iinkcukacha.
Ngenxa yendlela i-HTML5 eyichaza ngayo i-semantics yayo, autofocus
uphawu lwe-HTML alunasiphumo kwiimodyuli zeBootstrap. Ukufezekisa umphumo ofanayo, sebenzisa iJavaScript yesiko:
Imodali enikezelweyo enesihloko, umzimba, kunye neseti yezenzo kumbhalo osemazantsi.
Guqula imodal usebenzisa iJavaScript ngokucofa iqhosha elingezantsi. Iza kutyibilika phantsi kwaye iphele ukusuka phezulu ephepheni.
Qinisekisa ukuba wongeza role="dialog"
kunye aria-labelledby="..."
, ubhekisa kwisihloko semodal, ku .modal
, kwaye role="document"
kuyo .modal-dialog
ngokwayo.
Ukongeza, unganika inkcazo yencoko yababini yemodal nge aria-describedby
kwi .modal
.
Ukufakela iividiyo zikaYouTube kwiimodyuli kufuna iJavaScript eyongezelelweyo engekho kwiBootstrap ukumisa ngokuzenzekelayo ukudlala nokunye. Bona esi sithuba sokuPhuma kweSitaki siluncedo ukuze ufumane ulwazi oluthe kratya.
Iimodyuli zineesayizi ezimbini ozikhethelayo, ezifumaneka ngeeklasi zesilungisi eziza kubekwa kwi .modal-dialog
.
Kwiimodyuli ezibonakala ngokulula kunokuba ziphele ukubonwa, susa .fade
iklasi kuphawu lwakho lwemodal.
Ukuthatha ithuba lendlela yendlela yeBootstrap ngaphakathi kwemodal, indlwane nje .row
s ngaphakathi .modal-body
kwaye emva koko usebenzise iiklasi zendlela yegridi eqhelekileyo.
Unenqwaba yamaqhosha athi onke avuse indlela enye, enemixholo eyahlukileyo nje kancinane? Sebenzisa event.relatedTarget
kunye neempawu zeHTML (data-*
ngokunokwenzeka ngejQuery ) ukwahlula imixholo yemodal ngokuxhomekeke ekubeni leliphi iqhosha elicofiweyo. Bona amaxwebhu eMisitho yeModal ngeenkcukacha relatedTarget
,
I-plugin ye-modal iguqula umxholo wakho ofihliweyo kwimfuno, ngeempawu zedatha okanye iJavaScript. Yongeza kwakhona .modal-open
kwi- <body>
override default scrolling behavior kwaye yenza i- .modal-backdrop
a ukunika indawo yokucofa ukugxotha iimodyuli ezibonisiweyo xa ucofa ngaphandle kwemodali.
Vula imodali ngaphandle kokubhala iJavaScript. Cwangcisa data-toggle="modal"
isiqalelo somlawuli, njengeqhosha, kunye ne data-target="#foo"
okanye href="#foo"
ukujolisa kwindlela ethile yokuguqula.
Fowunela i-modal ene-id myModal
ngomgca omnye weJavaScript:
Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-
, njengakwi data-backdrop=""
.
Igama | uhlobo | ukungagqibeki | inkcazelo |
---|---|---|---|
ngasemva | boolean okanye umtya'static' |
yinyani | Ibandakanya i-modal-backdrop element. Kungenjalo, khankanya static imeko yangasemva engayivaliyo imodal ngokucofa. |
ikhibhodi | boolean | yinyani | Ivala imodal xa iqhosha lokubaleka licofa |
bonisa | boolean | yinyani | Ibonisa imodali xa iqaliswa. |
kude | indlela | bubuxoki | Olu khetho lurhoxisiwe ukusukela kwi-v3.3.0 kwaye lususiwe kwi-v4. Sicebisa endaweni yoko sisebenzise itemplate yecala lomxhasi okanye isakhelo sokubophelela idatha, okanye ufowunele jQuery.layisha ngokwakho. Ukuba i-URL ekude inikezelwe, umxholo uya kulayishwa ngexesha elinye ngendlela ye-jQuery |
.modal(options)
Yenza umxholo wakho ube yimodali. Yamkela iinketho ozikhethelayo object
.
.modal('toggle')
Yenza imodal ngesandla. Ubuyela kumnxeba phambi kokuba imodali iboniswe okanye ifihliwe (okt phambi kokuba isiganeko shown.bs.modal
okanye hidden.bs.modal
isiganeko senzeke).
.modal('show')
Ivula imodali ngesandla. Ubuyela kumnxeba phambi kokuba imodali iboniswe (okt phambi kokuba shown.bs.modal
isiganeko senzeke).
.modal('hide')
Ufihla imodali ngesandla. Ibuyisela kumnxebi phambi kokuba imodali ifihlwe (okt phambi kokuba hidden.bs.modal
isiganeko senzeke).
.modal('handleUpdate')
Lungisa ukuma kwemodali ukuchasana nebar yokuskrola ukuba kunokwenzeka umntu avele, nto leyo enokwenza ukuba imodali itsibe ekhohlo.
Ifuneka kuphela xa ukuphakama kwemodal kutshintsha ngelixa ivuliwe.
Iklasi ye-modal ye-Bootstrap iveza iminyhadala embalwa yokuqhagamshelwa ekusebenzeni kwe-modal.
Zonke iziganeko zemodal ziyagxothwa kwimodali ngokwayo (okt kwi <div class="modal">
).
Uhlobo loMnyhadala | Inkcazo |
---|---|
bonisa.bs.modal | Esi siganeko sivutha ngokukhawuleza xa show kubizwa indlela yomzekelo. Ukuba kubangelwa ngonqakrazo, into ecofayo iyafumaneka relatedTarget njengepropathi yesiganeko. |
ebonisiweyo.bs.modal | Esi siganeko sigxothwa xa i-modal yenziwe yabonakala kumsebenzisi (iya kulinda iinguqu zeCSS ukuba zigqibe). Ukuba kubangelwa ngonqakrazo, into ecofayo iyafumaneka relatedTarget njengepropathi yesiganeko. |
fihla.bs.modal | Esi siganeko sigxothwa ngokukhawuleza xa hide indlela yomzekelo ibiziwe. |
efihliweyo.bs.modal | Esi siganeko sigxothwa xa i-modal igqibile ukufihlwa kumsebenzisi (iya kulinda iinguqu zeCSS ukuba zigqibe). |
loaded.bs.modal | Esi siganeko sigxothwa xa i-modal ilayishe umxholo usebenzisa remote ukhetho. |
Yongeza imenyu eyehlayo phantse kuyo yonke into eneplagi elula, kubandakanya i-navbar, iithebhu, kunye neepilisi.
Ngeempawu zedatha okanye iJavaScript, iplagin eyehlayo iguqula umxholo ofihliweyo (imenyu eyehlayo) ngokuguqula .open
iklasi kwizinto zoluhlu lwabazali.
Kwizixhobo eziphathwayo, ukuvula i-dropdown yongeza .dropdown-backdrop
njengendawo yempompo yokuvala imenyu eyehlayo xa ucofa ngaphandle kwemenyu, imfuneko yenkxaso efanelekileyo ye-iOS. Oku kuthetha ukuba ukusuka kwimenyu eyehlayo evulekileyo uye kwimenyu eyehlayo eyahlukileyo kufuna itephu eyongezelelweyo kwiselfowuni.
Qaphela: Uphawu data-toggle="dropdown"
loyelelwano kuxhomekeke kuyo ukuvala imenyu eyehlayo kwinqanaba lesicelo, ngoko luluvo oluhle ukusoloko uyisebenzisa.
Yongeza data-toggle="dropdown"
kwikhonkco okanye iqhosha ukuguqula ukwehla.
Ukugcina ii-URL zicocekile ngamaqhosha ekhonkco, sebenzisa data-target
uphawu loyelelwano endaweni ye href="#"
.
Fowunela ukwehla ngeJavaScript:
data-toggle="dropdown"
isafunekaNokuba ufowunela ukwehla kwakho ngeJavaScript okanye endaweni yoko usebenzise i-data-api, data-toggle="dropdown"
isoloko ifuneka ukuba ubekhona kwindawo yokuqalisa ukwehla.
Akukho nanye
$().dropdown('toggle')
Qwalasela imenyu eyehlayo ye-navbar enikiweyo okanye ukukhangela kwe-tabbed.
Zonke iziganeko ezihlayo zigxothwa .dropdown-menu
kumzali we element.
Zonke iziganeko eziya kuhla zinepropati relatedTarget
, ezixabiso layo lisisiqalelo seankile eshukumayo.
Uhlobo loMnyhadala | Inkcazo |
---|---|
bonisa.bs.ukwehla | Esi siganeko sivutha ngokukhawuleza xa indlela yokubonisa umboniso ibizwa. |
ibonisiwe.bs.ukwehla | Esi siganeko sigxothwa xa ukwehla kwenziwe kwabonakala kumsebenzisi (uya kulinda iinguqu zeCSS, ukugqiba). |
fihla.bs.ukwehla | Esi siganeko sigxothwa ngokukhawuleza xa indlela yokufihla umzekelo ibizwe. |
hide.bs.dropdown | Esi siganeko sigxothwa xa i dropdown igqibile ukufihlwa kumsebenzisi (iya kulinda iinguqu zeCSS, igqibe). |
I-plugin yeScrollSpy yeyokuhlaziya ngokuzenzekelayo iithagethi ze-nav ngokusekelwe kwindawo yokuskrola. Skrolela indawo engezantsi kwe-navbar kwaye ubukele utshintsho lweklasi esebenzayo. Imiba esezantsi eyehlayo nayo iya kuphawulwa.
Ad leggings keytar, brunch id art party dolor labore. I-pitchfork ngonyaka enim lo-fi ngaphambi kokuba bathengise ngayo. Tumblr ifama-to-itheyibhile amalungelo ibhayisekile nantoni na. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Ijezi kaCosby ilomo yejean ezimfutshane, williamsburg hoodie minim qui mhlawumbi awuzange uve ngazo et cardigan trust fund culpa biodiesel wes anderson aesthetic. UNihil une tattoo accsamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Veniam marfa amadevu ngesityibiliki, adipisicing fugiat velit pitchfork iindevu. Freegan iindevu aliqua cupidatat mcsweeney's vero. Cupidatat ezine loko nisi, ea helvetica nulla carles. I-Tattooed cosby sweater ilori yokutya, i-mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. EBrooklyn adipisicing craft beer vice keytar deserunt.
Occaecat commodo aliqua deelectus. Fap craft beer deserunt skateboard ea. Amalungelo ebhayisekile eLomo adipisicing banh mi, velit ea sunt kwinqanaba elilandelayo locavore ikofu enemvelaphi eyodwa e magna veniam. Ubomi obuphezulu id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, ezinzileyo deelectus consectetur fanny pack iphone.
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Keytar twee blog, culpa isithunywa bag marfa nantoni na ilori yokutya deelectus. Sapiente synth id guessnda. Locavore sed helvetica cliche irony, thundercats mhlawumbi awuzange uve ngazo consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat phambi kokuba bathengise, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
Unxulumano lwebar yeNavbar kufuneka lube nethagethi ye-id enokusombululeka. Umzekelo, <a href="#home">home</a>
kufuneka ihambelane nento ekwiDOM efana <div id="home"></div>
.
:visible
zingahoywaIzinto ekujoliswe kuzo ezingahambelaniyo :visible
ne-jQuery aziyi kuhoywa kwaye izinto zazo ze-nav ezihambelanayo azisayi kuphawulwa.
Nokuba yeyiphi na indlela yokuphunyezwa, iscrollspy ifuna ukusetyenziswa position: relative;
kwento oyihlolayo. Kwiimeko ezininzi le <body>
. Xa scrollspying kwizinto ngaphandle <body>
, qiniseka ukuba ube height
iseti kwaye overflow-y: scroll;
isetyenziswe.
Ukongeza ngokulula isimilo sokuskrola kulawulo lwakho lwebar engaphezulu, yongeza data-spy="scroll"
kwinto ofuna ukuyihlola (ubukhulu becala le iya kuba yi <body>
). Emva koko yongeza data-target
uphawu kunye ne-ID okanye udidi lwelungu lomzali walo naliphi na ilungu le-Bootstrap .nav
.
Emva kokongeza position: relative;
kwiCSS yakho, fowunela iscrollspy ngeJavaScript:
.scrollspy('refresh')
Xa usebenzisa i-scrollspy ngokudibanisa okanye ukususa izinto kwi-DOM, kuya kufuneka ufowunele indlela yokuhlaziya ngolu hlobo:
Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-
, njengakwi data-offset=""
.
Igama | uhlobo | ukungagqibeki | inkcazelo |
---|---|---|---|
i-offset | inani | 10 | Iipikseli zokulinganisa ukusuka phezulu xa ubala indawo yokuskrola. |
Uhlobo loMnyhadala | Inkcazo |
---|---|
vula.bs.scrollspy | Esi siganeko sivutha nanini na into entsha ivuliwe yi-scrollspy. |
Yongeza ngokukhawuleza, ukusebenza kwethebhu eguquguqukayo kwinguqu kwiipaneli zomxholo wasekhaya, nangeemenyu ezihlayo. Iithebhu ezifakwe kwindlwane azixhaswanga.
Idenim ekrwada mhlawumbi awuzange uve ngabo ibhulukhwe yejean yaseAustin. Nesciunt tofu stumptown aliqua, retro synth master coca. Amadevu cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Ijezi yeCosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american iimpahla, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Le plugin yandisa icandelo lokukhangela kwi-tabbed ukongeza iindawo ezinokubakho.
Yenza iithebhu ezinokubakho ngeJavaScript (ithebhu nganye kufuneka ivulwe ngokwayo):
Unokwenza ithebhu nganye isebenze ngeendlela ezininzi:
Unokwenza ithebhu okanye ukukhangela iipilisi ngaphandle kokubhala nayiphi na iJavaScript ngokuchaza ngokulula data-toggle="tab"
okanye data-toggle="pill"
kwinto. Ukongeza i nav
kunye nav-tabs
neeklasi kwisithuba ul
kuya kusebenzisa i-Bootstrap yesimbo sesithuba , ngelixa udibanisa nav
kunye nav-pills
neeklasi ziyakusebenzisa isitayile sepilisi .
Ukwenza iithebhu ziphelelwe, yongeza .fade
kuyo nganye .tab-pane
. Ipheyini yethebhu yokuqala kufuneka kwakhona .in
yenze umxholo wokuqala ubonakale.
$().tab
Yenza isiqalelo sethebhu kunye nesiqulatho sisebenze. Isithuba kufuneka sibenendawo data-target
okanye indawo href
yesikhongozeli kwiDOM. Kule mizekelo ingasentla, ii-tab ngu- <a>
s kunye data-toggle="tab"
neempawu.
.tab('show')
Ikhetha ithebhu enikiweyo kwaye ibonisa umxholo wayo ohambelanayo. Nayiphi na enye ithebhu ebikhe yakhethwa ngaphambili ayikhethwa kwaye umxholo wayo uyafihlwa. Ibuyisela kumnxeba phambi kokuba ipayini yethebhu iboniswe ngokwenene (okt phambi kokuba shown.bs.tab
isiganeko senzeke).
Xa ubonisa ithebhu entsha, iziganeko zivutha ngolu hlobo lulandelayo:
hide.bs.tab
(kwithebhu esebenzayo yangoku)show.bs.tab
(kwi-eza kuboniswa thebhu)hidden.bs.tab
(kwithebhu esebenzayo yangaphambili, efanayo nale hide.bs.tab
yesiganeko)shown.bs.tab
(kwisithuba esandula ukusebenza esivele sibonise ithebhu, efanayo show.bs.tab
nesesiganeko)Ukuba akukho thebhu ibisele iyasebenza, ngoko i hide.bs.tab
kunye hidden.bs.tab
neziganeko aziyi kugxothwa.
Uhlobo loMnyhadala | Inkcazo |
---|---|
bonisa.bs.tab | Esi siganeko sivutha kumboniso wethebhu, kodwa ngaphambi kokuba ithebhu entsha iboniswe. Sebenzisa event.target kunye event.relatedTarget nokujolisa ithebhu esebenzayo kunye nesithuba sangaphambili esisebenzayo (ukuba sikhona) ngokulandelelanayo. |
ebonisiweyo.bs.tab | Esi siganeko sitshisa kwi-tab show emva kokuba ithebhu ibonisiwe. Sebenzisa event.target kunye event.relatedTarget nokujolisa ithebhu esebenzayo kunye nesithuba sangaphambili esisebenzayo (ukuba sikhona) ngokulandelelanayo. |
fihla.bs.tab | Esi siganeko sitshisa xa isithuba esitsha siza kuboniswa (kwaye ke isithuba sangaphambili esisebenzayo siza kufihlwa). Sebenzisa event.target kunye event.relatedTarget nokujolisa ithebhu esebenzayo yangoku kunye nethebhu entsha eza kusebenza ngokukhawuleza, ngokulandelelanayo. |
efihliweyo.bs.tab | Esi siganeko sivutha emva kokuba ithebhu entsha ibonisiwe (kwaye ke isithuba sangaphambili esisebenzayo sifihliwe). Sebenzisa event.target kunye event.relatedTarget nokujolisa kwithebhu esebenzayo yangaphambili kunye nethebhu entsha esebenzayo, ngokulandelelanayo. |
Iphefumlelwe yi-plugin egqwesileyo ye-jQuery.tipsy ebhalwe nguJason Frame; Iingcebiso zesixhobo luguqulelo oluhlaziyiweyo, olungathembekanga kwimifanekiso, sebenzisa i-CSS3 yoopopayi, kunye neempawu zedatha zogcino lwesihloko sendawo.
Iingcebiso zezixhobo ezinezihloko ezibude buziro aziboniswa.
Hambisa ngaphezulu kwezi linki zingezantsi ukuze ubone iingcebiso zesixhobo:
Iibhulukhwe eziqinileyo kwinqanaba elilandelayo keffiyeh mhlawumbi awuzange uve ngazo. Photo booth iindevu ekrwada idenim letterpress vegan messenger bag stumptown. Ifama-to-itheyibhile seitan, i-mcsweeney's fixie ezinzileyo iquinoa ye-8-bit yaseMelika isambatho ine- terry richardson vinyl chambray. Iindevu stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. Igcisa elihlekisayo ngokwenene whatever keytar , i-scenar farm-to-table banksy Austin twitter handle freegan cred krwada idenim enye-origin ikofu viral.
Zine iinketho ezikhoyo: phezulu, ekunene, ezantsi, nasekhohlo zilungelelanisiwe.
Ngezizathu zokusebenza, iSixhobo kunye nePopover data-apis zingenile, okuthetha ukuba kufuneka uziqalise ngokwakho .
Enye indlela yokuqalisa zonke iingcebiso zesixhobo kwiphepha inokuba kukukhetha ngophawu lwazo data-toggle
:
Isixhobo se-plugin se-tooltip sivelisa umxholo kunye ne-markup kwimfuno, kwaye ngokungagqibekanga iindawo zeengcebiso zesixhobo emva kwento yazo ye-trigger.
Qalisa ingcebiso yesixhobo ngeJavaScript:
Uphawu olufunekayo lwencam yesixhobo luphawu kuphela data
kwaye title
kwisiqalelo se-HTML unqwenela ukuba nencam yesixhobo. Uphawu oluveliswayo lwencam yesixhobo lulula, nangona lufuna indawo (ngokungagqibekanga, top
lumiselwe yiplagi).
Ngamanye amaxesha ufuna ukongeza ingcebiso yesixhobo kwi-hyperlink esonga imigca emininzi. Ukuziphatha okungagqibekanga kwesixhobo sokufaka iplagi yesixhobo kukuyibeka embindini ngokuthe tye nangokuthe nkqo. Yongeza white-space: nowrap;
kwii-ankile zakho ukunqanda oku.
Xa usebenzisa iincam zesixhobo kwizinto ezingaphakathi kwe .btn-group
okanye kwi .input-group
, okanye kwizinto ezinxulumene netafile ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), kuya kufuneka ukhankanye ukhetho container: 'body'
(olubhaliweyo ngezantsi) ukunqanda iziphumo ebezingalindelekanga ezingafunekiyo (ezifana ne elementi ekhula banzi kunye/ okanye iphulukene neekona zayo ezingqukuva xa incam yesixhobo isenziwa).
Kubasebenzisi abahamba ngebhodi yezitshixo, kwaye ngakumbi abasebenzisi beetekhnoloji ezincedisayo, kuya kufuneka wongeze kuphela iingcebiso zesixhobo kwizinto ezigxile kwi-keyboard ezinje ngamakhonkco, ulawulo lweefom, okanye nayiphi na into engafanelekanga enophawu tabindex="0"
.
Ukongeza incam yesixhobo kwi-a disabled
okanye .disabled
isiqalelo, beka into ngaphakathi kwi-a <div>
kwaye usebenzise incam yesixhobo kuyo <div>
endaweni yoko.
Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-
, njengakwi data-animation=""
.
Igama | Uhlobo | Ukuhlala kukho | Inkcazo |
---|---|---|---|
oopopayi | boolean | yinyani | Faka inguqu ye-CSS fade kwi-tooltip |
isikhongozeli | umtya | bubuxoki | bubuxoki | Ihlomela incam yesixhobo kwinto ethile. Umzekelo: |
ukulibazisa | inombolo | into | 0 | Ukulibazisa ukubonisa kunye nokufihla isixhobo sesixhobo (ms) - akusebenzi kuhlobo lwesixhobo sokuxhobisa Ukuba inani linikiwe, ukulibaziseka kufakwa kuzo zombini ezifihla/umboniso Ulwakhiwo lwento yile: |
html | boolean | bubuxoki | Faka i-HTML kwincam yesixhobo. Ukuba ayiyonyani, text indlela yejQuery izakusetyenziswa ukufaka umxholo kwiDOM. Sebenzisa umbhalo ukuba unexhala malunga nohlaselo lwe-XSS. |
ukubekwa | umtya | umsebenzi | 'phezulu' | Indlela yokubeka inqaku lesixhobo - phezulu | emazantsi | ekhohlo | ekunene | ezizenzekelayo. Xa umsebenzi usetyenziswa ukumisela ukubekwa, ubizwa ngokuba nencam yesixhobo ye-DOM njengengxoxo yayo yokuqala kunye nesiqalo se-DOM node njengesibini sayo. Umxholo |
umkhethi | umtya | bubuxoki | Ukuba umkhethi unikiwe, izixhobo zesixhobo ziya kunikezelwa kwiithagethi ezichaziweyo. Ngokwesiqhelo, oku kusetyenziselwa ukwenza umxholo we-HTML oguquguqukayo ube neengcebiso zesixhobo ezongeziweyo. Bona oku kunye nomzekelo ofundisayo . |
ithempleyithi | umtya | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Isiseko se-HTML esiza kusetyenziswa xa usenza ithiphu yesixhobo. Isixhobo se-tooltip
Isiqalelo sokusonga sangaphandle kufuneka sibe |
isihloko | umtya | umsebenzi | '' | Ixabiso lesihloko esihlala sihleli ukuba Ukuba umsebenzi unikiwe, uya kubizwa kunye |
ukuxhokonxa | umtya | 'hover focus' | Ivuswa njani ithiphu yesixhobo - cofa | jonga | gxila | incwadi yesandla. Unokudlula izichukumisi ezininzi; bahlule ngesithuba. manual ayinakudityaniswa naso nasiphi na esinye isiqhushumbisi. |
indawo yokujonga | umtya | into | umsebenzi | { umkhethi: 'umzimba', ukupakisha: 0} | Igcina incam yesixhobo phakathi kwemida yale elementi. Umzekelo: Ukuba umsebenzi unikiwe, ubizwa ngokuba nesiqalo se-DOM node njengengxoxo yayo yodwa. Umxholo |
Iinketho zeengcebiso zesixhobo ngasinye zingachazwa ngokusetyenziswa kweempawu zedatha, njengoko kucacisiwe ngasentla.
$().tooltip(options)
Iqhoboshela isibambi sesixhobo kwingqokelela yesiqalelo.
.tooltip('show')
Ityhila inqaku lesixhobo. Ibuyisela kumnxebi phambi kokuba incam yesixhobo iboniswe (okt phambi kokuba shown.bs.tooltip
isiganeko senzeke). Oku kuthathwa njenge "manual" yokuqalisa i-tooltip. Iingcebiso zezixhobo ezinezihloko ezibude buziro aziboniswa.
.tooltip('hide')
Ifihla inqaku lesixhobo. Ibuyisela kumnxebi phambi kokuba incam yesixhobo ifihlwe (okt phambi kokuba hidden.bs.tooltip
isiganeko senzeke). Oku kuthathwa njenge "manual" yokuqalisa i-tooltip.
.tooltip('toggle')
Itshintshela incam yesixhobo. Ibuyisela kumnxebi phambi kokuba incam yesixhobo iboniswe okanye ifihlwe (okt phambi kokuba isiganeko shown.bs.tooltip
okanye hidden.bs.tooltip
isiganeko senzeke). Oku kuthathwa njenge "manual" yokuqalisa i-tooltip.
.tooltip('destroy')
Ifihla kwaye itshabalalise isixhobo sesixhobo. Iingcebiso zesixhobo ezisebenzisa unikezelo (ezenziwe ngokusetyenziswa kokhethoselector
) azinakutshatyalaliswa zizodwa kwiziqalelo zokubangela ukuvela .
Uhlobo loMnyhadala | Inkcazo |
---|---|
bonisa.bs.ingcebiso yesixhobo | Esi siganeko sivutha ngokukhawuleza xa show kubizwa indlela yomzekelo. |
ingcebiso.bs.isixhobo | Esi siganeko sigxothwa xa i-tooltip yenziwe yabonakala kumsebenzisi (iya kulinda iinguqu zeCSS ukuba zigqibe). |
fihla.bs.isixhobo sesixhobo | Esi siganeko sigxothwa ngokukhawuleza xa hide indlela yomzekelo ibiziwe. |
ingcebiso.bs.isixhobo esifihliweyo | Esi siganeko siyagxothwa xa isixhobo sigqibile ukufihlwa kumsebenzisi (siya kulinda uguqulo lweCSS lugqibe). |
ingcebiso.bs.isixhobo | Esi siganeko sigxothwa emva show.bs.tooltip kwesiganeko xa ithemplate ye-tooltip yongezwa kwi-DOM. |
Yongeza imixholo emincinci, njengaleyo ikwi-iPad, kuyo nayiphi na into yolwazi lwesibini lwezindlu.
Iipopovers ezinesihloko kunye nomxholo onguziro-ubude azizange ziboniswe.
IiPopovers zifuna iplagi yesixhobo sokufakela isixhobo ukuba ibandakanywe kuguqulelo lwakho lweBootstrap.
Ngezizathu zokusebenza, iSixhobo kunye nePopover data-apis zingenile, okuthetha ukuba kufuneka uziqalise ngokwakho .
Enye indlela yokuqalisa zonke iipopovers kwiphepha inokuba kukukhetha ngophawu lwazo data-toggle
:
Xa usebenzisa i-popovers kwizinto ezingaphakathi kwe- .btn-group
okanye .input-group
, okanye kwizinto ezinxulumene netafile ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), kuya kufuneka ukhankanye ukhetho container: 'body'
(olubhalwe ngezantsi) ukunqanda iziphumo ebezingalindelekanga ezingafunekiyo (ezifana ne elementi ekhula banzi kunye/ okanye ukuphulukana neekona zayo ezingqukuva xa i-popover iqaliswa).
Ukongeza i-popover kwi-a disabled
okanye i- .disabled
elementi, beka into ngaphakathi <div>
kwaye usebenzise i-popover kuloo <div>
ndawo.
Ngamanye amaxesha ufuna ukongeza i-popover kwi-hyperlink esonga imigca emininzi. Ukuziphatha okungagqibekanga kweplagi yepopover kukuyibeka embindini ngokuthe tye nangokuthe nkqo. Yongeza white-space: nowrap;
kwii-ankile zakho ukunqanda oku.
Zine iinketho ezikhoyo: phezulu, ekunene, ezantsi, nasekhohlo zilungelelanisiwe.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sebenzisa i- focus
trigger ukugxotha iipopovers kunqakrazo olulandelayo olwenziwa ngumsebenzisi.
Ngokuziphatha okufanelekileyo kwebrowser kunye neqonga elinqamlezayo, kufuneka usebenzise <a>
ithegi, hayi ithegi , <button>
kwaye kufuneka uquke role="button"
kunye tabindex
neempawu.
Vumela iipopovers ngeJavaScript:
Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-
, njengakwi data-animation=""
.
Igama | Uhlobo | Ukuhlala kukho | Inkcazo |
---|---|---|---|
oopopayi | boolean | yinyani | Faka inguqu ye-CSS fade kwi-popover |
isikhongozeli | umtya | bubuxoki | bubuxoki | Ifakela ipopover kwinto ethile. Umzekelo: |
umxholo | umtya | umsebenzi | '' | Ixabiso lomxholo Ukuba umsebenzi unikiwe, uya kubizwa ngokuba |
ukulibazisa | inombolo | into | 0 | Ukulibazisa ukubonisa kunye nokufihla i-popover (ms) - ayisebenzi kuhlobo lwe-trigger ye-manual Ukuba inani linikiwe, ukulibaziseka kufakwa kuzo zombini ezifihla/umboniso Ulwakhiwo lwento yile: |
html | boolean | bubuxoki | Faka i-HTML kwi-popover. Ukuba ayiyonyani, text indlela yejQuery izakusetyenziswa ukufaka umxholo kwiDOM. Sebenzisa umbhalo ukuba unexhala malunga nohlaselo lwe-XSS. |
ukubekwa | umtya | umsebenzi | 'kunene' | Indlela yokubeka i-popover - phezulu | emazantsi | ekhohlo | ekunene | ezizenzekelayo. Xa umsebenzi usetyenziswa ukumisela ukubekwa, ubizwa nge popover node yeDOM njengengxoxo yayo yokuqala kunye nesiqalo sendawo yeDOM njengeyesibini. Umxholo |
umkhethi | umtya | bubuxoki | Ukuba umkhethi unikiwe, izinto ze popover ziya kunikezelwa kwiithagethi ezichaziweyo. Ngokwesiqhelo, oku kusetyenziselwa ukwenza umxholo weHTML oguquguqukayo ube neepopovers zongezwe. Bona oku kunye nomzekelo ofundisayo . |
ithempleyithi | umtya | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Isiseko se-HTML esinokusetyenziswa xa usenza ipopover. I-popover's I-popover's
Isiqalelo sokusonga sangaphandle kufuneka sibe |
isihloko | umtya | umsebenzi | '' | Ixabiso lesihloko esihlala sihleli ukuba Ukuba umsebenzi unikiwe, uya kubizwa ngokuba |
ukuxhokonxa | umtya | 'cofa' | Ivuswa njani ipopover - cofa | jonga | gxila | incwadi yesandla. Unokudlula izichukumisi ezininzi; bahlule ngesithuba. manual ayinakudityaniswa naso nasiphi na esinye isiqhushumbisi. |
indawo yokujonga | umtya | into | umsebenzi | { umkhethi: 'umzimba', ukupakisha: 0} | Igcina ipopover ngaphakathi kwemida yale elementi. Umzekelo: Ukuba umsebenzi unikiwe, ubizwa ngokuba nesiqalo se-DOM node njengengxoxo yayo yodwa. Umxholo |
Ukhetho lwepopovers nganye lunokuchazwa ngokusetyenziswa kweempawu zedatha, njengoko kucacisiwe ngasentla.
$().popover(options)
Uqalisa iipopovers zengqokelela yezinto.
.popover('show')
Ityhila ukuvela kwento ethile. Ibuyisela kumnxeba phambi kokuba i-popover iboniswe (okt phambi kokuba shown.bs.popover
isiganeko senzeke). Oku kuthathwa njenge "manual" yokuqalisa i-popover. Iipopovers ezinesihloko kunye nomxholo onguziro-ubude azizange ziboniswe.
.popover('hide')
Ifihla imvelaphi yento. Ibuyisela kumnxeba phambi kokuba i-popover ifihliwe (okt phambi kokuba hidden.bs.popover
isiganeko senzeke). Oku kuthathwa njenge "manual" yokuqalisa i-popover.
.popover('toggle')
Itshintsha ipopover yesiqalelo. Ibuyisela kumnxeba phambi kokuba i-popover iboniswe okanye ifihliwe (okt phambi kokuba isiganeko shown.bs.popover
okanye hidden.bs.popover
isiganeko senzeke). Oku kuthathwa njenge "manual" yokuqalisa i-popover.
.popover('destroy')
Ifihla kwaye itshabalalise i-element's popover. Iipopovers ezisebenzisa unikezelo (okuyilwe kusetyenziswa ukhethoselector
) azinakutshatyalaliswa zizodwa kwinzala yezinto ezibangelayo .
Uhlobo loMnyhadala | Inkcazo |
---|---|
bonisa.bs.popover | Esi siganeko sivutha ngokukhawuleza xa show kubizwa indlela yomzekelo. |
ibonisiwe.bs.popover | Esi siganeko sigxothwa xa i-popover yenziwe yabonakala kumsebenzisi (iya kulinda iinguqu zeCSS ukuba zigqibe). |
fihla.bs.popover | Esi siganeko sigxothwa ngokukhawuleza xa hide indlela yomzekelo ibiziwe. |
efihliweyo.bs.popover | Esi siganeko sigxothwa xa i-popover igqibile ukufihlwa kumsebenzisi (iya kulinda iinguqu zeCSS ukuba zigqibe). |
ifakiwe.bs.popover | Esi siganeko sigxothwa emva show.bs.popover kwesiganeko xa i-template ye-popover yongezwa kwi-DOM. |
Yongeza umsebenzi wokugxotha kuyo yonke imiyalezo yesivuseleli ngale plugin.
Xa usebenzisa .close
iqhosha, kufuneka ibe ngumntwana wokuqala .alert-dismissible
kwaye akukho mxholo wombhalo unokuza phambi kwawo kuphawulo.
Guqula le naleya kwaye uzame kwakhona. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Yongeza data-dismiss="alert"
nje kwiqhosha lakho lokuvala ukunika ngokuzenzekelayo umsebenzi okufutshane wesilumkiso. Ukuvala isilumkiso kuyasisusa kwiDOM.
Ukuze izilumkiso zakho zisebenzise oopopayi xa uvala, qiniseka ukuba banazo .fade
kunye .in
neeklasi esele zisetyenziswe kuzo.
$().alert()
Yenza isivuseleli umamele ukwenzela unqakrazo lweziganeko kwizinto eziphumayo data-dismiss="alert"
ezinophawu. (Akuyomfuneko xa usebenzisa idatha-api's auto-initialization.)
$().alert('close')
Ivala isilumkiso ngokusisusa kwiDOM. Ukuba i .fade
kunye .in
neeklasi zikhona kwinto, isivuseleli siya kuphelelwa phambi kokuba sisuswe.
Iplagi yesilumkiso ye-Bootstrap iveza iminyhadala embalwa yokuqhagamshelwa kusetyenziso lwesilumkiso.
Uhlobo loMnyhadala | Inkcazo |
---|---|
vala.bs.alert | Esi siganeko sivutha ngokukhawuleza xa close kubizwa indlela yomzekelo. |
ivaliwe.bs.alert | Esi siganeko sigxothwa xa isivuseleli sivaliwe (siya kulinda iinguqu zeCSS ukuba zigqitywe). |
Yenza ngakumbi ngamaqhosha. Iqhosha lokulawula lixela okanye wenze amaqela amaqhosha amalungu amaninzi njengebar yesixhobo.
IFirefox iqhubeleka nemeko yolawulo lwefomu (ukukhubazeka nokujongwa) kuyo yonke imithwalo yamaphepha . Isisombululo sale nto kukusetyenziswa autocomplete="off"
. Jonga i-bug ye-Mozilla #654072 .
Yongeza data-loading-text="Loading..."
ukusebenzisa imeko yokulayisha kwiqhosha.
Olu phawu luyehliswa ukusukela kwi-v3.3.5 kwaye lususiwe kwi-v4.
Ngenxa yolu mboniso, sisebenzisa data-loading-text
kwaye $().button('loading')
, kodwa ayisiyiyo kuphela imeko onokuyisebenzisa. Bona ngakumbi oku ngezantsi $().button(string)
kuxwebhu .
Yongeza data-toggle="button"
ukuze uvule iqhosha elinye.
.active
kwayearia-pressed="true"
Kumaqhosha aguqulwe ngaphambili, kufuneka wongeze .active
iklasi kunye aria-pressed="true"
nophawu button
kuwe.
Yongeza data-toggle="buttons"
kwibhokisi .btn-group
yokukhangela equlathe okanye amagalelo erediyo ukwenza uguqulelo lwezimbo ezahlukeneyo.
.active
Kukhetho olukhethiweyo, kufuneka wongeze .active
iklasi kwigalelo label
ngokwakho.
Ukuba imeko ekhangelweyo yebhokisi yokukhangela ihlaziywe ngaphandle kokudubula click
isiganeko kwiqhosha (umzekelo ngokusebenzisa <input type="reset">
okanye ngokucwangcisa checked
impahla yegalelo), kuya kufuneka uguqule .active
iklasi kwigalelo label
ngokwakho.
$().button('toggle')
Itshintsha imeko yokutyhala. Inika iqhosha inkangeleko yokuba livuliwe.
$().button('reset')
Seta ngokutsha imo yeqhosha-tshintshanisa okubhaliweyo kumbhalo wokuqala. Le ndlela ayihambelani kwaye ibuyisela phambi kokuba ukusetwa kwakhona kugqitywe.
$().button(string)
Utshintshanisa umbhalo kuyo nayiphi na idatha echaziweyo yokubhaliweyo.
Iplagi eguquguqukayo esebenzisa iiklasi ezimbalwa zokuziphatha ngokulula.
Ukuwa kufuna ukuba iplagin yotshintsho ifakwe kwinguqulelo yakho yeBootstrap.
Cofa amaqhosha angezantsi ukuze ubonise kwaye ufihle enye into ngotshintsho lweklasi:
.collapse
ifihla umxholo.collapsing
isetyenziswa ngexesha lotshintsho.collapse.in
ibonisa umxholoUngasebenzisa ikhonkco kunye href
nophawu, okanye iqhosha elinophawu data-target
loyelelwano. Kuzo zombini ezi meko, data-toggle="collapse"
kuyafuneka.
Yandisa indlela yokuziphatha yokudilika okumiselweyo ukwenza iaccordion kunye necandelo lendawo yolawulo.
Kuyenzeka kwakhona ukutshintsha .panel-body
s kunye .list-group
s.
Qinisekisa ukuba wongeza aria-expanded
kwinto yolawulo. Olu phawu luchaza ngokucacileyo imeko yangoku yezinto ezigotywayo kwizifundi zesikrini kunye nobuchwephesha obuncedisayo obufanayo. Ukuba into eqengqelekayo ivalwe ngokungagqibekanga, kufuneka ibenexabiso le aria-expanded="false"
. Ukuba usete into eqengqelekayo ukuba ivuleke ngokungagqibekanga usebenzisa in
iklasi, misela aria-expanded="true"
kulawulo endaweni yoko. Iplagi iya kuzitshintsha ngokuzenzekela olu phawu ngokusekelwe ekubeni into egotywayo ivuliwe okanye ivaliwe.
Ukongeza, ukuba isiqalelo sakho solawulo sijolise kwinto enye eqengqelekayo - oko kukuthi data-target
uphawu lwalatha id
kumkhethi - unokongeza uphawu olongezelelweyo aria-controls
kwinto yolawulo, equlathe id
into eqengqelekayo. Izifundi zesikrini zanamhlanje kunye neetekhnoloji ezincedisayo ezifanayo zisebenzisa olu phawu ukunika abasebenzisi iindlela ezimfutshane zokuya ngqo kwinto egobekayo ngokwayo.
Iplagin yokudilika isebenzisa iiklasi ezimbalwa ukuphatha ukuphakamisa okunzima:
.collapse
ifihla umxholo.collapse.in
ibonisa umxholo.collapsing
yongezwa xa inguqu iqala, kwaye isuswe xa igqibileEzi klasi zinokufumaneka kwi component-animations.less
.
Yongeza nje data-toggle="collapse"
kwaye a data-target
kwisiqalelo ukwabela ngokuzenzekelayo ulawulo lwento eqengqelekayo. Uphawu data-target
loyelelwano lwamkela umkhethi we-CSS ukuze kufakwe ukutshitshiswa. Qinisekisa ukuba wongeza iklasi collapse
kwinto eqengqelekayo. Ukuba ungathanda ukuba ivuleke ngokungagqibekanga, yongeza udidi olongezelelweyo in
.
Ukongeza ulawulo lweqela olufana ne-accordion kulawulo oluqengqelekayo, yongeza uphawu loyelelwano lwedatha data-parent="#selector"
. Jonga kwidemo ukuze ubone oku kusebenza.
Vula ngesandla nge:
Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-
, njengakwi data-parent=""
.
Igama | uhlobo | ukungagqibeki | inkcazelo |
---|---|---|---|
umzali | umkhethi | bubuxoki | Ukuba umkhethi unikiwe, ngoko ke zonke izinto eziqengqelekayo phantsi komzali ochaziweyo ziya kuvalwa xa le nto iqengqelekayo iboniswa. (ifana nokuziphatha kwe-accordion yendabuko - oku kuxhomekeke panel kwiklasi) |
guqula | boolean | yinyani | Qwalasela into eqengqelekayo kubizo |
.collapse(options)
Yenza umxholo wakho ube yinto eqengqelekayo. Yamkela iinketho ozikhethelayo object
.
.collapse('toggle')
Iguqulela into eqengqelekayo ukuze iboniswe okanye ifihliwe. Ibuyisela kumnxeba phambi kokuba into eqengqelekayo iboniswe okanye ifihliwe (okt phambi kokuba isiganeko shown.bs.collapse
okanye hidden.bs.collapse
isiganeko senzeke).
.collapse('show')
Ibonisa into eqengqelekayo. Ibuyisela kumnxeba phambi kokuba into eqengqelekayo iboniswe (okt phambi kokuba shown.bs.collapse
isiganeko senzeke).
.collapse('hide')
Ifihla into eqengqelekayo. Ibuyisela kumnxebi phambi kokuba into eqengqelekayo ifihlwe (okt phambi kokuba hidden.bs.collapse
isiganeko senzeke).
Iklasi yokuwa yeBootstrap iveza iminyhadala embalwa yokuhuka ekusebenzeni kokuwa.
Uhlobo loMnyhadala | Inkcazo |
---|---|
bonisa.bs.collapse | Esi siganeko sivutha ngokukhawuleza xa show kubizwa indlela yomzekelo. |
ibonisiwe.bs.collapse | Esi siganeko sigxothwa xa into yokudilika yenziwe yabonakala kumsebenzisi (iya kulinda iinguqu zeCSS ukuba zigqibe). |
fihla.bs.coqa | Esi siganeko sigxothwa ngokukhawuleza xa hide indlela sele ibizwa. |
efihliweyo.bs.ukudilika | Esi siganeko sigxothwa xa into yokudilika ifihliwe kumsebenzisi (iya kulinda iinguqu zeCSS ukuba zigqibe). |
Ilungu lomboniso wesilayidi sokuhamba ngebhayisekile kwizinto, njengecarousel. Iicarousels ezifakwe kwindlwane azixhaswanga.
Icandelo le-carousel alihambisani nemigangatho yokufikeleleka. Ukuba ufuna ukuthobela, nceda uqwalasele ezinye iindlela zokubonisa umxholo wakho.
I-Bootstrap isebenzisa kuphela i-CSS3 kwimifanekiso yayo, kodwa i-Internet Explorer 8 & 9 ayizixhasi iimpawu eziyimfuneko zeCSS. Ngoko ke, akukho mifanekiso yenguqu yesilayidi xa usebenzisa ezi bhrawuza. Sigqibe ngabom ukuba singabandakanyi ukusilela okusekwe kwi-jQuery kutshintsho.
Iklasi .active
kufuneka yongezwe kwesinye sezilayidi. Ngaphandle koko, i-carousel ayiyi kubonakala.
Iiklasi .glyphicon .glyphicon-chevron-left
kunye .glyphicon .glyphicon-chevron-right
neeklasi azifuneki ngokuyimfuneko kulawulo. I- Bootstrap ibonelela .icon-prev
kwaye .icon-next
njengezinye iindlela ezicacileyo ze-unicode.
Yongeza ii-captions kwizilayidi zakho ngokulula ngento .carousel-caption
engaphakathi kuyo nayiphi na .item
. Beka malunga nayo nayiphi na i-HTML ekhethiweyo phakathi apho kwaye iya kulungelelaniswa ngokuzenzekelayo kwaye ifomathwe.
Iicarousels zifuna ukusetyenziswa id
kwesikhongozeli esingaphandle (the .carousel
) ukuze ulawulo lwecarousel lusebenze kakuhle. Xa usongeza iicarousel ezininzi, okanye xa utshintsha iicarousel's id
, qiniseka ukuba uhlaziya ulawulo olufanelekileyo.
Sebenzisa iimpawu zedatha ukulawula ngokulula indawo ye-carousel. data-slide
yamkela amagama angundoqo prev
okanye next
, eguqula indawo yesilayidi ngokunxulumene nendawo yaso yangoku. Kungenjalo, sebenzisa data-slide-to
ukudlulisa isalathiso sesilayidi ekrwada kwicarousel data-slide-to="2"
, etshintsha indawo yesilayidi kwisalathiso esithile esiqala nge 0
.
Uphawu data-ride="carousel"
loyelelwano lusetyenziselwa ukuphawula i-carousel njengento ephilayo ukuqala kumthwalo wephepha. Ayinakusetyenziswa ngokudityaniswa ne (ingafunekiyo nengafunekiyo) iJavaScript ecacileyo yokuqaliswa kwecarousel enye.
Fowunela i-carousel ngesandla nge:
Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-
, njengakwi data-interval=""
.
Igama | uhlobo | ukungagqibeki | inkcazelo |
---|---|---|---|
isithuba | inani | 5000 | Ubungakanani bexesha lokulibaziseka phakathi kokubhayisela ngokuzenzekelayo into. Ukuba ayiyonyani, i-carousel ayiyi kujikeleza ngokuzenzekelayo. |
nqumama | umtya | null | "bhabha" | Ukuba imiselwe "hover" , misa ukukhwela ibhayisekile kwicarousel mouseenter kwaye iqalise kwakhona ukukhwela ibhayisekile kwicarousel mouseleave . Ukuba imiselwe ku null , ukundanda phezu kwecarousel akusayi kuyimisa. |
usonga | boolean | yinyani | Nokuba i-carousel kufuneka iqhubeke ijikeleza okanye ibe neendawo zokumisa nzima. |
ikhibhodi | boolean | yinyani | Nokuba i-carousel kufuneka isabele kwiziganeko ze-keyboard. |
.carousel(options)
Uqalisa i-carousel ngeendlela ozikhethelayo object
kwaye uqalise ukukhwela ibhayisekile kwizinto.
.carousel('cycle')
Ujikeleza izinto zecarousel ukusuka ekhohlo ukuya ekunene.
.carousel('pause')
Imisa ikhareshi ekukhweleni ibhayisekile kwizinto.
.carousel(number)
Ukujikelisa i-carousel kwisakhelo esithile (i-0 esekelwe, efana noluhlu).
.carousel('prev')
Imijikelo ukuya kwinto yangaphambili.
.carousel('next')
Biyela ukuya kwinto elandelayo.
Iklasi ye-carousel ye-Bootstrap iveza iminyhadala emibini yokuhuka ekusebenzeni kwecarousel.
Zombini ezi ziganeko zineempawu ezongezelelweyo zilandelayo:
direction
: Isalathiso apho i-carousel ishelela khona (okanye "left"
okanye "right"
).relatedTarget
: Isiqalelo seDOM esityibilikiswa kwindawo njengomba osebenzayo.Zonke iziganeko zecarousel zikhutshwa kwicarousel ngokwayo (okt kwi <div class="carousel">
).
Uhlobo loMnyhadala | Inkcazo |
---|---|
isilayidi.bs.carousel | Esi siganeko sitshatyalaliswa ngoko nangoko xa kusenziwa slide indlela yomzekelo. |
slid.bs.carousel | Esi siganeko sigxothwa xa i-carousel igqibile inguqu yayo yesilayidi. |
Iplagi ye-affix iguqulela position: fixed;
kwaye icime, ilinganisa isiphumo esifunyenwe nge position: sticky;
. Ukuhanjiswa ngasekunene yidemo ephilayo ye-affix plugin.
Sebenzisa i-affix plugin usebenzisa iimpawu zedatha okanye ngesandla ngeJavaScript yakho. Kuzo zombini ezi meko, kufuneka unikeze iCSS yokuma kunye nobubanzi bomxholo wakho ogxunyekiweyo.
Qaphela: Sukusebenzisa iplagi ye-affix kwinto equlathwe kwindawo ebekwe ngokwentelekiso, njengoluhlu olutsaliweyo okanye olutyhiliweyo, ngenxa yeSafari unikezelo bug .
Iplagi ye-affix itshintsha phakathi kweeklasi ezintathu, nganye imele imo ethile: .affix
, .affix-top
, kunye .affix-bottom
. Kufuneka unikeze izimbo, ngaphandle kwe position: fixed;
, .affix
kwezi klasi ngokwakho (ezizimeleyo kule plugin) ukuphatha ezona zikhundla.
Nantsi indlela esebenza ngayo iplagi ye-affix:
.affix-top
ukubonisa into ekwindawo yayo ephezulu kakhulu. Kweli nqanaba akukho kubekwa kweCSS kuyadingeka..affix
kungena endaweni .affix-top
kunye neseti position: fixed;
(ezinikezelwe yiBootstrap's CSS)..affix
yawo .affix-bottom
. Kuba ii-offsets zinokuzikhethela, ukuseta enye kufuna ukuba usete i-CSS efanelekileyo. Kule meko, yongeza position: absolute;
xa kuyimfuneko. Iplagin isebenzisa uphawu lwedatha okanye ukhetho lweJavaScript ukumisela indawo yokubeka into ukusuka apho.Landela la manyathelo angasentla ukuseta i-CSS yakho nokuba yeyiphi kwezi ndlela zokusebenzisa ezingezantsi.
Ukongeza ngokulula i-affix isimilo kuyo nayiphi na into, yongeza data-spy="affix"
nje kwinto ofuna ukuyihlola. Sebenzisa i-offsets ukucacisa ukuba uguqulelwa nini ukuphina into.
Fowunela i-affix plugin usebenzisa iJavaScript:
Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-
, njengakwi data-offset-top="200"
.
Igama | uhlobo | ukungagqibeki | inkcazelo |
---|---|---|---|
i-offset | inombolo | umsebenzi | into | 10 | Iipixels zokulinganisa ukusuka kwiscreen xa ubala indawo yokuskrola. Ukuba inani elinye linikezelwe, i-offset iya kusetyenziswa kumacala omabini aphezulu nasezantsi. Ukubonelela ngeyodwa, ezantsi kunye nephezulu offset ukubonelela nje into offset: { top: 10 } okanye offset: { top: 10, bottom: 5 } . Sebenzisa umsebenzi xa ufuna ukubala ngokuguquguqukayo i-offset. |
ekujoliswe kuko | umkhethi | indawo | jQuery element | window into _ |
Ixela into ekujoliswe kuyo ye-affix. |
.affix(options)
Yenza umxholo wakho ube ngumxholo ogxunyekiweyo. Yamkela iinketho ozikhethelayo object
.
.affix('checkPosition')
Bala kwakhona ubume be-affix ngokusekelwe kwimilinganiselo, indawo, kunye nendawo yokuskrola yezinto ezifanelekileyo. I .affix
, .affix-top
, kunye .affix-bottom
neeklasi zongezwa okanye zisuswe kumxholo oqhotyoshelweyo ngokwemeko entsha. Le ndlela kufuneka ibizwe nanini na xa imilinganiselo yesiqulatho esigxunyekiweyo okanye into ekujoliswe kuyo itshintshiwe, ukuqinisekisa ukubekwa okuchanekileyo komxholo ogxunyekiweyo.
Iplagi ye-affix ye-Bootstrap iveza iziganeko ezimbalwa zokuqhagamshelwa ekusebenzeni kwe-affix.
Uhlobo loMnyhadala | Inkcazo |
---|---|
ncamathela.bs.ncamathisela | Esi siganeko sivutha ngokukhawuleza phambi kokuba i-elementi incanyathiselwe. |
incamathelisa.bs.incamathelisi | Esi siganeko sigxothwa emva kokuba isici sincanyathiselwe. |
ncamathela-phezulu.bs.ncamathisela | Esi siganeko sivutha ngokukhawuleza phambi kokuba into incamatheliswe phezulu. |
incamathelisa-phezulu.bs.incamathelisi | Esi siganeko sigxothwa emva kokuba i-elementi igxunyekwe phezulu. |
ncamathela ezantsi.bs.ncamathisela | Esi siganeko sivutha ngokukhawuleza phambi kokuba into incanyathiselwe ezantsi. |
incamathele-ezantsi.bs.incamathelisi | Esi siganeko sigxothwa emva kokuba icandelo lincanyathiselwe ezantsi. |