I-JavaScript
Philisa izingxenye ze-Bootstrap ngama-plugin e-jQuery ngokwezifiso angaphezu kweshumi nambili. Bafake kalula bonke, noma ngamunye ngamunye.
Philisa izingxenye ze-Bootstrap ngama-plugin e-jQuery ngokwezifiso angaphezu kweshumi nambili. Bafake kalula bonke, noma ngamunye ngamunye.
Ama-plugin angafakwa ngawodwana (kusetshenziswa *.js
amafayela angawodwana e-Bootstrap), noma wonke ngesikhathi esisodwa (usebenzisa bootstrap.js
noma i-minified bootstrap.min.js
).
Kokubili bootstrap.js
futhi bootstrap.min.js
aqukethe wonke ama-plugin efayeleni elilodwa. Faka eyodwa kuphela.
Amanye ama-plugin nezingxenye ze-CSS zincike kwamanye ama-plugin. Uma ufaka ama-plugin ngawodwana, qiniseka ukuthi uhlola lokhu kuncika kumadokhumenti. Futhi qaphela ukuthi wonke ama-plugin ancike ku-jQuery (lokhu kusho ukuthi i-jQuery kufanele ifakwe ngaphambi kwamafayela e-plugin). Xhumana nathibower.json
ukuze ubone ukuthi yiziphi izinguqulo ze-jQuery ezisekelwayo.
Ungasebenzisa wonke ama-plugin e-Bootstrap ngokusebenzisa i-markup API ngaphandle kokubhala umugqa owodwa we-JavaScript. Lena i-API yesigaba sokuqala se-Bootstrap futhi kufanele kube ukucabangela kwakho kokuqala lapho usebenzisa i-plugin.
Sekushiwo lokho, kwezinye izimo kungase kufiseleke ukucisha lokhu kusebenza. Ngakho-ke, sinikeza nekhono lokukhubaza i-API yesibaluli sedatha ngokukhulula yonke imicimbi kudokhumenti enezikhala zamagama data-api
. Lokhu kubukeka kanje:
Okunye, ukuze uqondise i-plugin ethile, vele ufake igama le-plugin njengendawo yegama kanye nendawo yegama yedatha-api kanje:
Ungasebenzisi izibaluli zedatha ezivela kuma-plugin amaningi kusici esifanayo. Isibonelo, inkinobho ayikwazi ukuba nethiphu yamathuluzi futhi iguqule i-modal. Ukuze wenze lokhu, sebenzisa i-elementi yokugoqa.
Sikholelwa futhi ukuthi kufanele ukwazi ukusebenzisa wonke ama-plugin e-Bootstrap nge-JavaScript API. Wonke ama-API asesidlangalaleni ayindlela eyodwa, esebenzisekayo, futhi abuyisela iqoqo osekwenziwe ngalo.
Zonke izindlela kufanele zamukele into ongakhetha kuyo, iyunithi yezinhlamvu eqondise indlela ethile, noma lutho (okuqalisa i-plugin ngokuziphatha okuzenzakalelayo):
I-plugin ngayinye iphinde iveze umakhi wayo ongahluziwe esakhiweni Constructor
: $.fn.popover.Constructor
. Uma ungathanda ukuthola isibonelo esithile se-plugin, sithole ngokuqondile entweni: $('[rel="popover"]').data('popover')
.
Ungashintsha izilungiselelo ezizenzakalelayo ze-plugin ngokulungisa Constructor.DEFAULTS
into ye-plugin:
Kwesinye isikhathi kuyadingeka ukusebenzisa ama-plugin e-Bootstrap nezinye izinhlaka ze-UI. Kulezi zimo, ukungqubuzana kwendawo yamagama kungenzeka ngezikhathi ezithile. Uma lokhu kwenzeka, ungashayela .noConflict
i-plugin ofisa ukubuyisela inani layo.
I-Bootstrap inikeza imicimbi yangokwezifiso yezenzo ezihlukile zama-plugin. Ngokuvamile, lezi ziza ngendlela engapheli kanye nenkathi edlule - lapho okungapheli (isb. show
) kuqalwa ekuqaleni komcimbi, futhi isimo saso sokuhlanganyela esidlule (isib. shown
) siqaliswa lapho kuqedwa isenzo.
Kusukela ngo-3.0.0, yonke imicimbi ye-Bootstrap inezikhala zamagama.
Yonke imicimbi engapheli inikeza preventDefault
ukusebenza. Lokhu kunikeza ikhono lokumisa ukwenziwa kwesenzo ngaphambi kokuthi siqale.
Inguqulo ye-plugin ngayinye ye-Bootstrap's jQuery ingafinyelelwa ngesakhiwo somakhi VERSION
we-plugin. Isibonelo, nge-plugin yethiphu yamathuluzi:
Ama-plugin e-Bootstrap awabuyeli kahle ikakhulukazi uma i-JavaScript ivaliwe. Uma unendaba nolwazi lomsebenzisi kulesi simo, sebenzisa <noscript>
ukuchaza isimo (nokuthi ungayenza kanjani i-JavaScript isebenze kabusha) kubasebenzisi bakho, kanye/noma wengeze okwakho okubuyela emuva ngokwezifiso.
I-Bootstrap ayisekeli ngokusemthethweni amalabhulali e-JavaScript ezinkampani zangaphandle njenge-Prototype noma i-jQuery UI. Ngaphandle .noConflict
kwemicimbi enezikhala zamagama, kungase kube nezinkinga zokusebenzisana okudingeka uzilungise uwedwa.
Ukuze uthole imiphumela elula yoshintsho, faka transition.js
kanye eceleni kwamanye amafayela e-JS. Uma usebenzisa i-comiled (noma minified) bootstrap.js
, asikho isidingo sokufaka lokhu—sekuvele kukhona.
I-Transition.js iwumsizi oyisisekelo transitionEnd
wemicimbi kanye ne-emulator yenguquko ye-CSS. Isetshenziswa amanye ama-plugin ukuhlola ukwesekwa koshintsho lwe-CSS nokubamba izinguquko ezilengayo.
Izinguquko zingakhutshazwa emhlabeni jikelele kusetshenziswa amazwibela alandelayo e-JavaScript, okumele eze ngemva kokuthi transition.js
(noma bootstrap.js
, bootstrap.min.js
njengoba kungaba njalo) isilayishiwe:
Ama-modal ayahlelwa, kodwa aguquguqukayo, imiyalo yengxoxo enobuncane bokusebenza obudingekayo kanye nokuzenzakalelayo okuhlakaniphile.
Qiniseka ukuthi awuvuli i-modal ngenkathi enye isabonakala. Ukubonisa imodeli engaphezu kweyodwa ngesikhathi kudinga ikhodi yangokwezifiso.
Zama njalo ukubeka ikhodi ye-HTML ye-modal endaweni yezinga eliphezulu kudokhumenti yakho ukuze ugweme ezinye izingxenye ezithinta ukubukeka kanye/noma ukusebenza kwe-modal.
Kukhona izexwayiso mayelana nokusebenzisa ama-modal kumadivayisi eselula. Bona amadokhumenti asekela isiphequluli sethu ukuze uthole imininingwane.
Ngenxa yokuthi i-HTML5 iyichaza kanjani i-semantics yayo, autofocus
isibaluli se-HTML asinawo umthelela kumamodeli we-Bootstrap. Ukuze uthole umphumela ofanayo, sebenzisa i-JavaScript yangokwezifiso:
I-modal enikeziwe enesihloko, umzimba, nesethi yezenzo kunyaweni.
Guqula i-modal usebenzisa i-JavaScript ngokuchofoza inkinobho engezansi. Izoshelela phansi bese ifiphala kusukela phezulu kwekhasi.
Qiniseka ukuthi wengeza role="dialog"
futhi aria-labelledby="..."
, ubhekisela kusihloko se-modal, ku- , .modal
nakusona uqobo.role="document"
.modal-dialog
Ukwengeza, unganikeza incazelo yengxoxo yakho ye-modal nge- aria-describedby
on .modal
.
Ukushumeka amavidiyo e-YouTube kumamodeli kudinga i-JavaScript eyengeziwe engekho ku-Bootstrap ukuze kumiswe ukudlalwa ngokuzenzakalelayo nokunye. Bona lokhu okuthunyelwe okuchichima kwesitaki okuwusizo ukuze uthole ulwazi olwengeziwe.
Amamodeli anosayizi ababili abazikhethela, atholakala ngamakilasi okulungisa azobekwa ku- .modal-dialog
.
Kumamodeli avele avele kunokuba afiphele ukuze abukwe, susa .fade
ikilasi kumakhaphu akho e-modal.
Ukuze usebenzise isistimu yegridi ye-Bootstrap ngaphakathi kwe-modal, vele usebenzise i-nest .row
s ngaphakathi .modal-body
bese usebenzisa amakilasi esistimu yegridi evamile.
Unenqwaba yezinkinobho zonke ezicupha i-modal efanayo, enokuqukethwe okuhluke kancane nje? Sebenzisa event.relatedTarget
kanye nezibaluli ze- HTMLdata-*
(mhlawumbe nge-jQuery ) ukuze uguqule okuqukethwe kwe-modal kuye ngokuthi iyiphi inkinobho echofozwe. Bona amadokhumenti e-Modal Events ukuze uthole imininingwane yokuthi relatedTarget
,
I-plugin ye-modal iguqula okuqukethwe kwakho okufihliwe ngokufunwa, ngezibaluli zedatha noma i-JavaScript. Iphinde yengeze .modal-open
ekubhaleni phezu <body>
kokuziphatha kokuskrola okuzenzakalelayo futhi ikhiqize .modal-backdrop
ukuhlinzeka ngendawo yokuchofoza yokucashisa amamodeli abonisiwe lapho uchofozwa ngaphandle kwe-modal.
Yenza kusebenze i-modal ngaphandle kokubhala i-JavaScript. Misa data-toggle="modal"
into yesilawuli, njengenkinobho, kanye ne-a data-target="#foo"
noma href="#foo"
ukuze uqondise i-modal ethile ukuze uyiguqule.
Shayela i-modal ene-id myModal
enomugqa owodwa we-JavaScript:
Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-
, njengaku data-backdrop=""
.
Igama | uhlobo | okuzenzakalelayo | incazelo |
---|---|---|---|
okwasemuva | i-boolean noma intambo'static' |
iqiniso | Kufaka phakathi i-elementi ye-modal-backdrop. Noma, cacisa static okwasemuva okungavali i-modal lapho uchofozwa. |
ikhibhodi | boolean | iqiniso | Ivala i-modal lapho ukhiye we-escape ucindezelwa |
umbukiso | boolean | iqiniso | Ibonisa i-modal lapho iqaliswa. |
kude | indlela | amanga | Le nketho yehlisiwe kusukela ku-v3.3.0 futhi isusiwe ku-v4. Sincoma ukuthi usebenzise isifanekiso sohlangothi lweklayenti noma uhlaka olubophezela idatha, noma ushayele i-jQuery.load ngokwakho. Uma i-URL ekude inikeziwe, okuqukethwe kuzolayishwa kanye ngendlela ye-jQuery |
.modal(options)
Yenza okuqukethwe kwakho kusebenze njengemodeli. Yamukela izinketho ozikhethela object
.
.modal('toggle')
Iguqula ngokwenza i-modal. Ibuyela kofonayo ngaphambi kokuba imodali ikhonjiswe noma ifihlwe (okungukuthi ngaphambi kokuba kwenzeke shown.bs.modal
noma hidden.bs.modal
isigameko).
.modal('show')
Ivula mathupha i-modal. Ibuyela kofonayo ngaphambi kokuthi imodali ikhonjiswe (okungukuthi ngaphambi kokuba shown.bs.modal
umcimbi wenzeke).
.modal('hide')
Ifihla i-modal ngokwenza. Ibuyela kofonayo ngaphambi kokuthi i-modal ifihlekile (okungukuthi ngaphambi kokuthi hidden.bs.modal
kwenzeke umcimbi).
.modal('handleUpdate')
Ilungisa ukuma kwe-modal ukuze imelane nebha yokuskrola uma kwenzeka umuntu evela, okungenza i-modal igxumele kwesokunxele.
Idingeka kuphela lapho ukuphakama kwe-modal kushintsha ngenkathi ivuliwe.
Ikilasi le-modal ye-Bootstrap lidalula imicimbi embalwa ukuze ixhume ekusebenzeni kwe-modal.
Yonke imicimbi ye-modal ixoshwa ku-modal ngokwayo (okungukuthi ku- <div class="modal">
).
Uhlobo Lomcimbi | Incazelo |
---|---|
show.bs.modal | Lo mcimbi uvutha ngokushesha lapho show indlela yesibonelo ibizwa. Uma kubangelwa ukuchofoza, into echofoziwe iyatholakala njengempahla relatedTarget yomcimbi. |
okubonisiwe.bs.modali | Lo mcimbi uyaxoshwa uma i-modal yenziwe yabonakala kumsebenzisi (izolinda ukuthi ukuguqulwa kwe-CSS kuqedwe). Uma kubangelwa ukuchofoza, into echofoziwe iyatholakala njengempahla relatedTarget yomcimbi. |
fihla.bs.modal | Lo mcimbi uxoshwa ngokushesha lapho hide indlela yesibonelo ibizwa. |
kufihliwe.bs.modal | Lo mcimbi uyaxoshwa lapho i-modal isiqedile ukufihlwa kumsebenzisi (izolinda ukuthi ukuguqulwa kwe-CSS kuqedwe). |
loaded.bs.modal | Lo mcimbi uyaxoshwa uma i-modal ilayishe okuqukethwe isebenzisa remote inketho. |
Engeza amamenyu okwehlayo cishe kunoma yini enale plugin elula, okuhlanganisa i-navbar, amathebhu, namaphilisi.
Ngezibaluli zedatha noma i-JavaScript, i-plugin eyehlayo iguqula okuqukethwe okufihliwe (amamenyu okwehliswayo) ngokuguqula .open
ikilasi entweni yohlu lwabazali.
Kumadivayisi eselula, ukuvula okwehliswayo kunezela .dropdown-backdrop
njengendawo yokuthepha yokuvala amamenyu okwehlayo lapho uthepha ngaphandle kwemenyu, imfuneko yosekelo olufanele lwe-iOS. Lokhu kusho ukuthi ukusuka kumenyu eyehlayo evuliwe uye kwehlukile kumenyu yokudonsela phansi kudinga ukuthepha okwengeziwe kuselula.
Qaphela: data-toggle="dropdown"
Isibaluli kuthenjelwe kuso ekuvaleni amamenyu okwehlayo ezingeni lesicelo, ngakho-ke kuwumqondo omuhle ukusisebenzisa njalo.
Engeza data-toggle="dropdown"
kusixhumanisi noma inkinobho ukuze uguqule okwehliswayo.
Ukuze ugcine ama-URL eqinile ngezinkinobho zesixhumanisi, sebenzisa data-target
isibaluli esikhundleni se- href="#"
.
Shayela okwehliswayo nge-JavaScript:
data-toggle="dropdown"
kusadingekaKungakhathaliseki ukuthi ushayela okwehliswayo ucingo nge-JavaScript noma esikhundleni salokho sebenzisa i-data-api, data-toggle="dropdown"
kuyadingeka njalo ukuthi ube khona kusici sokuqala sokwehliswayo.
Lutho
$().dropdown('toggle')
Iguqula imenyu eyehlayo ye-navbar enikeziwe noma ukuzulazula okunethebhu.
Yonke imicimbi eyehliswayo ixoshwa engxenyeni .dropdown-menu
engumzali.
Yonke imicimbi yokudonsela phansi inendawo relatedTarget
, inani layo eliyi-elementi yehange yokuguqula.
Uhlobo Lomcimbi | Incazelo |
---|---|
show.bs.okwehlayo | Lo mcimbi uvutha ngokushesha lapho indlela yesibonelo sombukiso ibizwa. |
okubonisiwe.bs.okwehlayo | Lo mcimbi uxoshwa lapho okwehliswayo kwenziwe kwabonakala kumsebenzisi (sizolinda izinguquko ze-CSS, ukuze ziqedele). |
fihla.bs.okwehlayo | Lo mcimbi uxoshwa ngokushesha lapho indlela yokufihla isibiziwe. |
eyehlayo.bs.efihliwe | Lo mcimbi uxoshwa lapho okwehliswayo sekuqedile ukufihlwa kumsebenzisi (kuzolinda izinguquko ze-CSS, ukuze ziqedele). |
I-plugin ye-ScrollSpy ingeyokuvuselela ngokuzenzakalelayo okuhlosiwe kwe-nav ngokusekelwe endaweni yokuskrola. Skrola indawo engezansi kwe-navbar bese ubuka ukuguquka kwekilasi elisebenzayo. Izinto ezincanyana zokwehla zizogqanyiswa nazo.
I-Ad leggings keytar, i-brunch id art party dolor labore. I-Pitchfork ineminyaka engu-nim lo-fi ngaphambi kokuthi bathengise yonke into. Amalungelo ebhayisikili e-Tumblr epulazini ukuya etafuleni noma yini. I-Cardigan ene-anim keffiyeh carles. Indlwana yezithombe ka-Velit seitan mcsweeney 3 wolf moon irure. Ijezi le-Cosby lomo jean shorts, i-williamsburg hoodie minim qui cishe awukaze uzwe ngazo et cardigan trust fund culpa biodiesel wes anderson aesthetic. U-Nihil one-tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Veniam marfa amadevu skateboard, adipisicing fugiat velit pitchfork intshebe. Freegan intshebe aliqua cupidatat mcsweeney's vero. Cupidatat ezine loko nisi, ea helvetica nulla carles. Iloli lokudla lejezi le-cosby eline-tattoo, i-mcsweeney's quis non freegan vinyl. I-Lo-fi wes anderson +1 sartorial. I-Carles non-aesthetic exercitation i-quis gentrify. I-Brooklyn adipisicing craft beer vice keytar deserunt.
I-Occaecat commodo aliqua deelectus. I-Fap craft beer deserunt skateboard ea. Amalungelo ebhayisikili e-Lomo adipisicing banh mi, velit ea sunt next level locavore ikhofi yemvelaphi eyodwa e-magna veniam. I-vinyl id yempilo ephezulu, i-echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. I-Cred ex in, i-iphone eqhubekayo deelectus consectetur fanny pack.
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 messenger bag marfa whatever deelectus food truck. Sapiente synth id imaginenda. I-Locavore sed helvetica cliche irony, ama-thundercats cishe awukaze uzwe ngawo consequat hoodie gluten-free lo-fi fap aliquip. I-Labore elit placeat ngaphambi kokuba ithengiswe, u-terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. I-Cardigan craft beer seitan readymade velit. I-VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
Izixhumanisi ze-Navbar kufanele zibe neziqondiso ze-id ezingaxazululeka. Isibonelo, <a href="#home">home</a>
okumele kuhambisane nento ethize ku-DOM efana ne- <div id="home"></div>
.
:visible
Izinto ezingaqondisiwe azinakiweIzinto eziqondiwe ezingahambisani :visible
ne-jQuery zizozitshwa futhi izinto zazo ze-nav ezihambisanayo azisoze zagqanyiswa.
Kungakhathaliseki ukuthi iyiphi indlela yokuqalisa, i-scrollspy idinga ukusetshenziswa position: relative;
kwento oyihlolayo. Ezimweni eziningi lokhu kuyi- <body>
. Lapho uskrola ezintweni ngaphandle kwe- <body>
, qiniseka ukuthi height
unesethi futhi overflow-y: scroll;
uyasebenza.
Ukwengeza kalula impatho ye-scrollspy ekuzulazuleni kwe data-spy="scroll"
-topbar yakho, engeza entweni ofuna ukuyihlola (imvamisa lokhu kuzoba yi- <body>
). Bese wengeza data-target
isibaluli nge-ID noma isigaba sesici esingumzali sanoma iyiphi .nav
ingxenye ye-Bootstrap.
Ngemva kokungeza position: relative;
ku-CSS yakho, shayela i-scrollspy nge-JavaScript:
.scrollspy('refresh')
Uma usebenzisa i-scrollspy ngokuhambisana nokwengeza noma ukususa izakhi ku-DOM, uzodinga ukushayela indlela yokuvuselela kanje:
Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-
, njengaku data-offset=""
.
Igama | uhlobo | okuzenzakalelayo | incazelo |
---|---|---|---|
offset | inombolo | 10 | Amaphikseli okufanele uwasuse ukusuka phezulu uma ubala indawo yokuskrola. |
Uhlobo Lomcimbi | Incazelo |
---|---|
activate.bs.scrollspy | Lo mcimbi uvutha noma nini lapho into entsha yenziwa isebenze i-scrollspy. |
Engeza ukusebenza kwethebhu esheshayo, eguqukayo ukuze udlule kumafasitelana wokuqukethwe kwasendaweni, ngisho namamenyu okwehlayo. Amathebhu afakwe isidleke awasekelwe.
I-denim eluhlaza cishe awuzange uzwe ngabo izikhindi ze-jean Austin. I-Nesciunt tofu stumptown aliqua, i-retro synth master cleanse. Amadevu cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Ijezi le-Cosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, 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 inweba ingxenye yokuzulazula enamathebhu ukuze kwengeze izindawo ezibambekayo.
Nika amandla amathebhu aphathekayo nge-JavaScript (ithebhu ngayinye idinga ukwenziwa isebenze ngayodwa):
Ungavula amathebhu ngamanye ngezindlela ezimbalwa:
Ungakwazi ukuvula ithebhu noma ukuzulazula kwephilisi ngaphandle kokubhala noma iyiphi i-JavaScript ngokucacisa data-toggle="tab"
noma ngento data-toggle="pill"
ethile. Ukwengeza i- nav
kanye nav-tabs
namakilasi kuthebhu ul
kuzosebenzisa isitayela sethebhu ye-Bootstrap , kuyilapho kwengeza ethi nav
kanye nav-pills
namakilasi kuzosebenzisa isitayela sephilisi .
Ukuze wenze amathebhu afiphale, .fade
engeza .tab-pane
. Ifasitelana lethebhu yokuqala kufanele futhi .in
lenze okuqukethwe kokuqala kubonakale.
$().tab
Yenza i-elementi yethebhu isebenze nesiqukathi sokuqukethwe. Ithebhu kufanele ibe no-a data-target
noma i href
-container node ku-DOM. Kulezi zibonelo ezingenhla, amathebhu angu- <a>
s data-toggle="tab"
anezibaluli.
.tab('show')
Ikhetha ithebhu enikeziwe futhi ibonise okuqukethwe kwayo okuhlobene. Noma iyiphi enye ithebhu eyayikhethwe ngaphambilini iyayekwa ukukhethwa futhi okuqukethwe kwayo okuhlobene kuyafihlwa. Ibuyela kofonayo ngaphambi kokuba kuboniswe ifasitelana lethebhu (okungukuthi ngaphambi kokuba shown.bs.tab
kwenzeke umcimbi).
Uma ubonisa ithebhu entsha, izehlakalo zivutha ngokulandelana okulandelayo:
hide.bs.tab
(kuthebhu esebenzayo yamanje)show.bs.tab
(kuthebhu ezoboniswa)hidden.bs.tab
(kuthebhu esebenzayo yangaphambilini, efanayo hide.bs.tab
neyomcimbi)shown.bs.tab
(kuthebhu esanda kuboniswa, efanayo show.bs.tab
neyomcimbi)Uma ingekho ithebhu ebivele iyasebenza, kuzosho ukuthi i- hide.bs.tab
nemicimbi hidden.bs.tab
ngeke kuxoshwe.
Uhlobo Lomcimbi | Incazelo |
---|---|
show.bs.tab | Lo mcimbi uvutha embukisweni wethebhu, kodwa ngaphambi kokuthi kuboniswe ithebhu entsha. Sebenzisa event.target futhi event.relatedTarget uqondise ithebhu esebenzayo kanye nethebhu esebenzayo yangaphambilini (uma ikhona) ngokulandelanayo. |
ithebhu.bs.ebonisiwe | Lo mcimbi uvutha embukisweni wethebhu ngemva kokuthi ithebhu isibonisiwe. Sebenzisa event.target futhi event.relatedTarget uqondise ithebhu esebenzayo kanye nethebhu esebenzayo yangaphambilini (uma ikhona) ngokulandelanayo. |
fihla.bs.tab | Lo mcimbi uvutha lapho ithebhu entsha izoboniswa (futhi ngaleyo ndlela ithebhu yangaphambilini esebenzayo izofihlwa). Sebenzisa event.target futhi event.relatedTarget uqondise ithebhu esebenzayo yamanje kanye nethebhu entsha ezosebenza maduze, ngokulandelana. |
ithebhu.bs.efihliwe | Lo mcimbi uvutha ngemva kokuboniswa kwethebhu entsha (futhi ngaleyo ndlela ithebhu yangaphambilini esebenzayo ifihliwe). Sebenzisa event.target futhi event.relatedTarget uqondise ithebhu esebenzayo yangaphambilini kanye nethebhu entsha esebenzayo, ngokulandelanayo. |
Igqugquzelwe i-plugin enhle kakhulu ye-jQuery.tipsy ebhalwe ngu-Jason Frame; Amathuluzi ayinguqulo ebuyekeziwe, engancikile ezithombeni, sebenzisa i-CSS3 ukuze uthole ukugqwayiza, kanye nezibaluli zedatha zokulondoloza isihloko sendawo.
Amathuluzi anezihloko zobude obunguziro awaboniswa.
Hambisa phezulu kwezixhumanisi ezingezansi ukuze ubone amathuluzi:
Amabhulukwe aqinile ezingeni elilandelayo keffiyeh cishe awuzwanga ngawo. Photo booth intshebe eluhlaza yedenim letterpress vegan messenger bag stumptown. Isambatho se-farm-to-table seitan, i-mcsweeney's fixie sustainable quinoa 8-bit american apparel ine- terry richardson vinyl chambray. Izintshebe stumptown, cardigans banh mi lomo thundercats. I-Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. Ingcweti ehlekisayo ngempela whatever keytar , i-movie-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
Kunezinketho ezine ezitholakalayo: kuqondaniswe phezulu, kwesokudla, phansi, nesobunxele.
Ngezizathu zokusebenza, i-Tooltip ne-Popover data-apis ziyangena, okusho ukuthi kufanele uziqalise ngokwakho .
Enye indlela yokuqalisa wonke amathiphu ekhasini kuzoba ukuwakhetha ngesibaluli sawo data-toggle
:
I-plugin yethulithiphu ikhiqiza okuqukethwe kanye nemakhaphu ngokufunwayo, futhi ngokuzenzakalelayo beka izeluleko zamathuluzi ngemva kwesici sokucupha.
Qalisa ithiphu yamathuluzi nge-JavaScript:
Imakhaphu edingekayo yethiphu yamathuluzi iyisibaluli kuphela data
futhi title
engxenyeni ye-HTML ofisa ukuba nayo ithiphu. Imakhaphu ekhiqiziwe yethiphu yamathuluzi ilula, nakuba idinga indawo (ngokuzenzakalelayo, isethwe top
yi-plugin).
Kwesinye isikhathi ufuna ukwengeza ithiphu kusixhumanisi esigoqa imigqa eminingi. Ukuziphatha okuzenzakalelayo kwe-plugin ye-tooltip ukuyibeka phakathi nendawo ngokuvundlile nangokuqondile. Engeza white-space: nowrap;
kumahange akho ukuze ugweme lokhu.
Uma usebenzisa amathiphu ezintweni ezingaphakathi kwe-a .btn-group
noma .input-group
, noma ezintweni ezihlobene nethebula ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), kuzodingeka ucacise inketho container: 'body'
(ebhalwe ngezansi) ukuze ugweme imiphumela emibi engadingeki (njengento ekhula iba banzi kanye/ noma ilahlekelwe amakhona ayindilinga uma ithiphu yamathuluzi icushwa).
Kubasebenzisi abazulazula ngekhibhodi, futhi ikakhulukazi abasebenzisi bobuchwepheshe obusizayo, kufanele wengeze kuphela izeluleko zamathuluzi ezintweni ezigxile kukhibhodi ezifana nezixhumanisi, izilawuli zefomu, nanoma iyiphi into engaqondakali enesibaluli tabindex="0"
.
Ukwengeza ithiphu entweni disabled
noma ku- .disabled
elementi, faka i-elementi ngaphakathi kwe-a <div>
futhi usebenzise ithiphu yamathuluzi kulokho <div>
esikhundleni salokho.
Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-
, njengaku data-animation=""
.
Igama | Uhlobo | Okuzenzakalelayo | Incazelo |
---|---|---|---|
izithombe | boolean | iqiniso | Faka inguquko ye-CSS fade ethiphu yamathuluzi |
isitsha | umucu | amanga | amanga | Yengeza ithiphu entweni ethile. Isibonelo: |
ukubambezela | inombolo | into | 0 | Ukubambezeleka ukubonisa nokufihla ithiphu yamathuluzi (ms) - akusebenzi ohlotsheni lwesicupho okwenziwa ngesandla Uma inombolo inikezwa, ukubambezeleka kusetshenziswa kukho kokubili ukufihla/umbukiso Isakhiwo sento sithi: |
html | boolean | amanga | Faka i-HTML ethiphu yamathuluzi. Uma kungamanga, indlela ye-jQuery text izosetshenziswa ukufaka okuqukethwe ku-DOM. Sebenzisa umbhalo uma ukhathazekile ngokuhlaselwa kwe-XSS. |
ukubekwa | umucu | umsebenzi | 'phezulu' | Indlela yokubeka ithiphu yamathuluzi - phezulu | phansi | kwesokunxele | kulungile | okuzenzakalelayo. Uma umsebenzi usetshenziselwa ukunquma ukubekwa, ubizwa ngenodi yethulithiphu ye-DOM njenge-agumenti yayo yokuqala kanye nenodi yento ecuphayo ethi DOM njengesibili. Umongo |
isikhethi | umucu | amanga | Uma kunikezwa isikhethi, izinto zethiphu yamathuluzi zizodluliselwa kulokho okuhlosiwe okucacisiwe. Empeleni, lokhu kusetshenziselwa ukunika amandla okuqukethwe kwe-HTML okuguquguqukayo ukuthi kwengezwe amathiphu. Bheka lokhu kanye nesibonelo esifundisayo . |
isifanekiso | umucu | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Isisekelo se-HTML ongasisebenzisa lapho udala ithiphu yamathuluzi. I-tooltip
I-elementi yokugoqa engaphandle kufanele ibe |
isihloko | umucu | umsebenzi | '' | Inani lesihloko elizenzakalelayo uma Uma umsebenzi unikiwe, uzobizwa |
inhlamvu | umucu | 'hover focus' | Ithiphu yamathuluzi icushwa kanjani - chofoza | hamba | gxila | imanuwali. Ungadlula izibangeli eziningi; abahlukanise ngesikhala. manual ayikwazi ukuhlanganiswa nanoma yisiphi esinye isiqhumiso. |
indawo yokubuka | umucu | into | umsebenzi | { isikhethi: 'body', padding: 0} | Igcina ithiphu yamathuluzi ngaphakathi kwemingcele yale elementi. Isibonelo: Uma umsebenzi unikiwe, ubizwa ngenodi yento ecuphayo ethi DOM njengokuwukuphela kwempikiswano yayo. Umongo |
Izinketho zamathiphu wamathuluzi ngamanye zingacaciswa ngokusebenzisa izibaluli zedatha, njengoba kuchazwe ngenhla.
$().tooltip(options)
Inamathisela isibambi sethulithiphu eqoqweni lesici.
.tooltip('show')
Iveza ithulithiphu yento ethile. Ibuyela kofonayo ngaphambi kokuthi ithiphu yamathuluzi iboniswe (okungukuthi ngaphambi kokuthi shown.bs.tooltip
kwenzeke umcimbi). Lokhu kuthathwa njengokucupha "okuzenzela" kwethiphu yamathuluzi. Amathuluzi anezihloko zobude obunguziro awaboniswa.
.tooltip('hide')
Ifihla ithiphu yento ethile. Ibuyela kofonayo ngaphambi kokuthi ithiphu yamathuluzi ifihlekile (okungukuthi ngaphambi kokuthi hidden.bs.tooltip
kwenzeke umcimbi). Lokhu kuthathwa njengokucupha "okuzenzela" kwethiphu yamathuluzi.
.tooltip('toggle')
Iguqula ithiphu lethuluzi le-elementi. Ibuyela kofonayo ngaphambi kokuthi ithiphu yamathuluzi iboniswe noma ifihlwe (okungukuthi ngaphambi kokuthi kwenzeke shown.bs.tooltip
noma hidden.bs.tooltip
kwenzeke). Lokhu kuthathwa njengokucupha "okuzenzela" kwethiphu yamathuluzi.
.tooltip('destroy')
Ifihla futhi ibhubhise ithiphu yento ethile. Amathuluzi asebenzisa ukuthunyelwa (okudalwe kusetshenziswa inkethoselector
) awakwazi ukucekelwa phansi ngamanye ezintweni ezibangela inzalo .
Uhlobo Lomcimbi | Incazelo |
---|---|
show.bs.tooltip | Lo mcimbi uvutha ngokushesha lapho show indlela yesibonelo ibizwa. |
ikhonjisiwe.bs.ithulithiphu | Lo mcimbi uyaxoshwa uma ithiphu yethuluzi yenziwe yabonakala kumsebenzisi (sizolinda ukuthi izinguquko ze-CSS ziqedele). |
fihla.bs.ithulithiphu | Lo mcimbi uxoshwa ngokushesha lapho hide indlela yesibonelo ibizwa. |
ifihlwe.bs.ithulithiphu | Lo mcimbi uyaxoshwa uma ithiphu yamathuluzi isiqedile ukufihlwa kumsebenzisi (sizolinda ukuthi izinguquko ze-CSS ziqedele). |
inserted.bs.tooltip | Lo mcimbi uxoshwa ngemva show.bs.tooltip komcimbi lapho ithempulethi yethulithiphu yengezwe ku-DOM. |
Engeza izimbondela ezincane zokuqukethwe, njengalezo eziku-iPad, kunoma iyiphi into ukuze uthole ulwazi lwesibili lwezindlu.
Ama-Popovers kokubili isihloko nokuqukethwe kwawo kunguziro-ubude akukaze kuboniswe.
Ama-Popovers adinga i- plugin yethiphu yamathuluzi ukuthi ifakwe enguqulweni yakho ye-Bootstrap.
Ngezizathu zokusebenza, i-Tooltip ne-Popover data-apis ziyangena, okusho ukuthi kufanele uziqalise ngokwakho .
Enye indlela yokuqalisa wonke ama-popover ekhasini kungaba ukuwakhetha ngesibaluli sawo data-toggle
:
Uma usebenzisa ama-popovers ezintweni ezingaphakathi kwe-a .btn-group
noma .input-group
, noma ezintweni ezihlobene nethebula ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), kuzodingeka ucacise inketho container: 'body'
(ebhalwe ngezansi) ukuze ugweme imiphumela emibi engadingeki (njengento ekhula iba banzi kanye/ noma ukulahlekelwa amakhona ayo ayindilinga lapho i-popover iqaliswa).
Ukuze ungeze i-popover kokuthile disabled
noma i- .disabled
elementi, faka i-elementi ngaphakathi kwe-a <div>
futhi usebenzise i-popover kulokho <div>
esikhundleni salokho.
Kwesinye isikhathi ufuna ukwengeza i-popover kusixhumanisi esigoqa imigqa eminingi. Ukuziphatha okuzenzakalelayo kwe-plugin ye-popover ukuyibeka phakathi nendawo ngokuvundlile nangokuqondile. Engeza white-space: nowrap;
kumahange akho ukuze ugweme lokhu.
Kunezinketho ezine ezitholakalayo: kuqondaniswe phezulu, kwesokudla, phansi, nesobunxele.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. I-Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. I-Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. I-Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. I-Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sebenzisa i- focus
trigger ukuze ucashise ama-popover ngokuchofoza okulandelayo okwenziwa umsebenzisi.
Ngokuziphatha okufanele kwesiphequluli esiphambene nenkundla, kufanele usebenzise <a>
umaka, hhayi umaka <button>
, futhi kufanele ufake role="button"
kanye tabindex
nezibaluli.
Nika amandla ama-popovers nge-JavaScript:
Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-
, njengaku data-animation=""
.
Igama | Uhlobo | Okuzenzakalelayo | Incazelo |
---|---|---|---|
izithombe | boolean | iqiniso | Faka inguquko ye-CSS fade ku-popover |
isitsha | umucu | amanga | amanga | Yengeza i-popover kusici esithile. Isibonelo: |
okuqukethwe | umucu | umsebenzi | '' | Inani lokuqukethwe elizenzakalelayo uma Uma umsebenzi unikiwe, uzobizwa |
ukubambezela | inombolo | into | 0 | Ukubambezeleka ukubonisa nokufihla i-popover (ms) - akusebenzi ohlotsheni lwe-trigger okwenziwa ngesandla Uma inombolo inikezwa, ukubambezeleka kusetshenziswa kukho kokubili ukufihla/umbukiso Isakhiwo sento sithi: |
html | boolean | amanga | Faka i-HTML ku-popover. Uma kungamanga, indlela ye-jQuery text izosetshenziswa ukufaka okuqukethwe ku-DOM. Sebenzisa umbhalo uma ukhathazekile ngokuhlaselwa kwe-XSS. |
ukubekwa | umucu | umsebenzi | 'kwesokudla' | Indlela yokubeka i-popover - phezulu | phansi | kwesokunxele | kulungile | okuzenzakalelayo. Uma umsebenzi usetshenziswa ukunquma ukubekwa, ubizwa nge-popover node ye-DOM njenge-agumenti yayo yokuqala kanye nenodi yesici esicuphayo esithi DOM njengesibili. Umongo |
isikhethi | umucu | amanga | Uma kunikezwa isikhethi, izinto ze-popover zizothunyelwa kokuhlosiwe okucacisiwe. Empeleni, lokhu kusetshenziselwa ukunika amandla okuqukethwe kwe-HTML okuguquguqukayo ukuze kwengezwe ama-popover. Bheka lokhu kanye nesibonelo esifundisayo . |
isifanekiso | umucu | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Isisekelo se-HTML ongasisebenzisa lapho udala i-popover. Ama-popover Ama-popover
I-elementi yokugoqa engaphandle kufanele ibe |
isihloko | umucu | umsebenzi | '' | Inani lesihloko elizenzakalelayo uma Uma umsebenzi unikiwe, uzobizwa |
inhlamvu | umucu | 'chofoza' | I-popover iqalwa kanjani - chofoza | hamba | gxila | imanuwali. Ungadlula izibangeli eziningi; abahlukanise ngesikhala. manual ayikwazi ukuhlanganiswa nanoma yisiphi esinye isiqhumiso. |
indawo yokubuka | umucu | into | umsebenzi | { isikhethi: 'body', padding: 0} | Igcina i-popover ngaphakathi kwemingcele yale elementi. Isibonelo: Uma umsebenzi unikiwe, ubizwa ngenodi yento ecuphayo ethi DOM njengokuwukuphela kwempikiswano yayo. Umongo |
Izinketho ze-popover ngayinye zingacaciswa ngokusebenzisa izibaluli zedatha, njengoba kuchazwe ngenhla.
$().popover(options)
Iqalisa ama-popover eqoqo le-elementi.
.popover('show')
Iveza i-popover yento. Ibuyela kofonayo ngaphambi kokuthi i-popover iboniswe (okungukuthi ngaphambi kokuba shown.bs.popover
umcimbi wenzeke). Lokhu kuthathwa "njengokwenza ngesandla" ukucupha kwe-popover. Ama-Popovers kokubili isihloko nokuqukethwe kwawo kunguziro-ubude akukaze kuboniswe.
.popover('hide')
Ifihla i-popover yento. Ibuyela kofonayo ngaphambi kokuthi i-popover ifihlekile (okungukuthi ngaphambi kokuba hidden.bs.popover
umcimbi wenzeke). Lokhu kuthathwa "njengokwenza ngesandla" ukucupha kwe-popover.
.popover('toggle')
Iguqula i-popover yento. Ibuyela kofonayo ngaphambi kokuthi i-popover iboniswe noma ifihlwe (okungukuthi ngaphambi kokuthi kwenzeke shown.bs.popover
noma hidden.bs.popover
kwenzeke). Lokhu kuthathwa "njengokwenza ngesandla" ukucupha kwe-popover.
.popover('destroy')
Ifihla futhi icekele phansi i-popover yento. Ama-Popovers asebenzisa ukuthunyelwa (okudalwe kusetshenziswa inkethoselector
) awakwazi ukucekelwa phansi ngamanye ezintweni ezibangela inzalo .
Uhlobo Lomcimbi | Incazelo |
---|---|
show.bs.popover | Lo mcimbi uvutha ngokushesha lapho show indlela yesibonelo ibizwa. |
kubonisiwe.bs.popover | Lo mcimbi uxoshwa lapho i-popover yenziwe yabonakala kumsebenzisi (izolinda ukuthi izinguquko ze-CSS ziqedele). |
fihla.bs.popover | Lo mcimbi uxoshwa ngokushesha lapho hide indlela yesibonelo ibizwa. |
kufihliwe.bs.popover | Lo mcimbi uyaxoshwa uma i-popover isiqedile ukufihlwa kumsebenzisi (izolinda ukuthi izinguquko ze-CSS ziqedele). |
kufakiwe.bs.popover | Lo mcimbi uxoshwa ngemva show.bs.popover komcimbi lapho isifanekiso se-popover sengeziwe ku-DOM. |
Engeza umsebenzi wokucashisa kuyo yonke imilayezo yesixwayiso enale plugin.
Uma usebenzisa .close
inkinobho, kufanele kube ingane yokuqala .alert-dismissible
futhi akukho okuqukethwe kombhalo okungafika ngaphambi kwayo kumakhaphu.
Shintsha lokhu nalokhu bese uzama futhi. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. I-Cras mattis consectetur purus sit amet fermentum.
Vele ungeze data-dismiss="alert"
enkinobheni yakho yokuvala ukuze unikeze ngokuzenzakalelayo ukusebenza kwesexwayiso sokuvala. Ukuvala isexwayiso kusisusa ku-DOM.
Ukuze izexwayiso zakho zisebenzise ukugqwayiza lapho uvala, qiniseka ukuthi zinayo .fade
kanye .in
namakilasi asesetshenzisiwe kuzo.
$().alert()
Yenza isixwayiso silalele imicimbi yokuchofoza ezintweni eziphumayo data-dismiss="alert"
ezinesibaluli. (Akudingekile uma usebenzisa i-auto-initialization ye-data-api.)
$().alert('close')
Ivala isexwayiso ngokusisusa ku-DOM. Uma i- .fade
kanye .in
namakilasi ekhona engxenyeni, isexwayiso sizofiphala ngaphambi kokuthi sisuswe.
I-plugin yesixwayiso ye-Bootstrap iveza imicimbi embalwa ukuze ixhumeke ekusebenzeni kwesixwayiso.
Uhlobo Lomcimbi | Incazelo |
---|---|
vala.bs.sexwayiso | Lo mcimbi uvutha ngokushesha lapho close indlela yesibonelo ibizwa. |
ivaliwe.bs.sexwayiso | Lo mcimbi uyaxoshwa uma isaziso sivaliwe (sizolinda ukuthi izinguquko ze-CSS ziqedele). |
Yenza okwengeziwe ngezinkinobho. Inkinobho yokulawula ithi noma dala amaqembu ezinkinobho zezingxenye ezengeziwe njengamabha wamathuluzi.
IFirefox iphikelela nezimo zokulawula amafomu (ukukhubazeka kanye nokuhlolwa) kuwo wonke ukulayisha kwamakhasi . Isixazululo salokhu ukusetshenziswa autocomplete="off"
. Bona iphutha le-Mozilla #654072 .
Engeza data-loading-text="Loading..."
ukuze usebenzise isimo sokulayisha enkinobho.
Lesi sici sihoxisiwe kusukela ku-v3.3.5 futhi sikhishiwe ku-v4.
Ngenxa yalo mboniso, sisebenzisa data-loading-text
futhi $().button('loading')
, kodwa akusona isimo kuphela ongasisebenzisa. Bona okwengeziwe ngalokhu ngezansi $().button(string)
emibhalweni .
Engeza data-toggle="button"
ukuze wenze kusebenze ukuguqula inkinobho eyodwa.
.active
futhiaria-pressed="true"
Ezinkinobho eziguqulwe ngaphambilini, kufanele wengeze .active
ikilasi aria-pressed="true"
nesibaluli button
kuwena.
Engeza data-toggle="buttons"
ebhokisini .btn-group
lokuhlola eliqukethe noma okokufaka kwerediyo ukuze unike amandla ukuguqula izitayela ezilandelanayo.
.active
Ngezinketho ezikhethiwe ngaphambili, kufanele wengeze .active
ikilasi kokokufaka label
ngokwakho.
Uma isimo esithikhiwe senkinobho yebhokisi lokuhlola sibuyekezwa ngaphandle kokudubula click
umcimbi enkinobho (isb ngokusebenzisa <input type="reset">
noma ngokusetha checked
indawo yokokufaka), uzodinga ukuguqula .active
ikilasi kokokufaka label
ngokwakho.
$().button('toggle')
Iguqula isimo sohlelo. Inikeza inkinobho ukubonakala sengathi yenziwe yasebenza.
$().button('reset')
Isetha kabusha isimo senkinobho - ishintsha umbhalo ube umbhalo wokuqala. Le ndlela ayivumelanisi futhi ibuyela ngaphambi kokuthi ukusetha kabusha kuqedwe ngempela.
$().button(string)
Ishintsha umbhalo ube nanoma yisiphi isimo sombhalo esichazwe yidatha.
I-plugin eguquguqukayo esebenzisa idlanzana lamakilasi ukuze kube lula ukuguqula ukuziphatha.
Ukugoqa kudinga i- plugin yoshintsho ukuthi ifakwe enguqulweni yakho ye-Bootstrap.
Chofoza izinkinobho ezingezansi ukuze ubonise futhi ufihle enye into ngezinguquko zekilasi:
.collapse
ifihla okuqukethwe.collapsing
isetshenziswa ngesikhathi soshintsho.collapse.in
ikhombisa okuqukethweUngasebenzisa isixhumanisi href
esinesibaluli, noma inkinobho data-target
enesibaluli. Kuzo zombili izimo, data-toggle="collapse"
kuyadingeka.
Nweba ukuziphatha kokugoqa okuzenzakalelayo ukuze udale i-accordion nengxenye yephaneli.
Kungenzeka futhi ukushintshanisa u- .panel-body
s no- .list-group
s.
Qiniseka ukuthi ungeza aria-expanded
kusici sokulawula. Lesi sibaluli sichaza ngokusobala isimo samanje se-elementi egoqekayo ezifundweni zesikrini nobuchwepheshe bokusiza obufanayo. Uma i-elementi egoqekayo ivalwa ngokuzenzakalelayo, kufanele ibe nenani elingu- aria-expanded="false"
. Uma usethe i-elementi egoqekayo ukuthi ivuleke ngokuzenzakalelayo usebenzisa in
iklasi, setha aria-expanded="true"
kusilawuli esikhundleni salokho. I-plugin izoguqula ngokuzenzakalelayo lesi sibaluli ngokusekelwe ekutheni i-elementi egoqekayo ivuliwe noma ivaliwe yini.
Ukwengeza, uma i-elementi yakho yokulawula iqondise kwinto eyodwa egoqekayo - okungukuthi data-target
isibaluli sikhomba id
kusikhethi - ungase wengeze aria-controls
isici sokulawula, esiqukethe id
into egoqekayo. Izifundi zesikrini zesimanje nobuchwepheshe bokusiza obufanayo busebenzisa lesi sici ukuze kunikeze abasebenzisi izinqamuleli ezengeziwe ukuze bazulazule ngokuqondile ku-elementi egoqekayo ngokwayo.
I-plugin yokugoqa isebenzisa amakilasi ambalwa ukuphatha ukuphakamisa okusindayo:
.collapse
ifihla okuqukethwe.collapse.in
ikhombisa okuqukethwe.collapsing
yengezwa lapho inguquko iqala, futhi ikhishwe lapho iqedaLawa makilasi angatholakala ku component-animations.less
.
Vele ungeze data-toggle="collapse"
futhi u-a entweni data-target
ukuze unikeze ngokuzenzakalelayo ukulawula kwento egoqekayo. Isibaluli data-target
samukela isikhethi se-CSS ongafaka kuso ukugoqa. Qiniseka ukuthi ungeza ikilasi collapse
ku-elementi egoqekayo. Uma ungathanda ukuthi ivuleke ngokuzenzakalelayo, engeza iklasi elengeziwe in
.
Ukuze ungeze ukuphathwa kweqembu okufana ne-accordion kusilawuli esigoqekayo, engeza isibaluli sedatha data-parent="#selector"
. Bheka idemo ukuze ubone lokhu kusebenza.
Nika amandla ngokwenza nge:
Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-
, njengaku data-parent=""
.
Igama | uhlobo | okuzenzakalelayo | incazelo |
---|---|---|---|
umzali | isikhethi | amanga | Uma kunikezwa isikhethi, khona-ke zonke izici ezigoqekayo ngaphansi komzali othile zizovalwa lapho le nto egoqekayo iboniswa. (okufana nokuziphatha kwe-accordion yendabuko - lokhu kuncike panel ekilasini) |
guqula | boolean | iqiniso | Iguqula into egoqekayo ekunxuseni |
.collapse(options)
Yenza okuqukethwe kwakho kusebenze njengento egoqekayo. Yamukela izinketho ozikhethela object
.
.collapse('toggle')
Iguqula into egoqekayo ukuze iboniswe noma ifihlwe. Ibuyela kofonayo ngaphambi kokuba into egoqekayo iboniswe noma ifihlwe (okungukuthi ngaphambi kokuba kwenzeke shown.bs.collapse
noma hidden.bs.collapse
isigameko).
.collapse('show')
Ibonisa into egoqekayo. Ibuyela kofonayo ngaphambi kokuba into egoqekayo iboniswe (okungukuthi ngaphambi kokuba shown.bs.collapse
kwenzeke umcimbi).
.collapse('hide')
Ifihla into egoqekayo. Ibuyela kofonayo ngaphambi kokuba into egoqekayo ifihleke (okungukuthi ngaphambi kokuthi hidden.bs.collapse
kwenzeke umcimbi).
Ikilasi lokugoqa le-Bootstrap lidalula imicimbi embalwa ukuze ixhumeke ekusebenzeni kokugoqa.
Uhlobo Lomcimbi | Incazelo |
---|---|
show.bs.goqa | Lo mcimbi uvutha ngokushesha lapho show indlela yesibonelo ibizwa. |
ikhonjisiwe.bs.goqa | Lo mcimbi uxoshwa lapho isici sokugoqa senziwe sabonakala kumsebenzisi (sizolinda ukuthi izinguquko ze-CSS ziqedele). |
fihla.bs.goqa | Lo mcimbi uxoshwa ngokushesha lapho hide indlela isibiziwe. |
kufihlwe.bs.goqa | Lo mcimbi uxoshwa lapho isici sokugoqa sifihliwe kumsebenzisi (sizolinda ukuthi izinguquko ze-CSS ziqedele). |
Ingxenye yombukiso wesilayidi yokuhamba ngebhayisikili ngokusebenzisa izici, njenge-carousel. Ama-carousel anesidleke awasekelwe.
Ingxenye ye-carousel ngokuvamile ayihambisani namazinga okufinyeleleka. Uma udinga ukuthobela, sicela ucabangele ezinye izinketho zokwethula okuqukethwe kwakho.
I-Bootstrap isebenzisa i-CSS3 kuphela ezithombeni zayo, kodwa i-Internet Explorer 8 & 9 ayisekeli izici ezidingekayo ze-CSS. Ngakho-ke, azikho izithombe zenguquko yamaslayidi uma usebenzisa lezi ziphequluli. Sinqume ngamabomu ukungafaki izipele ezisekelwe ku-jQuery zoshintsho.
Ikilasi .active
lidinga ukwengezwa kwesinye sezilayidi. Uma kungenjalo, i-carousel ngeke ibonakale.
Amakilasi .glyphicon .glyphicon-chevron-left
kanye .glyphicon .glyphicon-chevron-right
namakilasi awadingeki ekulawuleni. I- Bootstrap inikeza .icon-prev
futhi .icon-next
njengezinye izindlela ezisobala ze-unicode.
Engeza amagama-ncazo kumaslayidi akho kalula nge- .carousel-caption
elementi ngaphakathi kwanoma iyiphi .item
. Beka cishe noma iyiphi i-HTML ongayikhetha phakathi lapho futhi izoqondaniswa ngokuzenzakalelayo futhi ifomethwe.
Ama-carousel adinga ukusetshenziswa id
kwesiqukathi esingaphandle kakhulu (the .carousel
) ukuze izilawuli ze-carousel zisebenze kahle. Uma wengeza ama-carousel amaningi, noma uma ushintsha i-carousel's id
, qiniseka ukuthi ubuyekeza izilawuli ezifanele.
Sebenzisa izibaluli zedatha ukuze ulawule kalula ukuma kwe-carousel. data-slide
yamukela amagama angukhiye prev
nomanext
, eshintsha indawo yesilayidi ngokuhlobene nendawo yaso yamanje. Kungenjalo, sebenzisa data-slide-to
ukudlulisa inkomba yesilayidi eluhlaza ku-carousel data-slide-to="2"
, eshintsha indawo yesilayidi ibe inkomba ethile eqala ngo- 0
.
Idata-ride="carousel"
sisetshenziselwa ukumaka i-carousel njengokugqwayiza kusukela ekulayishweni kwekhasi. Ngeke isetshenziswe kuhlanganiswe (nokungadingeki nokungadingeki) ukuqaliswa okucacile kwe-JavaScript kwe-carousel efanayo.
Shayela i-carousel ngokwenza:
Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-
, njengaku data-interval=""
.
Igama | uhlobo | okuzenzakalelayo | incazelo |
---|---|---|---|
isikhawu | inombolo | 5000 | Inani lesikhathi sokubambezeleka phakathi kokuhamba ngebhayisikili ngokuzenzakalela into. Uma kungamanga, i-carousel ngeke ijikeleze ngokuzenzakalelayo. |
ima kancane | umucu | null | "hambahamba" | Uma kusethelwe ku- "hover" , imisa isikhashana ukuhamba ngebhayisikili kwe-carousel mouseenter bese iqalisa kabusha ukugijima kwe-carousel kuvuliwe mouseleave . Uma kusethelwe ku- null , ukuhambisa phezulu kwe-carousel ngeke kuyimise isikhashana. |
ukugoqa | boolean | iqiniso | Ukuthi i-carousel kufanele ijikeleze ngokuqhubekayo noma ibe nokuma kanzima. |
ikhibhodi | boolean | iqiniso | Ukuthi i-carousel kufanele sisabele emicimbini yekhibhodi. |
.carousel(options)
Iqalisa i-carousel ngezinketho zokuzithandela object
futhi iqala ukuhamba ngebhayisikili ezintweni.
.carousel('cycle')
Izungeza izinto ze-carousel ukusuka kwesokunxele kuye kwesokudla.
.carousel('pause')
Imisa i-carousel ekuhambeni ngebhayisikili ezintweni.
.carousel(number)
Ibiyela i-carousel kuhlaka oluthile (okusekelwe ngo-0, okufana namalungu afanayo).
.carousel('prev')
Imijikelezo eya entweni edlule.
.carousel('next')
Imijikelezo eya entweni elandelayo.
Ikilasi le-carousel le-Bootstrap lidalula imicimbi emibili yokuxhunywa ekusebenzeni kwe-carousel.
Yomibili imicimbi inezimpawu ezengeziwe ezilandelayo:
direction
: Isiqondiso lapho i-carousel ishelela khona ( "left"
noma "right"
).relatedTarget
: I-elementi ye-DOM eslayishwa endaweni njengento esebenzayo.Yonke imicimbi ye-carousel idutshulwa ku-carousel ngokwayo (okungukuthi ku- <div class="carousel">
).
Uhlobo Lomcimbi | Incazelo |
---|---|
slide.bs.carousel | Lo mcimbi uvutha ngokushesha lapho slide indlela yesibonelo isetshenziswa. |
slid.bs.carousel | Lo mcimbi uxoshwa lapho i-carousel isiqedile ukuguqulwa kwama-slide. |
I-plugin ye-affix ishintsha ivule position: fixed;
futhi ivale, ilingise umphumela otholakala nge- position: sticky;
. Ukuzulazula okungaphansi kwesokudla kuyidemo ebukhoma ye-plugin ye-affix.
Sebenzisa i-plugin yokunamathisela usebenzisa izibaluli zedatha noma ngokwenza nge-JavaScript yakho. Kuzo zombili izimo, kufanele unikeze i-CSS yokuma nobubanzi bokuqukethwe kwakho okunamathiselwe.
Qaphela: Ungasebenzisi i-plugin yokunamathisela entweni equkethwe endaweni ebekwe ngokuqhathaniswa, njengekholomu edonsiwe noma ephushiwe, ngenxa yesiphazamisi sokunikezwa kwe-Safari .
I-plugin yokunamathisela ishintsha phakathi kwamakilasi amathathu, ngalinye limele isimo esithile: .affix
, .affix-top
, kanye .affix-bottom
. Kufanele unikeze izitayela, ngaphandle kwe- position: fixed;
on .affix
, kulawa makilasi ngokwakho (ozimele kule plugin) ukuze uphathe izikhundla zangempela.
Nansi indlela i-plugin ye-affix esebenza ngayo:
.affix-top
ukukhombisa ukuthi i-elementi isendaweni yayo ephezulu kakhulu. Kuleli qophelo akukho ukuma kwe-CSS okudingekayo..affix
kungena esikhundleni .affix-top
bese kumiswa position: fixed;
(kuhlinzekwe yi-Bootstrap's CSS)..affix
indawo .affix-bottom
. Njengoba ama-offset engokuzithandela, ukusetha okukodwa kudinga ukuthi usethe i-CSS efanele. Kulokhu, engeza position: absolute;
uma kunesidingo. I-plugin isebenzisa isibaluli sedatha noma inketho ye-JavaScript ukuze inqume ukuthi ibekwe kuphi i-elementi ukusuka lapho.Landela lezi zinyathelo ezingenhla ukuze usethe i-CSS yakho kunoma iyiphi yezinketho zokusetshenziswa ezingezansi.
Ukwengeza kalula ukuziphatha kokunamathisela kunoma iyiphi i-elementi, vele ungeze data-spy="affix"
ku-elementi ofuna ukuyihlola. Sebenzisa ama-offsets ukuchaza ukuthi uguqula nini ukuphina kwento.
Shayela i-plugin ye-affix nge-JavaScript:
Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-
, njengaku data-offset-top="200"
.
Igama | uhlobo | okuzenzakalelayo | incazelo |
---|---|---|---|
offset | inombolo | umsebenzi | into | 10 | Amaphikseli okufanele uwasuse esikrinini uma ubala indawo yokuskrola. Uma inombolo eyodwa inikezwa, i-offset izosetshenziswa kuzo zombili izikhombisi-ndlela ezingaphezulu neziphansi. Ukuze unikeze i-offset eyingqayizivele, engezansi nephezulu vele unikeze into offset: { top: 10 } noma offset: { top: 10, bottom: 5 } . Sebenzisa umsebenzi uma udinga ukubala ngokuguqukayo i-offset. |
okuhlosiwe | isikhethi | node | jQuery element | window into _ |
Icacisa ingxenye eqondiwe ye-affix. |
.affix(options)
Yenza okuqukethwe kwakho kusebenze njengokuqukethwe okunamathiselwe. Yamukela izinketho ozikhethela object
.
.affix('checkPosition')
Ibala kabusha isimo se-affix ngokusekelwe kubukhulu, indawo, kanye nendawo yokuskrola yezinto ezifanele. I- .affix
, .affix-top
, kanye .affix-bottom
namakilasi engezwa noma asuswa kokuqukethwe okunamathiselwe kuye ngokwesimo esisha. Le ndlela idinga ukubizwa noma nini lapho ubukhulu bokuqukethwe okunamathiselwe noma into eqondiwe ishintshwa, ukuze kuqinisekiswe ukuma okulungile kokuqukethwe okunamathiselwe.
I-plugin yokunamathisela ye-Bootstrap iveza imicimbi embalwa ukuze ixhumeke ekusebenzeni kwe-affix.
Uhlobo Lomcimbi | Incazelo |
---|---|
namathisela.bs.namathisela | Lo mcimbi uvutha ngokushesha ngaphambi kokuthi isici sinamathiselwe. |
okunamathiselwe.bs.okunamathiselwe | Lo mcimbi uxoshwa ngemuva kokuthi isici sinamathiselwe. |
namathisela-phezulu.bs.namathisela | Lo mcimbi uvutha ngokushesha ngaphambi kokuba i-elementi inanyathiselwe phezulu. |
okunamathiselwe-phezulu.bs.namathisela | Lo mcimbi uxoshwa ngemuva kokuthi isici sinamathiselwe phezulu. |
namathisela-phansi.bs.namathisela | Lo mcimbi uvutha ngokushesha ngaphambi kokuba isici sinamathiselwe ngezansi. |
okunamathiselwe-ngezansi.bs.okunamathiselwe | Lo mcimbi uxoshwa ngemuva kokuthi isici sinamathiselwe ngezansi. |