JavaScript
Zana ibice bya Bootstrap mubuzima hamwe na plagin zirenga icumi za jQuery. Byoroshye kubashyiramo byose, cyangwa umwe umwe.
Zana ibice bya Bootstrap mubuzima hamwe na plagin zirenga icumi za jQuery. Byoroshye kubashyiramo byose, cyangwa umwe umwe.
Amacomeka arashobora gushyirwamo kugiti cye (ukoresheje *.js
dosiye ya Bootstrap), cyangwa byose icyarimwe (ukoresheje bootstrap.js
cyangwa ugabanijwe bootstrap.min.js
).
Byombi bootstrap.js
kandi bootstrap.min.js
birimo amacomeka yose muri dosiye imwe. Shyiramo imwe gusa.
Amacomeka hamwe nibice bya CSS biterwa nandi macomeka. Niba ushizemo amacomeka kugiti cye, menya neza niba ugenzura ibyo biterwa muri doc. Menya kandi ko amacomeka yose aterwa na jQuery (ibi bivuze ko jQuery igomba kuba irimo mbere ya dosiye ya plugin). Menyesha ibyacubower.json
kugirango urebe verisiyo ya jQuery ishyigikiwe.
Urashobora gukoresha amacomeka ya Bootstrap yose ukoresheje marike API utanditse umurongo umwe wa JavaScript. Nibikorwa bya Bootstrap byo mucyiciro cya mbere API kandi bigomba kuba ibitekerezo byambere mugihe ukoresheje plugin.
Ibyo byavuzwe, mubihe bimwe na bimwe birashobora kuba byiza kuzimya iyi mikorere. Kubwibyo, turatanga kandi ubushobozi bwo guhagarika amakuru ikiranga API muguhuza ibyabaye byose kumazina yinyandiko yashyizwe hamwe data-api
. Ibi bisa nkibi:
Ubundi, kugirango ugaragaze plugin yihariye, shyiramo gusa izina rya plugin nkumwanya wizina hamwe na data-api izina ryumwanya nkuyu:
Ntukoreshe ibiranga amakuru kuva mumacomeka menshi kubintu bimwe. Kurugero, buto ntishobora kugira ibikoresho byombi no guhinduranya modal. Kugirango ubigereho, koresha ikintu cyo gupfunyika.
Turizera kandi ko ugomba gushobora gukoresha amacomeka yose ya Bootstrap ukoresheje JavaScript API. API rusange rusange ni imwe, uburyo bukurikirana, kandi igasubiza icyegeranyo cyakozwe.
Uburyo bwose bugomba kwemera ibintu bidahitamo ikintu, umugozi ugamije uburyo runaka, cyangwa ntakintu (gitangiza plugin hamwe nimyitwarire idasanzwe):
Buri plugin irerekana kandi ibyubaka byayo ku Constructor
mutungo : $.fn.popover.Constructor
. Niba ushaka kubona plugin runaka urugero, iyikure muburyo butaziguye : $('[rel="popover"]').data('popover')
.
Urashobora guhindura igenamiterere risanzwe rya plugin uhindura Constructor.DEFAULTS
ikintu cya plugin:
Rimwe na rimwe, birakenewe gukoresha amacomeka ya Bootstrap hamwe nibindi UI. Muri ibi bihe, umwanya wizina urashobora guhura rimwe na rimwe. Niba ibi bibaye, urashobora guhamagara .noConflict
kuri plugin wifuza guhindura agaciro ka.
Bootstrap itanga ibyabaye kubintu byinshi byacometse kubikorwa byihariye. Mubisanzwe, ibi biza muburyo butagira ingano kandi bwashize - aho infinitive (ex. show
) Itangizwa mugitangira ibirori, kandi ifishi yacyo ya kera (ex. shown
) Iterwa no kurangiza igikorwa.
Kuva 3.0.0, ibyabaye byose muri Bootstrap ni amazina.
Ibintu byose bitagira ingano bitanga preventDefault
imikorere. Ibi bitanga ubushobozi bwo guhagarika ikorwa ryigikorwa mbere yuko gitangira.
Verisiyo ya buri pompe ya jQuery ya Bootstrap irashobora kugerwaho hifashishijwe VERSION
umutungo wububiko bwa plugin. Kurugero, kubikoresho bya plugin:
Amacomeka ya Bootstrap ntasubira inyuma cyane cyane mugihe JavaScript ihagaritswe. Niba witaye kuburambe bwabakoresha muriki kibazo, koresha <noscript>
kugirango usobanure uko ibintu bimeze (nuburyo bwo kongera gukora JavaScript) kubakoresha, kandi / cyangwa wongereho ibyo wiboneye.
Bootstrap ntabwo ishigikira kumugaragaro amasomero-yandi masomero ya JavaScript nka Prototype cyangwa jQuery UI. Nubwo .noConflict
hamwe n'amazina yibyabaye, hashobora kubaho ibibazo byo guhuza ukeneye kwikemurira wenyine.
Kubintu byoroshye byinzibacyuho, shyiramo transition.js
rimwe kuruhande rwizindi dosiye za JS. Niba ukoresha icyegeranyo (cyangwa cyaciwe) bootstrap.js
, nta mpamvu yo gushyiramo ibi-birahari.
Inzibacyuho.js numufasha wibanze transitionEnd
kubyabaye kimwe na CSS yinzibacyuho. Ikoreshwa nandi macomeka kugirango agenzure inkunga ya CSS yinzibacyuho no gufata inzibacyuho.
Inzibacyuho irashobora guhagarikwa kwisi yose ukoresheje ibice bikurikira bya JavaScript, bigomba kuza nyuma transition.js
(cyangwa bootstrap.js
, bootstrap.min.js
nkuko bigenda) byapakiwe:
Moderi iroroshe, ariko iroroshye, ikiganiro kibaza hamwe nibikorwa byibuze bisabwa nibikorwa byubwenge.
Witondere kudafungura modal mugihe undi aracyagaragara. Kwerekana modal zirenze imwe icyarimwe bisaba kode yihariye.
Buri gihe gerageza gushyira kode ya modal ya HTML muburyo bwo hejuru murwego rwinyandiko yawe kugirango wirinde ibindi bice bigira ingaruka kumiterere ya modal na / cyangwa imikorere.
Hano hari caveats zijyanye no gukoresha modal kubikoresho bigendanwa. Reba amashakiro yacu ashyigikira doc kubisobanuro birambuye.
Bitewe nuburyo HTML5 isobanura ibisobanuro byayo, autofocus
ikiranga HTML nta ngaruka igira muburyo bwa Bootstrap. Kugirango ugere ku ngaruka zimwe, koresha JavaScript imwe yihariye:
Byahinduwe modal hamwe numutwe, umubiri, hamwe nibikorwa byumutwe.
Hindura modal ukoresheje JavaScript ukanze buto hepfo. Bizanyerera kandi bishire hejuru yurupapuro.
Wemeze kongeramo role="dialog"
kandi aria-labelledby="..."
, werekeza kumutwe wuburyo, kuri .modal
, no role="document"
kuri .modal-dialog
wenyine.
Byongeye kandi, urashobora gutanga ibisobanuro byuburyo bwikiganiro hamwe aria-describedby
na .modal
.
Gushyira amashusho ya YouTube muburyo busaba JavaScript yinyongera itari muri Bootstrap kugirango ihite ihagarika gukina nibindi. Reba iyi nyandiko ifasha Stack Overflow post kubindi bisobanuro.
Moderi ifite ubunini bubiri butandukanye, buraboneka binyuze mumashuri ahindura kugirango ashyirwe kuri a .modal-dialog
.
Kuburyo bugaragara gusa aho gushira kugirango turebe, kura urwego muburyo .fade
bwawe.
Kugirango ukoreshe sisitemu ya Bootstrap ya sisitemu muburyo bwa modal, gusa icyari .row
s muri .modal-body
hanyuma hanyuma ukoreshe urwego rusanzwe rwa sisitemu.
Ufite buto ya buto yose itera modal imwe, gusa nibirimo bitandukanye? Koresha event.relatedTarget
na HTML data-*
ibiranga (birashoboka binyuze kuri jQuery ) kugirango uhindure ibiri muri modal ukurikije buto yakanze. Reba Modal Events docs ibisobanuro birambuye kuri relatedTarget
,
Amacomeka ya modal ahinduranya ibintu byihishe kubisabwa, ukoresheje ibiranga data cyangwa JavaScript. Iyongera kandi .modal-open
kuri <body>
to override imyitwarire idasanzwe yo kuzunguruka kandi ikabyara a .modal-backdrop
gutanga agace kanda kugirango wirukane moderi yerekanwe mugihe ukanze hanze yuburyo.
Kora modal utanditse JavaScript. Shyira data-toggle="modal"
ku kintu kigenzura, nka buto, hamwe na a data-target="#foo"
cyangwa href="#foo"
ugamije uburyo bwihariye bwo guhinduranya.
Hamagara modal ifite id myModal
ifite umurongo umwe wa JavaScript:
Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-
, Nka Muri data-backdrop=""
.
Izina | Ubwoko | Mburabuzi | ibisobanuro |
---|---|---|---|
Inyuma | boolean cyangwa umugozi'static' |
ni ukuri | Harimo modal-backdrop element. Ubundi, vuga static kuri backdrop idafunga modal kanda. |
Mwandikisho | boolean | ni ukuri | Gufunga modal mugihe urufunguzo rwo guhunga rukanda |
kwerekana | boolean | ni ukuri | Erekana modal mugihe yatangijwe. |
kure | inzira | ibinyoma | Ihitamo ryataye agaciro kuva v3.3.0 kandi ryakuweho muri v4. Turasaba ahubwo gukoresha abakiriya kuruhande rwicyitegererezo cyangwa guhuza amakuru, cyangwa guhamagara jQuery.wikore wenyine. Niba URL ya kure yatanzwe, ibirimo bizapakirwa inshuro imwe hakoreshejwe uburyo bwa jQuery |
.modal(options)
Koresha ibikubiyemo nkibisanzwe. Emera amahitamo object
.
.modal('toggle')
Intoki ihinduranya modal. Garuka kumuhamagara mbere yuburyo bwerekanwe cyangwa bwihishe (ni ukuvuga mbere yuko ibyabaye shown.bs.modal
cyangwa hidden.bs.modal
ibyabaye bibaho).
.modal('show')
Nintoki ifungura modal. Garuka kumuhamagara mbere yuburyo bwerekanwe (ni ukuvuga mbere yuko shown.bs.modal
ibyabaye biba).
.modal('hide')
Nintoki ihishe modal. Garuka kumuhamagara mbere yuburyo bwihishe (nukuvuga mbere yuko hidden.bs.modal
ibyabaye bibaho).
.modal('handleUpdate')
Ongera uhindure modal ihagaze kugirango uhangane numuzingo mugihe umuntu agomba kugaragara, byatuma modal isimbuka ibumoso.
Gusa birakenewe mugihe uburebure bwa modal buhinduka mugihe burakinguye.
Icyiciro cya Bootstrap cyerekana ibyabaye bike kugirango bifatanye mubikorwa.
Ibintu byose byabaye birasa kuri modal ubwayo (ni ukuvuga kuri <div class="modal">
).
Ubwoko bwibyabaye | Ibisobanuro |
---|---|
kwerekana.bs.modal | Ibirori birasa ako kanya mugihe show urugero rwitwa. Niba byatewe no gukanda, ibintu byakanze birahari relatedTarget nkumutungo wibyabaye. |
yerekanwe.bs.modal | Ibirori birukanwa mugihe modal yakozwe igaragara kubakoresha (izategereza ko inzibacyuho ya CSS irangira). Niba byatewe no gukanda, ibintu byakanze birahari relatedTarget nkumutungo wibyabaye. |
guhisha.bs.modal | Ibi birori birahita bisohoka mugihe uburyo hide bwurugero bwahamagawe. |
bihishe.bs.modal | Ibirori birukanwa mugihe modal yarangije guhishwa kubakoresha (izategereza ko inzibacyuho ya CSS irangira). |
yapimwe.bs.modal | Ibirori birukanwa mugihe modal yapakiye ibintu ukoresheje remote amahitamo. |
Ongeraho ibimanuka hafi kubintu byose hamwe niyi plugin yoroshye, harimo na navbar, tabs, n'ibinini.
Binyuze muri data ibiranga cyangwa JavaScript, plugin yamanutse ihinduranya ibintu byihishe (ibimanuka byamanutse) muguhindura .open
icyiciro kurutonde rwababyeyi.
Ku bikoresho bigendanwa, gufungura ibitonyanga byongeraho .dropdown-backdrop
nka kanda yo gufunga ibimanuka mugihe ukanda hanze ya menu, ibisabwa kugirango ubone ubufasha bukwiye bwa iOS. Ibi bivuze ko guhindukira ukava kuri menu yamanutse ukajya kurutonde rutandukanye bisaba gukanda kuri mobile.
Icyitonderwa: data-toggle="dropdown"
Ikiranga gishingiye ku gufunga ibimanuka kurutonde rwa porogaramu, nibyiza rero guhora tuyikoresha.
Ongeraho data-toggle="dropdown"
kumurongo cyangwa buto kugirango uhindure ibitonyanga.
Kugirango URL igumane hamwe na buto ihuza, koresha data-target
ikiranga aho href="#"
.
Hamagara ibitonyanga ukoresheje JavaScript:
data-toggle="dropdown"
biracyasabwaUtitaye ko wahamagaye ibitonyanga ukoresheje JavaScript cyangwa ugakoresha data-api, data-toggle="dropdown"
burigihe birasabwa kuba uhari kubintu byamanutse.
Nta na kimwe
$().dropdown('toggle')
Kuzuza menu yamanutse ya navbar yatanzwe cyangwa kugendagenda.
Ibintu byose byamanutse birasa kuri .dropdown-menu
's element element.
Ibintu byose byamanutse bifite relatedTarget
umutungo, agaciro kayo nikintu gihindagurika.
Ubwoko bwibyabaye | Ibisobanuro |
---|---|
kwerekana.bs.dropdown | Ibirori birasa ako kanya iyo kwerekana urugero uburyo bwitwa. |
yerekanwe.bs.kumanuka | Ibirori birukanwa mugihe ibitonyanga byakozwe kugaragara kubakoresha (bizategereza inzibacyuho ya CSS, kugirango birangire). |
guhisha.bs.kumanuka | Ibi birori birahita bisohoka mugihe uburyo bwo guhisha bwahamagawe. |
bihishe.bs.dropdown | Ibirori birukanwa mugihe ibitonyanga byarangije guhishwa kubakoresha (bizategereza inzibacyuho ya CSS, kugirango birangire). |
Gucomeka kwa ScrollSpy nuguhita uvugurura intego za nav ukurikije umwanya wizingo. Kuzenguruka agace kari munsi ya navbar hanyuma urebe ibyiciro bikora. Ibitonyanga byamanuka bizagaragazwa kandi.
Ad leggings keytar, brunch id art ibirori dolor labore. Pitchfork yr enim lo-fi mbere yuko bagurisha qui. Tumblr umurima-kumeza uburenganzira bwamagare ibyo aribyo byose. Anim keffiyeh carles cardigan. Velit seitan mcsweeney ifoto yicyumba 3 impyisi ukwezi irure. Cosby swater lomo jean ikabutura, williamsburg hoodie minim qui ushobora kuba utarigeze ubyumva et cardigan kwizera ikigega culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, inguzanyo irony biodiesel keffiyeh artisan ullamco ingaruka.
Veniam marfa ubwanwa bwa skateboard, adipisising fugiat velit pitchfork ubwanwa. Freegan ubwanwa aliqua cupidatat mcsweeney's vero. Cupidatat bane loko nisi, ea helvetica nulla carles. Tattooed cosby swater ikamyo y'ibiryo, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles imyitozo idahwitse quis gentrify. Brooklyn adipisising ubukorikori byeri vice keytar deserunt.
Occaecat commodo aliqua delectus. Fap craft inzoga deserunt skateboard ea. Lomo uburenganzira bwamagare adipisising banh mi, velit ea sunt urwego rukurikira locavore ikawa imwe ikomoka muri magna veniam. Ubuzima burebure id vinyl, echo parike ibisubizo quis aliquip banh mi pitchfork. Vero VHS est adipisising. Consectetur nisi DIY minim messenger umufuka. Cred ex in, irambye delectus 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 messenger umufuka marfa icyaricyo cyose cya delectus ikamyo. Sapiente synth id assnda. Lokavore sed helvetica cliche irony, inkuba ushobora kuba utarigeze uyumva ingaruka za hoodie gluten-yubusa lo-fi fap aliquip. Umurimo elit umwanya mbere yuko bagurisha, terry richardson proident brunch nesciunt quis cosby swater pariatur keffiyeh ut helvetica umunyabukorikori. Cardigan craft byeri seitan yiteguye gukora velit. VHS chambray laboris by'agateganyo veniam. Anim mollit minim commodo ullamco inkuba.
Imiyoboro ya Navbar igomba kuba ifite intego id idakemuka. Kurugero, <a href="#home">home</a>
hagomba guhura nibintu muri DOM nka <div id="home"></div>
.
:visible
intego birengagijweIntego yibintu bidahuye :visible
na jQuery izirengagizwa kandi ibintu bihuye nabyo ntibizigera bigaragara.
Ntakibazo cyogushira mubikorwa, umuzingo usaba gukoresha ikoreshwa position: relative;
mubintu urimo kuneka. Mu bihe byinshi iyi ni <body>
. Mugihe uzunguruka ku bindi bitari u <body>
, menya neza ko height
washyizeho kandi ugashyirwa overflow-y: scroll;
mubikorwa.
Kugirango wongere byoroshye imyitwarire ya scrollspy kumurongo wawe wo hejuru, ongera kubintu ushaka kuneka data-spy="scroll"
(mubisanzwe ibi byaba aribyo <body>
). Noneho ongeraho data-target
ikiranga hamwe nindangamuntu cyangwa urwego rwibintu byababyeyi .nav
bigize Bootstrap.
Nyuma yo kongera position: relative;
muri CSS yawe, hamagara umuzingo ukoresheje JavaScript:
.scrollspy('refresh')
Mugihe ukoresheje umuzingo ufatanije no kongera cyangwa gukuraho ibintu muri DOM, uzakenera guhamagara uburyo bushya nka gutya:
Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-
, Nka Muri data-offset=""
.
Izina | Ubwoko | Mburabuzi | ibisobanuro |
---|---|---|---|
offset | umubare | 10 | Pixels kugirango uve hejuru iyo ubaze umwanya wumuzingo. |
Ubwoko bwibyabaye | Ibisobanuro |
---|---|
gukora.bs.scrollspy | Ibirori birashya igihe cyose ikintu gishya gihinduwe na muzingo. |
Ongeraho byihuse, imbaraga za tab imikorere kugirango uhindurwe unyuze kumurongo wibirimo byaho, ndetse unyuze kumurongo. Utubuto twashyizwe hamwe ntabwo dushyigikiwe.
Raw denim ushobora kuba utarigeze wumva ibya jean ikabutura Austin. Nesciunt tofu stumptown aliqua, retro synth master suku. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh inzozi zo gufata. Cosby swater eu banh mi, qui irure terry richardson ex squid. Aliquip umwanya wa saliviya cillum iphone. Seitan aliquip quis cardigan imyambaro yabanyamerika, 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.
Gucomeka kwagura ibice byateganijwe kugirango wongere ahantu hashobora kuboneka.
Gushoboza imbonerahamwe ya tabs ukoresheje JavaScript (buri tab igomba gukenera kugiti cye):
Urashobora gukora ama tabs kugiti cye muburyo butandukanye:
Urashobora gukora tab cyangwa ibinini bigenda utanditse JavaScript iyo ari yo yose ugaragaza gusa data-toggle="tab"
cyangwa data-toggle="pill"
kubintu. Ongeraho ibyiciro nav
hamwe nav-tabs
namasomo kuri tab bizashyiraul
mubikorwa bya Bootstrap , mugihe wongeyeho ibyiciro bizakoresha ibinini .nav
nav-pills
Kugirango utume gushira, ongera .fade
kuri buri .tab-pane
. Urupapuro rwa mbere rwa pane rugomba kandi .in
gukora ibintu byambere bigaragara.
$().tab
Gukora tab element hamwe nibikoresho birimo. Tab igomba kuba ifite a data-target
cyangwa href
igamije icyerekezo cya kontineri muri DOM. Mu ngero zavuzwe haruguru, tabs ni <a>
s hamwe data-toggle="tab"
nibiranga.
.tab('show')
Hitamo tab yatanzwe kandi yerekana ibiyirimo. Iyindi tab yose yatoranijwe mbere iba itatoranijwe kandi ibiyirimo bifitanye isano. Garuka kumuhamagara mbere yuko tab pane yerekanwe mubyukuri (nukuvuga mbere yuko shown.bs.tab
ibyabaye biba).
Iyo werekanye tab nshya, ibyabaye birashya muburyo bukurikira:
hide.bs.tab
(kuri tab ikora)show.bs.tab
(kuri to-kwerekanwa tab)hidden.bs.tab
(kurupapuro rwibanze rukora, kimwe hide.bs.tab
nkicyabaye)shown.bs.tab
(ku gishya-gikora gusa-cyerekanwe tab, kimwe kimwe show.bs.tab
nicyabaye)Niba nta tab yari isanzwe ikora, noneho hide.bs.tab
ibyabaye hidden.bs.tab
ntibizasezererwa.
Ubwoko bwibyabaye | Ibisobanuro |
---|---|
kwerekana.bs.tab | Ibirori birasa kuri tab yerekana, ariko mbere yuko tab nshya yerekanwe. Koresha event.target no event.relatedTarget gutondekanya tab ikora hamwe na tab yabanjirije gukora (niba ihari). |
yerekanwe.bs.tab | Ibirori birasa kuri tab yerekanwe nyuma ya tab yerekanwe. Koresha event.target no event.relatedTarget gutondekanya tab ikora hamwe na tab yabanjirije gukora (niba ihari). |
guhisha.bs.tab | Ibirori birasa iyo tab nshya igomba kwerekanwa (nuko rero tab ikora ibanza igomba guhishwa). Koresha event.target no event.relatedTarget kugenera icyerekezo gikora hamwe nigishya vuba-kugirango-gikore, kimwe. |
bihishe.bs.tab | Ibirori birashya nyuma ya tab nshya yerekanwe (nuko rero tab yabanjirije gukora irahishe). Koresha event.target no event.relatedTarget guhitamo intego yabanjirije gukora hamwe na tab nshya ikora, uko bikurikirana. |
Ahumekewe na jQuery nziza cyane.ipipsy plugin yanditswe na Jason Frame; Ibikoresho ni verisiyo ivuguruye, idashingiye ku mashusho, koresha CSS3 kuri animasiyo, hamwe na data-ibiranga kubika inyito yaho.
Ibikoresho bifite imitwe ya zeru-ndende ntibigaragara.
Hisha hejuru yibi bikurikira kugirango urebe ibikoresho:
Ipantaro ifatanye urwego rukurikira keffiyeh birashoboka ko utigeze ubyumva. Ifoto icyumba cyogosha ubwanwa mbisi denim inyuguti ya vegan messenger umufuka stumptown. Umurima-kumeza seitan, mcsweeney's fixie irambye quinoa 8-biti byabanyamerika bafite terry richardson vinyl chambray. Ubwanwa bwatsitaye, abakarigani banh mi lomo inkuba. Tofu biodiesel williamsburg marfa, bane loko mcsweeney yoza vegan chambray. Umunyabukorikori rwose birasekeje icyaricyo cyose keytar , scenester umurima-kumeza banki bankin Austin twitter ikora freegan inguzanyo mbisi denim inkomoko yikawa ya virusi.
Amahitamo ane arahari: hejuru, iburyo, hepfo, n'ibumoso.
Kubwimpamvu zimikorere, Tooltip na Popover data-apis bahitamo, bivuze ko ugomba kubitangira wenyine .
Uburyo bumwe bwo gutangiza ibikoresho byose kurupapuro byaba ari uguhitamo data-toggle
kubiranga:
Ibikoresho bya plugin bitanga ibikubiyemo nibiranga kubisabwa, kandi kubisanzwe byerekana ibikoresho nyuma yibintu byabo.
Koresha ibikoresho ukoresheje JavaScript:
Ikimenyetso gisabwa kubikoresho ni data
ikiranga gusa no title
kuri element ya HTML wifuza kugira igikoresho. Ikimenyetso cyakozwe mubikoresho byoroshye biroroshye, nubwo bisaba umwanya (kubisanzwe, byashyizweho top
na plugin).
Rimwe na rimwe, ushaka kongeramo igikoresho kuri hyperlink ipfunyika imirongo myinshi. Mburabuzi Imyitwarire ya plugin ni igikoresho cyo hagati itambitse kandi ihagaritse. Ongeraho white-space: nowrap;
inanga kugirango wirinde ibi.
Mugihe ukoresheje ibikoresho byibikoresho biri muri a .btn-group
cyangwa an , .input-group
cyangwa kubintu bifitanye isano nimbonerahamwe (,,,,, ) , <td>
ugomba kwerekana amahitamo ( yanditse hano hepfo) kugirango wirinde ingaruka zitifuzwa (nkibintu bigenda byiyongera kandi / cyangwa gutakaza inguni zayo zegeranye mugihe igikoresho gikoreshwa).<th>
<tr>
<thead>
<tbody>
<tfoot>
container: 'body'
Kubakoresha bagendana na clavier, na cyane cyane abakoresha tekinoroji ifasha, ugomba kongeramo gusa ibikoresho byibikoresho byibanda kuri clavier nkibisobanuro, imiterere igenzura, cyangwa ikintu icyo aricyo cyose gifite tabindex="0"
ikiranga.
Kugirango wongere igikoresho kuri a disabled
cyangwa .disabled
element, shyira element imbere ya a <div>
hanyuma ushyire ibikoresho kuriyo <div>
aho.
Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-
, Nka Muri data-animation=""
.
Izina | Andika | Mburabuzi | Ibisobanuro |
---|---|---|---|
animasiyo | boolean | ni ukuri | Koresha CSS igenda ihinduka kubikoresho |
kontineri | umugozi | ibinyoma | ibinyoma | Ongeraho ibikoresho byibikoresho runaka. Urugero : |
gutinda | umubare | ikintu | 0 | Gutinda kwerekana no guhisha ibikoresho (ms) - ntibikoreshwa muburyo bwintoki Niba umubare watanzwe, gutinda gukoreshwa byombi guhisha / kwerekana Imiterere yibintu ni: |
html | boolean | ibinyoma | Shyiramo HTML mubikoresho. Niba ari ibinyoma, uburyo bwa jQuery text buzakoreshwa mugushyiramo ibintu muri DOM. Koresha inyandiko niba uhangayikishijwe n'ibitero bya XSS. |
gushyira | umugozi | imikorere | 'hejuru' | Nigute ushobora gushyira ibikoresho - hejuru | munsi | ibumoso | iburyo | imodoka. Iyo imikorere ikoreshwa mukumenya aho ishyirwa, byitwa hamwe na tooltip DOM node nkibisobanuro byayo byambere hamwe na elementing DOM node nkibya kabiri. Imirongo |
uwatoranije | umugozi | ibinyoma | Niba uwatoranije atanzwe, ibikoresho byibikoresho bizahabwa intego zerekanwe. Mubimenyerezo, ibi bikoreshwa mugushoboza HTML yingirakamaro kugirango hongerwemo ibikoresho. Reba ibi nurugero rwamakuru . |
Inyandikorugero | umugozi | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Shingiro HTML yo gukoresha mugihe uremye ibikoresho. Ibikoresho bya
Ikintu cyo gupfunyika hanze kigomba kugira urwego |
Umutwe | umugozi | imikorere | '' | Mburabuzi Umutwe Agaciro niba Niba imikorere yatanzwe, izahamagarwa hamwe namakuru yayo |
imbarutso | umugozi | 'hover yibanze' | Uburyo ibikoresho byifashishwa - kanda | hover | kwibanda | imfashanyigisho. Urashobora gutsinda imbarutso nyinshi; kubatandukanya n'umwanya. manual ntishobora guhuzwa nizindi mbarutso. |
Reba | umugozi | ikintu | imikorere | {uwatoranije: 'umubiri', padi: 0} | Gumana ibikoresho byerekana imbibi ziki kintu. Urugero: Niba imikorere yatanzwe, yitwa hamwe na triggering element DOM node nkimpaka zonyine. Imirongo |
Amahitamo kubikoresho bya buri muntu arashobora gutondekwa muburyo bwo gukoresha ibiranga amakuru, nkuko byasobanuwe haruguru.
$().tooltip(options)
Ongeraho ibikoresho byifashishwa mugukusanya ibintu.
.tooltip('show')
Yerekana igikoresho cyibikoresho. Garuka kumuhamagara mbere yuko ibikoresho byerekanwe (ni ukuvuga mbere yuko shown.bs.tooltip
ibyabaye biba). Ibi bifatwa nk "intoki" itera ibikoresho. Ibikoresho bifite imitwe ya zeru-ndende ntibigaragara.
.tooltip('hide')
Hisha igikoresho cyibikoresho. Garuka kumuhamagara mbere yigikoresho cyihishe mubyukuri (nukuvuga mbere yuko hidden.bs.tooltip
ibyabaye biba). Ibi bifatwa nk "intoki" itera ibikoresho.
.tooltip('toggle')
Kuzuza ibikoresho by'ibikoresho. Garuka kumuhamagara mbere yuko ibikoresho byerekanwe cyangwa byihishe (ni ukuvuga mbere yuko ibyabaye shown.bs.tooltip
cyangwa hidden.bs.tooltip
ibyabaye bibaho). Ibi bifatwa nk "intoki" itera ibikoresho.
.tooltip('destroy')
Hisha kandi usenye ibikoresho bya element. Ibikoresho bifashisha intumwa (zakozwe hakoreshejwe amahitamoselector
) ntibishobora gusenywa kugiti cyawe kubintu bikomokaho .
Ubwoko bwibyabaye | Ibisobanuro |
---|---|
kwerekana.bs.igikoresho | Ibirori birasa ako kanya mugihe show urugero rwitwa. |
yerekanwe.bs.igikoresho | Ibi birori birukanwa mugihe ibikoresho byakorewe kugaragara kubakoresha (bizategereza ko CSS ihinduka). |
guhisha.bs.igikoresho | Ibi birori birahita bisohoka mugihe uburyo hide bwurugero bwahamagawe. |
bihishe.bs.igikoresho | Ibirori birukanwa mugihe ibikoresho byarangije guhishwa kubakoresha (bizategereza ko CSS ihinduka). |
Byinjijwe.bs.ibikoresho | Ibirori birukanwa nyuma show.bs.tooltip yibyabaye mugihe ibikoresho byifashishijwe byongewe kuri DOM. |
Ongeraho uduce duto twibirimo, nkibiri kuri iPad, kubintu byose byo guturamo amakuru yisumbuye.
Popovers imitwe yombi nibirimo byose ni zeru-ndende ntibigaragara.
Popovers isaba ibikoresho bya plugin kugirango bishyirwe muri verisiyo yawe ya Bootstrap.
Kubwimpamvu zimikorere, Tooltip na Popover data-apis bahitamo, bivuze ko ugomba kubitangira wenyine .
Uburyo bumwe bwo gutangiza popovers zose kurupapuro kwaba ari uguhitamo data-toggle
kubiranga:
Mugihe ukoresheje popovers kubintu biri muri a .btn-group
cyangwa an , .input-group
cyangwa kubintu bifitanye isano nameza (,,,,, ) , <td>
ugomba kwerekana amahitamo ( yanditse hepfo) kugirango wirinde ingaruka zitifuzwa (nkibintu bigenda byiyongera kandi / cyangwa gutakaza impande zose zegeranye iyo popover itangiye).<th>
<tr>
<thead>
<tbody>
<tfoot>
container: 'body'
Kugirango wongere popover kuri a disabled
cyangwa .disabled
element, shyira element imbere ya a <div>
hanyuma ushyire popover kuriyo <div>
aho.
Rimwe na rimwe, ushaka kongeramo popover kuri hyperlink ipfunyika imirongo myinshi. Imyitwarire isanzwe ya popover plugin nuguhuza hagati itambitse kandi ihagaritse. Ongeraho white-space: nowrap;
inanga kugirango wirinde ibi.
Amahitamo ane arahari: hejuru, iburyo, hepfo, n'ibumoso.
Sed posuere consectetur est kuri lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est kuri lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est kuri lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est kuri lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Koresha focus
imbarutso kugirango wirukane popovers kurikurikiraho umukoresha akora.
Kuburyo bukwiye bwambukiranya-mbuga hamwe nimyitwarire ya cross-platform, ugomba gukoresha <a>
tagi, ntabwo ari <button>
tagi, kandi ugomba no gushyiramo role="button"
nibiranga tabindex
.
Gushoboza popovers ukoresheje JavaScript:
Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-
, Nka Muri data-animation=""
.
Izina | Andika | Mburabuzi | Ibisobanuro |
---|---|---|---|
animasiyo | boolean | ni ukuri | Koresha CSS igenda ihinduka kuri popover |
kontineri | umugozi | ibinyoma | ibinyoma | Ongeraho popover kubintu runaka. Urugero : |
ibirimo | umugozi | imikorere | '' | Mburabuzi agaciro agaciro niba Niba imikorere yatanzwe, izahamagarwa hamwe |
gutinda | umubare | ikintu | 0 | Gutinda kwerekana no guhisha popover (ms) - ntabwo ikoreshwa muburyo bwintoki Niba umubare watanzwe, gutinda gukoreshwa byombi guhisha / kwerekana Imiterere yibintu ni: |
html | boolean | ibinyoma | Shyiramo HTML muri popover. Niba ari ibinyoma, uburyo bwa jQuery text buzakoreshwa mugushyiramo ibintu muri DOM. Koresha inyandiko niba uhangayikishijwe n'ibitero bya XSS. |
gushyira | umugozi | imikorere | 'iburyo' | Nigute washyira popover - hejuru | munsi | ibumoso | iburyo | imodoka. Iyo imikorere ikoreshwa mukumenya aho ishyirwa, byitwa hamwe na popover DOM node nkibitekerezo byayo byambere hamwe na elementing DOM node nkibya kabiri. Imirongo |
uwatoranije | umugozi | ibinyoma | Niba hatoranijwe uwatoranijwe, ibintu bya popover bizahabwa intego zagenwe. Mu myitozo, ibi bikoreshwa mugushoboza HTML ifite imbaraga kugirango hongerwe popovers. Reba ibi nurugero rwamakuru . |
Inyandikorugero | umugozi | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Shingiro HTML yo gukoresha mugihe uremye popover. Amashanyarazi Amashanyarazi
Ikintu cyo gupfunyika hanze kigomba kugira urwego |
Umutwe | umugozi | imikorere | '' | Mburabuzi Umutwe Agaciro niba Niba imikorere yatanzwe, izahamagarwa hamwe |
imbarutso | umugozi | 'kanda' | Uburyo popover iterwa - kanda | hover | kwibanda | imfashanyigisho. Urashobora gutsinda imbarutso nyinshi; kubatandukanya n'umwanya. manual ntishobora guhuzwa nizindi mbarutso. |
Reba | umugozi | ikintu | imikorere | {uwatoranije: 'umubiri', padi: 0} | Gumana popover mumipaka yiki kintu. Urugero: Niba imikorere yatanzwe, yitwa hamwe na triggering element DOM node nkimpaka zonyine. Imirongo |
Amahitamo ya popovers kugiti cye arashobora gusobanurwa muburyo bwo gukoresha ibiranga amakuru, nkuko byasobanuwe haruguru.
$().popover(options)
Itangiza popovers yikintu cyo gukusanya.
.popover('show')
Yerekana ikintu cya popover. Garuka kumuhamagara mbere yuko popover yerekanwe (nukuvuga mbere yuko shown.bs.popover
ibyabaye biba). Ibi bifatwa nk "intoki" itera popover. Popovers imitwe yombi nibirimo byose ni zeru-ndende ntibigaragara.
.popover('hide')
Hisha ikintu cya popover. Garuka kumuhamagaye mbere yuko popover ihishwa mubyukuri (nukuvuga mbere yuko hidden.bs.popover
ibyabaye biba). Ibi bifatwa nk "intoki" itera popover.
.popover('toggle')
Kuzuza ikintu cya popover. Garuka kumuhamagara mbere yuko popover yerekanwe cyangwa yihishe (nukuvuga mbere yuko ibyabaye shown.bs.popover
cyangwa hidden.bs.popover
ibyabaye bibaho). Ibi bifatwa nk "intoki" itera popover.
.popover('destroy')
Hisha kandi usenye ikintu cya popover. Popovers ikoresha delegasiyo (yashizweho hakoreshejwe amahitamoselector
) ntishobora gusenywa kugiti cye kubintu bikomokaho .
Ubwoko bwibyabaye | Ibisobanuro |
---|---|
kwerekana.bs | Ibirori birasa ako kanya mugihe show urugero rwitwa. |
yerekanwe.bs | Ibirori birukanwa mugihe popover yakozwe igaragara kubakoresha (izategereza ko inzibacyuho ya CSS irangira). |
guhisha.bs | Ibi birori birahita bisohoka mugihe uburyo hide bwurugero bwahamagawe. |
bihishe.bs | Ibirori birukanwa mugihe popover yarangije guhishwa uyikoresha (azategereza ko inzibacyuho ya CSS irangira). |
Byinjijwe.bs | Ibirori birukanwe nyuma show.bs.popover yibyabaye mugihe icyitegererezo cya popover cyongewe kuri DOM. |
Ongeraho imikorere yo kwirukana ubutumwa bwose bwamenyeshejwe hamwe niyi plugin.
Iyo ukoresheje .close
buto, igomba kuba umwana wambere wa .alert-dismissible
kandi ntakintu cyanditse gishobora kuza mbere yacyo muri marike.
Hindura ibi n'ibi hanyuma ugerageze. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus yicara amet fermentum.
Gusa ongeraho data-dismiss="alert"
kuri bouton yawe yegeranye kugirango uhite utanga integuza yimikorere. Gufunga integuza bikuraho muri DOM.
Kugira ngo imenyesha ryawe ukoreshe animasiyo mugihe ufunze, menya neza ko bafite .fade
amasomo .in
namasomo yamaze kubakoreshwa.
$().alert()
Kora integuza yumve gukanda ibyabaye kubintu bikomokaho bifite data-dismiss="alert"
ikiranga. (Ntabwo ari ngombwa mugihe ukoresheje data-api yo gutangiza-auto.)
$().alert('close')
Funga integuza uyikuye muri DOM. Niba i .fade
hamwe .in
namasomo ahari kuri element, integuza izashira mbere yuko ikurwaho.
Amacomeka ya Bootstrap yerekana ibintu bike byo guhuza ibikorwa.
Ubwoko bwibyabaye | Ibisobanuro |
---|---|
gufunga.bs.alert | Ibirori birasa ako kanya mugihe close urugero rwitwa. |
gufunga.bs.alert | Ibi birori birukanwa mugihe integuza yafunzwe (izategereza ko CSS ihinduka). |
Kora byinshi hamwe na buto. Kugenzura buto ivuga cyangwa gukora amatsinda ya buto kubindi bikoresho nkibikoresho.
Firefox ikomeza gushiraho uburyo bwo kugenzura (ubumuga no kugenzura) kurupapuro rwuzuye . Imikorere kuriyi ni ugukoresha autocomplete="off"
. Reba Mozilla bug # 654072 .
Ongeraho data-loading-text="Loading..."
kugirango ukoreshe ibintu biremereye kuri buto.
Iyi mikorere itaye agaciro kuva v3.3.5 kandi yakuweho muri v4.
Kubwiyi myiyerekano, turimo gukoresha data-loading-text
kandi $().button('loading')
, ariko ntabwo aribwo leta yonyine ushobora gukoresha. Reba byinshi kuriyi hepfo mu $().button(string)
nyandiko .
Ongeraho data-toggle="button"
kugirango utangire guhinduranya kuri buto imwe.
.active
kandiaria-pressed="true"
Kuri pre-toggled buto, ugomba kongeramo .active
urwego aria-pressed="true"
nibiranga button
wenyine.
Ongeraho data-toggle="buttons"
kubisobanuro .btn-group
birimo agasanduku cyangwa radio yinjiza kugirango ushoboze guhindagurika muburyo bwabo.
.active
Kuburyo bwatoranijwe, ugomba kongeramo .active
urwego mubyinjira label
wenyine.
Niba imiterere yagenzuwe ya buto yo kugenzura ivugururwa nta kurasa click
ibyabaye kuri buto (urugero binyuze <input type="reset">
cyangwa binyuze mugushiraho checked
umutungo winjiza), uzakenera guhinduranya .active
icyiciro kumurongo winjiye label
wenyine.
$().button('toggle')
Toggles gusunika leta. Itanga buto igaragara ko yakoreshejwe.
$().button('reset')
Kugarura buto leta - guhinduranya inyandiko kumyandiko yumwimerere. Ubu buryo ntibusanzwe kandi bugaruka mbere yuko gusubiramo birangira.
$().button(string)
Hindura inyandiko kumakuru ayo ari yo yose asobanuwe inyandiko.
Amacomeka yoroheje akoresha urutonde rwamasomo kugirango byoroshye imyitwarire.
Gusenyuka bisaba plugin yinzibacyuho gushyirwa muri verisiyo yawe ya Bootstrap.
Kanda buto hepfo kugirango werekane kandi uhishe ikindi kintu ukoresheje impinduka zamasomo:
.collapse
ahisha ibirimo.collapsing
ni Byakoreshejwe Mugihe Cyinzibacyuho.collapse.in
yerekana ibirimoUrashobora gukoresha umurongo hamwe href
nibiranga, cyangwa buto hamwe data-target
nibiranga. Muri ibyo bihe byombi, data-toggle="collapse"
urasabwa.
Ongera imyitwarire isanzwe yo gusenyuka kugirango ukore akanya hamwe nibice bigize ibice.
Birashoboka kandi guhinduranya .panel-body
s hamwe na .list-group
s.
Witondere kongera aria-expanded
kubintu bigenzura. Iyi miterere isobanura neza uko ibintu bimeze ubu ibintu byangirika kugirango ugaragaze abasomyi hamwe na tekinoroji ifasha. Niba ikintu gishobora gusenyuka gifunzwe byanze bikunze, kigomba kugira agaciro ka aria-expanded="false"
. Niba washyizeho ikintu gishobora kugwa kugirango ufungure byanze bikunze ukoresheje urwego in
, shirahoaria-expanded="true"
kugenzura aho. Gucomeka izahita ihindura iyi miterere ukurikije niba ikintu gishobora kugwa cyarafunguwe cyangwa gifunze.
Byongeye kandi, niba igenzura ryawe rigamije ikintu kimwe gishobora gusenyuka - ni ukuvuga data-target
ikiranga cyerekana id
uwatoranije - urashobora kongeramo ikindi kintu aria-controls
kiranga kugenzura ibintu, birimo id
ibintu byangirika. Abasomyi ba kijyambere bigezweho hamwe nubuhanga busa bufasha gukoresha iyi miterere kugirango batange abakoresha ama shortcuts yinyongera kugirango bayobore neza kubintu byangirika ubwabyo.
Gusenyuka plugin ikoresha ibyiciro bike kugirango ikemure ibintu biremereye:
.collapse
ahisha ibirimo.collapse.in
yerekana ibirimo.collapsing
yongeweho iyo inzibacyuho itangiye, ikanakurwaho iyo irangiyeAya masomo murayasanga muri component-animations.less
.
Gusa ongeraho data-toggle="collapse"
na a data-target
kubintu kugirango uhite ugenera kugenzura ikintu gishobora kugwa. Ikiranga data-target
cyakira CSS uhitamo kugirango akoreshe gusenyuka kuri. Wemeze kongeramo urwego collapse
kubintu bishobora kugwa. Niba wifuza ko byafungura, ongeraho urwego rwinyongera in
.
Kugirango wongere imiyoborere isa nitsinda rishinzwe kugenzura kugabanuka, ongeramo amakuru ikiranga data-parent="#selector"
. Reba kuri demo kugirango ubone ibi mubikorwa.
Gushoboza intoki hamwe na:
Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-
, Nka Muri data-parent=""
.
Izina | Ubwoko | Mburabuzi | ibisobanuro |
---|---|---|---|
umubyeyi | uwatoranije | ibinyoma | Niba hatoranijwe uwatoranije, noneho ibintu byose bishobora kugwa munsi yumubyeyi wabigenewe bizafungwa mugihe iki kintu kiguye cyerekanwe. (bisa nimyitwarire gakondo ya bordion - ibi biterwa panel nurwego) |
guhinduranya | boolean | ni ukuri | Kuzuza ibintu bishobora kugwa kuri invocation |
.collapse(options)
Koresha ibikubiyemo nkibintu bishobora gusenyuka. Emera amahitamo object
.
.collapse('toggle')
Kuzuza ikintu gishobora kugwa kugirango werekane cyangwa uhishe. Garuka kumuhamagara mbere yuko ikintu gishobora kugwa cyerekanwe cyangwa cyihishe (ni ukuvuga mbere yuko ibyabaye shown.bs.collapse
cyangwa hidden.bs.collapse
ibyabaye bibaho).
.collapse('show')
Erekana ikintu gishobora kugwa. Garuka kumuhamagara mbere yuko ikintu kigwa cyerekanwe mubyukuri (nukuvuga mbere yuko shown.bs.collapse
ibyabaye bibaho).
.collapse('hide')
Hisha ikintu gishobora kugwa. Garuka kumuhamagara mbere yuko ibintu bigwa byihishe mubyukuri (nukuvuga mbere yuko hidden.bs.collapse
ibyabaye biba).
Bootstrap yo gusenyuka ibyiciro byerekana ibintu bike byo guhuza ibikorwa.
Ubwoko bwibyabaye | Ibisobanuro |
---|---|
kwerekana.bs.isenyuka | Ibirori birasa ako kanya mugihe show urugero rwitwa. |
yerekanwe.bs.isenyuka | Ibi birori birukanwa mugihe ikintu cyo gusenyuka cyakozwe kigaragara kubakoresha (bizategereza ko inzibacyuho ya CSS irangira). |
guhisha.bs. gusenyuka | Iki gikorwa kirahita gihita iyo hide uburyo bwahamagawe. |
guhisha.bs.isenyuka | Ibirori birukanwa mugihe ikintu cyo gusenyuka cyihishe kumukoresha (uzategereza ko inzibacyuho ya CSS irangira). |
Igice cya slideshow yo gusiganwa ku magare binyuze mu bintu, nka karuseli. Carousels yatowe ntabwo ishyigikiwe.
Ibice bya karuseli mubisanzwe ntabwo byujuje ubuziranenge bwo kugerwaho. Niba ukeneye kubahiriza, nyamuneka suzuma ubundi buryo bwo kwerekana ibikubiyemo.
Bootstrap ikoresha CSS3 gusa kuri animasiyo zayo, ariko Internet Explorer 8 & 9 ntabwo ishigikira imitungo ikenewe ya CSS. Kubwibyo, nta animasiyo yinzibacyuho iyo ukoresheje mushakisha. Twahisemo nkana kudashyiramo jQuery ishingiye ku nzibacyuho.
Icyiciro .active
gikeneye kongerwaho imwe mumashusho. Bitabaye ibyo, karuseli ntizagaragara.
Amasomo .glyphicon .glyphicon-chevron-left
ntabwo .glyphicon .glyphicon-chevron-right
akenewe byanze bikunze kugenzura. Bootstrap itanga .icon-prev
kandi .icon-next
nkibisanzwe unicode isanzwe.
Ongeraho ibisobanuro kuri slide yawe byoroshye hamwe .carousel-caption
nibintu muri byose .item
. Shyira hafi ya HTML iyo ari yo yose itabishaka imbere kandi izahita ihuzwa kandi ihindurwe.
Carousels isaba gukoresha an id
kuri kontineri yo hanze (the .carousel
) kugirango karuseli igenzure gukora neza. Mugihe wongeyeho karuseli nyinshi, cyangwa mugihe uhinduye karuseli id
, menya neza kugenzura ibyerekeranye.
Koresha ibiranga amakuru kugirango ugenzure byoroshye umwanya wa karuseli. data-slide
yemera ijambo ryibanze prev
cyangwa next
, rihindura umwanya uhagaze ugereranije nubu. Ubundi, koresha data-slide-to
kunyuza urutonde rwibanze kuri karuseli data-slide-to="2"
, ihinduranya umwanya uhagaze kumurongo runaka utangirana na 0
.
Ikiranga data-ride="carousel"
gikoreshwa mukuranga karuseli nka animasiyo itangirira kurupapuro. Ntishobora gukoreshwa ifatanije na (kurenza kandi bitari ngombwa) JavaScript itangizwa ya karuseli imwe.
Hamagara karuseli intoki hamwe na:
Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-
, Nka Muri data-interval=""
.
Izina | Ubwoko | Mburabuzi | ibisobanuro |
---|---|---|---|
intera | umubare | 5000 | Ingano yigihe cyo gutinda hagati yizunguruka yikintu. Niba ari ibinyoma, karuseli ntabwo izahita izunguruka. |
hagarara | umugozi | null | "hover" | Niba byashyizweho "hover" , ihagarika amagare ya karuseli mouseenter hanyuma ikomeza gusiganwa ku magare ya karuseli kuri mouseleave . Niba byashyizweho null , kugendagenda hejuru ya karuseli ntibizahagarara. |
gupfunyika | boolean | ni ukuri | Niba karuseli igomba kuzunguruka ubudasiba cyangwa ifite guhagarara gukomeye. |
Mwandikisho | boolean | ni ukuri | Niba karuseli igomba kwitwara kubyabaye kuri clavier. |
.carousel(options)
Itangiza karuseli hamwe nuburyo bwo guhitamo object
hanyuma igatangira gusiganwa ku magare binyuze mubintu.
.carousel('cycle')
Amagare anyuze muri karuseli kuva ibumoso ugana iburyo.
.carousel('pause')
Hagarika karuseli gusiganwa ku magare binyuze mu bintu.
.carousel(number)
Kuzenguruka karuseli kumurongo runaka (0 ishingiye, isa na array).
.carousel('prev')
Amagare ku kintu kibanziriza iki.
.carousel('next')
Amagare ku kintu gikurikira.
Bootstrap ya karuseli yerekana ibintu bibiri byo guhuza imikorere ya karuseli.
Ibyabaye byombi bifite imitungo yinyongera ikurikira:
direction
: Icyerekezo karuseli iranyerera (haba "left"
cyangwa "right"
).relatedTarget
: Ikintu cya DOM kirimo kunyerera ahantu nkibintu bikora.Ibintu byose bya karuseli birasa kuri karuseli ubwayo (ni ukuvuga kuri <div class="carousel">
).
Ubwoko bwibyabaye | Ibisobanuro |
---|---|
slide.bs.carousel | Ibirori birasa ako kanya mugihe slide urugero rwakoreshejwe. |
slide.bs.carousel | Ibirori birukanwa mugihe karuseli yarangije kunyerera. |
Umugereka plugin uhinduranya position: fixed;
no kuzimya, wigana ingaruka zabonetse hamwe position: sticky;
. Subnavigation iburyo ni demo nzima ya plugin.
Koresha umugereka wa plugin ukoresheje ibiranga data cyangwa intoki hamwe na JavaScript yawe. Muri ibyo bihe byombi, ugomba gutanga CSS kumwanya hamwe nubugari bwibirimo byometseho.
Icyitonderwa: Ntugakoreshe umugereka wongeyeho kubintu bikubiye mubintu bisa nkaho bihagaze, nkibikururwa cyangwa byasunitswe, kubera Safari yerekana amakosa .
Umugereka plugin uhinduranya hagati yamasomo atatu, buriwese uhagarariye leta runaka : .affix
, .affix-top
na .affix-bottom
. Ugomba gutanga imisusire, usibye position: fixed;
kuri .affix
, kuri aya masomo wenyine (utitaye kuriyi plugin) kugirango ukore imyanya ifatika.
Dore uko plugin ya affix ikora:
.affix-top
kugirango yerekane ikintu kiri murwego rwo hejuru-rwinshi. Kuri ubu nta mwanya wa CSS usabwa..affix
hasimburwa .affix-top
no gushiraho position: fixed;
(bitangwa na CSS ya Bootstrap)..affix
na .affix-bottom
. Kubera ko offsets itabishaka, gushiraho imwe igusaba gushyiraho CSS ikwiye. Muri iki kibazo, ongeraho position: absolute;
igihe bibaye ngombwa. Gucomeka ikoresha amakuru yikiranga cyangwa JavaScript ihitamo kugirango umenye aho washyira element kuva aho.Kurikiza intambwe yavuzwe haruguru kugirango ushireho CSS yawe muburyo bumwe bwo gukoresha hepfo.
Kugirango byoroshye kongeramo imyitwarire ya affix kubintu byose, ongera gusa data-spy="affix"
kubintu ushaka kuneka. Koresha offsets kugirango usobanure igihe cyo guhinduranya pinning yikintu.
Hamagara plugin ya affix ukoresheje JavaScript:
Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-
, Nka Muri data-offset-top="200"
.
Izina | Ubwoko | Mburabuzi | ibisobanuro |
---|---|---|---|
offset | umubare | imikorere | ikintu | 10 | Pixels kugirango uve kuri ecran mugihe ubara umwanya wumuzingo. Niba umubare umwe watanzwe, offset izashyirwa mubikorwa byombi hejuru no hepfo. Gutanga umwihariko, hepfo na hejuru ya offset gusa utange ikintu offset: { top: 10 } cyangwa offset: { top: 10, bottom: 5 } . Koresha imikorere mugihe ukeneye kubara byimazeyo offset. |
intego | uwatoranije | node | Ikintu | window ikintu _ |
Kugaragaza intego yibintu byumugereka. |
.affix(options)
Koresha ibikubiyemo nkibirimo. Emera amahitamo object
.
.affix('checkPosition')
Ongera usubiremo imiterere yumugereka ukurikije ibipimo, umwanya, hamwe nu muzingo wibintu bijyanye. ,,, .affix
Nibyiciro byongeweho .affix-top
cyangwa .affix-bottom
bivanwe mubirimo byashyizweho ukurikije leta nshya. Ubu buryo bugomba guhamagarwa igihe cyose ibipimo byibirimo byongeweho cyangwa intego yibintu byahinduwe, kugirango hamenyekane neza neza ibirimo byashyizweho.
Amacomeka ya Bootstrap yerekana ibintu bike byo guhuza ibikorwa bya affix.
Ubwoko bwibyabaye | Ibisobanuro |
---|---|
umugereka.bs.umugereka | Ibirori birasa ako kanya mbere yuko ikintu gishyirwaho. |
byashyizweho.bs.umugereka | Ibirori birukanwa nyuma yikintu kimaze gushyirwaho. |
umugereka-hejuru.bs.umugereka | Ibi birori birasa ako kanya mbere yuko ikintu gishyirwaho-hejuru. |
yashyizwe hejuru-hejuru.bs.umugereka | Ibirori birukanwa nyuma yikintu kimaze gushyirwaho-hejuru. |
umugereka-munsi.bs.umugereka | Ibi birori birasa ako kanya mbere yuko ikintu gishyirwaho-hepfo. |
byashyizweho-hepfo.bs.umugereka | Ibirori birukanwa nyuma yikintu kimaze gushyirwaho-hepfo. |