JavaSkript fɔ di Baybul
Bring Bootstrap in kɔmpɔnɛnt dɛn to layf wit ɔva wan duzin kɔstɔm jQuery plɔgin dɛn. I izi fɔ put dɛn ɔl, ɔ wan bay wan.
Bring Bootstrap in kɔmpɔnɛnt dɛn to layf wit ɔva wan duzin kɔstɔm jQuery plɔgin dɛn. I izi fɔ put dɛn ɔl, ɔ wan bay wan.
Plɔgin dɛn kin inklud wan wan (yuz Bootstrap in wan wan *.js
fayl dɛn), ɔ ɔl wan tɛm (yuz bootstrap.js
ɔ di minified bootstrap.min.js
).
Ɔl tu bootstrap.js
ɛn bootstrap.min.js
gɛt ɔl di plɔgin dɛn na wan fayl. Na wan nɔmɔ yu fɔ put insay.
Sɔm plɔgin dɛn ɛn CSS kɔmpɔnɛnt dɛn de dipen pan ɔda plɔgin dɛn. If yu put plɔgin dɛn wan bay wan, mek shɔ se yu chɛk fɔ dɛn dipɛnsin dɛn ya na di dɔkyumɛnt dɛn. Notis bak se ɔl di plɔgin dɛn dipen pan jQuery (dis min se jQuery fɔ de bifo di plɔgin fayl dɛn). Kɔnsul wibower.json
fɔ si us vɛshɔn dɛn fɔ jQuery dɛn de sɔpɔt.
Yu kin yuz ɔl di Bootstrap plɔgin dɛn jɔs tru di mak API we yu nɔ rayt wan layn na JavaSkript. Dis na Bootstrap in fɔs klas API ɛn i fɔ bi yu fɔs tin we yu fɔ tink bɔt we yu de yuz plɔgin.
Dat se, insay sɔm sityueshɔn dɛn i kin fayn fɔ ɔf dis wok. So, wi de gi bak di abiliti fɔ disable di data atribyut API bay we wi de unbind ɔl di ivintɛns dɛn na di dɔkyumɛnt nemspɛs wit data-api
. Dis luk lɛk dis:
Ɔda we de fɔ du dat, fɔ tɔch wan patikyula plɔgin, jɔs put di plɔgin in nem as nemspɛs wit di data-api nemspɛs lɛk dis:
Nɔ yuz data atribyut frɔm bɔku plɔgin dɛn na di sem ɛlimɛnt. Fɔ ɛgzampul, wan bɔtin nɔ kin ebul fɔ gɛt tultip ɛn fɔ tɔgl wan modal. Fɔ du dis, yuz wan tin we dɛn kin yuz fɔ rap.
Wi biliv bak se yu fɔ ebul fɔ yuz ɔl di Bootstrap plɔgin dɛn jɔs tru di JavaSkript API. Ɔl di pɔblik API dɛn na wan, chenj we dɛn kin yuz fɔ du tin, ɛn dɛn kin gi bak di kɔleshiɔn we dɛn akt pan.
Ɔl di we dɛn fɔ aksept wan opshɔnal opshɔn ɔbjɛkt, wan string we de tɔch wan patikyula we, ɔ natin (we de bigin wan plɔgin wit difɔlt bihayvya):
Ɛni plɔgin de ɛksplɔz in raw kɔnstrɔkta bak pan wan Constructor
prɔpati: $.fn.popover.Constructor
. If yu want fɔ gɛt wan patikyula plɔgin instans, tek am dairekt frɔm wan ɛlimɛnt: $('[rel="popover"]').data('popover')
.
Yu kin chenj di difɔlt sɛtin fɔ wan plɔgin bay we yu chenj di tin we di plɔgin de Constructor.DEFAULTS
yuz:
Sɔntɛnde i nid fɔ yuz Bootstrap plɔgin dɛn wit ɔda UI fremwɔk dɛn. Insay dɛn kayn tin ya, nemspɛs kɔlishin kin apin wan wan tɛm. If dis apin, yu kin kɔl .noConflict
di plɔgin we yu want fɔ gi bak di valyu fɔ.
Bootstrap de gi kɔstɔm ivin fɔ bɔku pan di plɔgin dɛn yunik akshɔn dɛn. Jɛnɛral wan, dɛn wan ya kin kam insay wan infinitiv ɛn past patisipul fɔm - usay di infinitiv (ɛks. show
) kin trig we wan ivin bigin, ɛn in past patisipul fɔm (ɛks. shown
) kin trig we wan akshɔn dɔn.
As of 3.0.0, ɔl di Bootstrap ivin dɛn gɛt nemspɛs.
Ɔl di infinitiv ivin dɛn de gi preventDefault
funkshɔnaliti. Dis de gi di abiliti fɔ stɔp di ɛgzikishɔn fɔ wan akshɔn bifo i bigin.
Di vɛshɔn fɔ ɛni wan pan Bootstrap in jQuery plɔgin dɛn kin akses tru di VERSION
prɔpati fɔ di plɔgin in kɔnstrɔkta. Fɔ ɛgzampul, fɔ di tultip plɔgin:
Bootstrap in plɔgin dɛn nɔ de fɔdɔm bak patikyula grasful wan we JavaSkript nɔ de wok. If yu bisin bɔt di yuza ɛkspiriɛns na dis kes, yuz <noscript>
fɔ ɛksplen di sityueshɔn (ɛn aw fɔ ri-ɛnabul JavaSkript) to yu yuza dɛn, ɛn/ɔ ad yu yon kɔstɔm fɔlbak dɛn.
Bootstrap nɔ ɔfishal wan sɔpɔt tɔd-pati JavaSkript laybri dɛn lɛk Prototype ɔ jQuery UI. Pan ɔl .noConflict
we tin dɛn kin apin ɛn we gɛt nem-spɛs, prɔblɛm dɛn kin de we gɛt fɔ du wit di kɔmpitishɔn we yu nid fɔ fiks fɔ yusɛf.
Fɔ simpul transishɔn ifɛkt dɛn, put transition.js
wan tɛm nia di ɔda JS fayl dɛn. If yu de yuz di wan we dɛn dɔn kɔmpilayt (ɔ we dɛn dɔn smɔl) bootstrap.js
, nid nɔ de fɔ put dis insay—i dɔn ɔlrɛdi de.
Transition.js na wan besik ɛp fɔ transitionEnd
ivintɛns dɛn ɛn bak wan CSS transishɔn ɛmulatɔ. Na di ɔda plɔgin dɛn de yuz am fɔ chɛk fɔ CSS transishɔn sɔpɔt ɛn fɔ kech transishɔn dɛn we de hang.
Transishɔn dɛn kin disable ɔlsay na di wɔl yuz di JavaSkript snipɛt we de dɔŋ ya, we fɔ kam afta transition.js
(ɔ bootstrap.js
ɔ bootstrap.min.js
, as i bi) dɔn lod:
Modal dɛn na strimlayn, bɔt fleksibul, dayalɔg prɔmpt dɛn wit di minimum rikwayd funkshɔnaliti ɛn smat difɔlt dɛn.
Mek shɔ se yu nɔ opin wan modal we ɔda wan stil de si. Fɔ sho mɔ pas wan modal wan tɛm, yu nid kɔstɔm kɔd.
Ɔltɛm tray fɔ put wan modal in HTML kɔd na wan tɔp-lɛvel pozishɔn na yu dɔkyumɛnt fɔ avɔyd ɔda kɔmpɔnɛnt dɛn we de afɛkt di modal in apinɛns ɛn/ɔ di wok we i de du.
Sɔm kɔvayt dɛn de bɔt aw fɔ yuz modal dɛn na mobayl divays dɛn. Si wi brawza sɔpɔt dɔkyumɛnt dɛn fɔ di ditel dɛn.
Bikɔs ɔf aw HTML5 de difayn in sɛmantiks, di autofocus
HTML atribyut nɔ gɛt ɛni ifɛkt na Bootstrap modals. Fɔ mek yu ebul fɔ du di sem tin, yuz sɔm kɔstɔm JavaSkript:
Wan modal we dɛn dɔn rɛnd wit hεda, bɔdi, ɛn sɛt fɔ akshɔn dɛn na di fut.
Toggle wan modal via JavaScript bay we yu klik di bɔtin we de dɔŋ. I go slayv dɔŋ ɛn fade insay frɔm di ɔp pat na di pej.
Mek shɔ se yu ad role="dialog"
ɛn aria-labelledby="..."
, we de rɛfrɛns di modal taytul, to .modal
, ɛn role="document"
to di .modal-dialog
sɛf.
Apat frɔm dat, yu kin gi diskripshɔn fɔ yu modal dayalɔg wit aria-describedby
on .modal
.
Fɔ ɛmbas Yutub fim dɛn na modal dɛn nid fɔ gɛt ɔda JavaSkript we nɔ de na Bootstrap fɔ mek yu ebul fɔ stɔp fɔ ple ɛn ɔda tin dɛn ɔtomɛtik wan. Si dis ɛp Stack Overflow post fɔ mɔ infɔmeshɔn.
Modal dɛn gɛt tu opshɔnal saiz dɛn, we de bay modifya klas dɛn fɔ put pan wan .modal-dialog
.
Fɔ modal dɛn we jɔs de apia pas fɔ fade in fɔ si, pul di .fade
klas frɔm yu modal mak.
Fɔ tek advantej pan di Bootstrap grid sistem insay wan modal, jɔs nest .row
s insay di .modal-body
ɛn afta dat yuz di nɔmal grid sistem klas dɛn.
Yu gɛt bɔku bɔtin dɛn we ɔl de trig di sem modal, jɔs wit smɔl difrɛn tin dɛn? Yuz event.relatedTarget
ɛn HTML data-*
atribyut dɛn (i kin bi bay jQuery ) fɔ chenj di tin dɛn we de insay di modal dipen pan us bɔtin dɛn klik. Si di Modal Events docs fɔ di ditel dɛn bɔt relatedTarget
, .
Di modal plɔgin de chenj yu kɔntinyu we yu ayd we yu aks fɔ am, bay we yu yuz data atribyut ɔ JavaSkript. I de ad bak .modal-open
to di <body>
fɔ ɔvalayz difɔlt skrolin bihayvya ɛn jenarayz wan .modal-backdrop
fɔ gi wan klik eria fɔ dismis di modal dɛn we dɛn sho we yu klik ausayd di modal.
Aktiv wan modal we nɔ rayt JavaSkript. Sɛt data-toggle="modal"
pan wan kɔntrol ɛlimɛnt, lɛk wan bɔtin, wit wan data-target="#foo"
ɔ href="#foo"
fɔ tɔch wan patikyula modal fɔ tɔgl.
Kɔl wan modal wit id myModal
wit wan layn na JavaSkript:
Yu kin pas opshɔn dɛn bay we yu yuz data atribyut ɔ JavaSkript. Fɔ data atribyut dɛn, ad di opshɔn nem to data-
, lɛk insay data-backdrop=""
.
Nem | kayn | balans | tɔk bɔt |
---|---|---|---|
bakdrop fɔ de | boolean ɔ di string'static' |
tru | Inklud wan modal-bakdrop ɛlimɛnt. Ɔda we de fɔ du dat, spɛsifa static fɔ wan bakdrop we nɔ de lɔk di modal we yu klik. |
kibɔd fɔ di kibɔd | boolean we dɛn kɔl | tru | Klos di modal we dɛn prɛs di ɛspɛk ki |
sho | boolean we dɛn kɔl | tru | Sho di modal we dɛn initialize. |
fa | rod | lay | Dis opshɔn nɔ de igen frɔm v3.3.0 ɛn dɛn dɔn pul am na v4. Wi rikɔmɛnd insted fɔ yuz klaynt-sayd tɛmplatin ɔ wan data binding fremwɔk, ɔ kɔl jQuery.load yusɛf. If dɛn gi wan rimot URL, dɛn go lod di tin dɛn wan tɛm bay di we aw jQuery de |
.modal(options)
Aktiv yu kɔntinyu as modal. Aksept wan opshɔn opshɔn dɛn object
.
.modal('toggle')
Manually de toggle wan modal. Ritɔn to di pɔsin we kɔl bifo di modal dɔn rili sho ɔ ayd (dat na bifo di shown.bs.modal
ɔ hidden.bs.modal
ivin apin).
.modal('show')
Manually de opin wan modal. Ritɔn to di pɔsin we kɔl bifo di modal dɔn rili sho (dat na bifo di shown.bs.modal
ivin apin).
.modal('hide')
Manually de ayd wan modal. Ritɔn to di pɔsin we kɔl bifo di modal dɔn rili ayd (dat na bifo di hidden.bs.modal
ivin apin).
.modal('handleUpdate')
Rijɔst di modal in pozishɔn fɔ kɔnt wan skrolba if wan fɔ apia, we go mek di modal jomp to di lɛft.
Na onli nid we di ayt fɔ di modal chenj we i opin.
Bootstrap in modal klas de ɛksplɔz sɔm ivin dɛn fɔ huk insay modal funkshɔnaliti.
Ɔl di modal ivin dɛn de faya na di modal sɛf (dat na na di <div class="modal">
).
Di kayn tin we apin | Tɔk bɔt |
---|---|
sho.bs.modal fɔ sho | Dis ivent de faya wantɛm wantɛm we dɛn kɔl di show instans mɛtɔd. If na klik, di ɛlimɛnt we dɛn klik de as di relatedTarget prɔpati fɔ di ivin. |
we dɛn sho.bs.modal | Dis ivent de faya we di modal dɔn mek di pɔsin we de yuz am si (go wet fɔ mek di CSS transishɔn dɛn dɔn). If na klik, di ɛlimɛnt we dɛn klik de as di relatedTarget prɔpati fɔ di ivin. |
ayd.bs.modal fɔ di wan dɛn we de | Dis ivent de faya wantɛm wantɛm we hide dɛn dɔn kɔl di instans mɛtɔd. |
we dɛn ayd.bs.modal | Dis ivent de faya we di modal dɔn dɔn fɔ ayd frɔm di yuza (go wet fɔ CSS transishɔn dɛn fɔ dɔn). |
lod.bs.modal we dɛn dɔn lod | Dis ivent de faya we di modal dɔn lod kɔntinyu yuz di remote opshɔn. |
Ad drɔpdɔwn mɛnyu dɛn to klos to ɛnitin wit dis simpul plɔgin, lɛk di navbar, tab dɛn, ɛn pils dɛn.
Via data atribyut ɔ JavaSkript, di drɔpdɔwn plɔgin de chenj di tin dɛn we dɛn ayd (drɔpdɔwn mɛnyu dɛn) bay we i de chenj di .open
klas na di mama ɛn papa list aytem.
Na mobayl divays dɛn, we yu opin wan drɔpdɔwn ad wan .dropdown-backdrop
as tap eria fɔ lɔk drɔpdɔwn mɛnyu dɛn we yu tap na do na di mɛnyu, we na sɔntin we yu nid fɔ gɛt di rayt iOS sɔpɔt. Dis min se fɔ chenj frɔm wan opin drɔpdɔwn mɛnyu to difrɛn drɔpdɔwn mɛnyu yu nid fɔ tap ɛkstra na mobayl.
Notis: Dɛn data-toggle="dropdown"
kin abop pan di atribyut fɔ lɔk drɔpdɔwn mɛnyu dɛn na wan aplikeshɔn lɛvɛl, so i fayn fɔ yuz am ɔltɛm.
Ad data-toggle="dropdown"
to link ɔ bɔtin fɔ chenj wan drɔp-dɔwn.
Fɔ mek di URL dɛn nɔ pwɛl wit di link bɔtin dɛn, yuz di data-target
atribyut instead fɔ href="#"
.
Kɔl di drɔpdɔwn dɛn bay JavaSkript:
data-toggle="dropdown"
stil nid fɔ deI nɔ mata if yu kɔl yu drɔpdɔwn bay JavaSkript ɔ insted yu yuz di data-api, data-toggle="dropdown"
i nid fɔ de ɔltɛm na di drɔpdɔwn in trig ɛlimɛnt.
Nɔn
$().dropdown('toggle')
Tɔgl di drɔpdɔwn mɛnyu fɔ wan givɛn navbar ɔ tab nevigishɔn.
Ɔl di drɔpdɔwn ivin dɛn de faya na di .dropdown-menu
's mama ɛn papa ɛlimɛnt.
Ɔl di drɔpdɔwn ivin dɛn gɛt relatedTarget
prɔpati, we in valyu na di toggling ankɔ ɛlimɛnt.
Di kayn tin we apin | Tɔk bɔt |
---|---|
sho.bs.drɔpdɔwn | Dis ivent de faya wantɛm wantɛm we dɛn kɔl di sho instans mɛtɔd. |
sho.bs.drɔpdɔwn | Dis ivin de faya we dɛn dɔn mek di drɔpdɔwn si di pɔsin we de yuz am (go wet fɔ CSS transishɔn dɛn, fɔ dɔn). |
ayd.bs.drɔpdɔwn | Dis ivent de faya wantɛm wantɛm we dɛn dɔn kɔl di ayd instans mɛtɔd. |
ayd.bs.drɔpdɔwn | Dis ivent de faya we di drɔpdɔwn dɔn dɔn fɔ ayd frɔm di yuza (go wet fɔ CSS transishɔn dɛn, fɔ dɔn). |
Di ScrollSpy plɔgin na fɔ ɔtomɛtik ɔpdet nav target dɛn bays pan skrol pozishɔn. Skrol di eria we de dɔŋ di navbar ɛn wach di aktif klas chenj. Di drɔpdɔwn sab aytem dɛn go aylayt bak.
Ad leggings keytar, brunch id art pati dolor labore. Pitchfork yr enim lo-fi bifo dem sold out qui. Tumblr fam-to-tebul baysikul rayt ɛnitin. Anim keffiyeh karles kardigan. Velit seitan mcsweeney in foto booth 3 wolf mun irure. Cosby sweta lomo jins shɔt, williamsburg hoodie minim qui yu probabli nɔ yɛri bɔt dɛn et kadigan trɔst fund culpa biodiesel wes anderson aesthetic. Nihil tatu accusamus, cred irony bayodizel keffiyeh artisan ullamco konsekvat.
Veniam marfa moustache sketbod, adipisicing fugiat velit pitchfork biad. Frigan biad aliqua cupidatat mcsweeney in vero. Cupidatat fo loko nisi, ea helvetika nula karles. Tattoo cosby sweta fud trak, mcsweeney in quis non frigan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetik eksasaiz quis gentrify. Bruklin adipisicing kraft bia vays keytar deserunt.
Occaecat komodo alikwa delektɔs. Fap kraft bia deserunt skatebord ea. Lomo baysikul rayt adipisicing banh mi, velit ea sunt nɛks lɛvɛl locavore singl-ɔrijin kɔfi in magna veniam. Haj layf id vinyl, eko pak konsekwat quis aliquip banh mi pitchfork. Vero VHS est adipisisin fɔ di wan dɛn we de yuz am. Konsectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus konsectetur fanny pak ifon.
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 mesenja bag marfa wetin delektus fud trak. Sapiente sint id asumenda. Locavore sed helvetica cliche irony, thundercats yu probabli noh don yehri boht dem consequat hoodie gluten-fri lo-fi fap aliquip. Labore elit placeat bifo dɛn sɛl aut, terry richardson proident brunch nesciunt quis cosby sweta pariatur keffiyeh ut helvetica artisan. Cardigan kraft bia seitan redimade velit. VHS chambray laboris t ɛ m ɔ r v ɛ n ɛ m. Anim mollit minim komodo ullamco na di tendakat.
Navbar link dɛn fɔ gɛt id target dɛn we dɛn kin sɔlv. Fɔ ɛgzampul, a <a href="#home">home</a>
fɔ kɔrɛkt to sɔntin we de na di DOM lɛk <div id="home"></div>
.
:visible
target ɛlimɛnt dɛn we dɛn nɔ tek tɛm witTarget elements we nɔ de :visible
akɔdin to jQuery go ignore ɛn dɛn kɔrɛspɔndɛns nav aytem dɛn nɔ go ɛva aylayt.
No mata di implimentishɔn we, scrollspy nid fɔ yuz position: relative;
pan di ɛlimɛnt we yu de spay pan. Bɔku tɛm dis na di <body>
. We yu de skrol spay pan ɛlimɛnt dɛn we nɔto di <body>
, mek shɔ se yu gɛt height
sɛt ɛn overflow-y: scroll;
yuz am.
Fɔ mek i izi fɔ ad skrolspi bihayvya to yu tɔpba nevigishɔn, ad data-spy="scroll"
to di ɛlimɛnt we yu want fɔ spay pan (mɔs tipikli dis go bi di <body>
). Dɔn ad di data-target
atribyut wit di ID ɔ klas fɔ di mama ɛn papa ɛlimɛnt fɔ ɛni Bootstrap .nav
kɔmpɔnɛnt.
Afta yu dɔn ad position: relative;
yu CSS, kɔl di skrol dɛn bay JavaSkript:
.scrollspy('refresh')
We yu de yuz scrollspy in kɔnjɔkt wit ad ɔ pul ɛlimɛnt dɛn frɔm di DOM, yu go nid fɔ kɔl di rifresh we lɛk so:
Yu kin pas opshɔn dɛn bay we yu yuz data atribyut ɔ JavaSkript. Fɔ data atribyut dɛn, ad di opshɔn nem to data-
, lɛk insay data-offset=""
.
Nem | kayn | balans | tɔk bɔt |
---|---|---|---|
ɔfset | nɔmba | 10. Di wan dɛn we de | Piksɛl dɛn fɔ ɔfset frɔm ɔp we yu de kɔl di pozishɔn fɔ skrol. |
Di kayn tin we apin | Tɔk bɔt |
---|---|
aktivet.bs.skrol dɛn | Dis ivent de faya ɛnitɛm we di skrol spy mek nyu tin wok. |
Ad kwik, dinamik tab funkshɔnaliti fɔ chenj tru pan dɛn fɔ lokal kɔntinyu, ivin tru drɔpdɔwn mɛnyu dɛn. Tab dɛn we dɛn dɔn nɛst nɔ de sɔpɔt.
Raw denim yu probabli noh yehri boht dem jean shorts Austin. Nesciunt tofu stumptown aliqua, retro sint masta klin. Mustache kliche tempor, wiliamsbɔg karls vegan ɛlvɛtika. Reprehenderit butcher retro keffiyeh drim kat sint. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip plesat salvia cillum iphone. Seitan aliquip quis kardigan american klos, 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.
Dis plɔgin de ɛkstɛnd di tab nevigishɔn kɔmpɔnɛnt fɔ ad tab eria dɛn.
Enable tabable tabs via JavaScript (ɛni tab nid fɔ aktiv wan wan):
Yu kin aktiv wan wan tab dɛn difrɛn we dɛn:
Yu kin aktiv wan tab ɔ pil nevigishɔn we yu nɔ rayt ɛni JavaSkript bay we yu jɔs spɛsifa data-toggle="tab"
ɔ data-toggle="pill"
pan wan ɛlimɛnt. If yu ad di nav
ɛn nav-tabs
klas dɛn to di tab ul
, yu go yuz di Bootstrap tab stayl , we yu ad di nav
ɛn nav-pills
klas dɛn go yuz di pil stayl .
Fɔ mek di tab dɛn go fayn, ad .fade
to ɛni wan pan dɛn .tab-pane
. Di fɔs tab pan fɔ gɛt bak .in
fɔ mek di fɔs tin we de insay de sho.
$().tab
Aktiv wan tab ɛlimɛnt ɛn kɔntinyu kɔntena. Tab fɔ gɛt ɛni wan pan wan data-target
ɔ wan href
we de tɔch wan kɔntena node na di DOM. Insay di ɛgzampul dɛn we de ɔp, di tab dɛn na di <a>
s wit data-toggle="tab"
atribyut dɛn.
.tab('show')
Pik di tab we dɛn gi ɛn sho di tin dɛn we gɛt fɔ du wit am. Ɛni ɔda tab we dɛn bin dɔn pik bifo tɛm nɔ kin pik ɛn di tin dɛn we gɛt fɔ du wit am kin ayd. Ritɔn to di pɔsin we kɔl bifo dɛn rili sho di tab pan (dat na bifo di shown.bs.tab
tin apin).
We yu de sho nyu tab, di tin dɛn we de apin de faya di ɔda we we de dɔŋ ya:
hide.bs.tab
(na di tab we de wok naw)show.bs.tab
(na di tab we dɛn go sho)hidden.bs.tab
(na di fɔs aktif tab, di sem wan we bin de fɔ di hide.bs.tab
ivin)shown.bs.tab
(na di nyu-aktiv tab we jɔs sho, di sem wan we de fɔ di show.bs.tab
ivin)If no tab nɔ bin dɔn ɔlrɛdi aktif, den di hide.bs.tab
ɛn hidden.bs.tab
ivin dɛn nɔ go faya.
Di kayn tin we apin | Tɔk bɔt |
---|---|
sho.bs.tab fɔ sho | Dis ivent de faya pan tab sho, bɔt bifo dɛn dɔn sho di nyu tab. Yuz event.target ɛn event.relatedTarget fɔ tɔch di aktiv tab ɛn di aktiv tab we bin de bifo (if i de) rispɛktful wan. |
we dɛn sho.bs.tab | Dis ivent de faya pan tab sho afta dɛn dɔn sho wan tab. Yuz event.target ɛn event.relatedTarget fɔ tɔch di aktiv tab ɛn di aktiv tab we bin de bifo (if i de) rispɛktful wan. |
ayd.bs.tab fɔ di wan dɛn we de | Dis ivent de faya we dɛn fɔ sho nyu tab (ɛn so di fɔs aktif tab fɔ ayd). Yuz event.target ɛn event.relatedTarget fɔ tɔch di tab we de wok naw ɛn di nyu tab we go aktiv jisnɔ, rispɛktful wan. |
di tab we dɛn ayd.bs | Dis ivent de faya afta dɛn dɔn sho nyu tab (ɛn so di fɔs aktif tab de ayd). Yuz event.target ɛn event.relatedTarget fɔ tɔch di fɔs aktif tab ɛn di nyu aktif tab, rispɛktful wan. |
Inspɛkt bay di fayn fayn jQuery.tipsy plɔgin we Jason Frame rayt; Tultip dɛn na ɔpdet vɛshɔn, we nɔ de abop pan pikchɔ dɛn, dɛn de yuz CSS3 fɔ animashɔn dɛn, ɛn data-atribyut dɛn fɔ lokal taytul stɔrɔj.
Tultip dɛn we gɛt taytul dɛn we nɔ gɛt ziro nɔ de ɛva sho.
Hova oba di link dɛn we de dɔŋ fɔ si tultip dɛn:
Tayt pant neks levul keffiyeh yu probabli no don yehri boht dem. Foto booth biad raw denim letterpress vegan mesenja bag stumptown. Fam-to-tebul seitan, mcsweeney in fixie sataynabul quinoa 8-bit american apɛl gɛt wan tɛri richardson vaynil chambray. Beard stumptown, kardigan banh mi lomo tandakat. Tofu biodizel williamsburg marfa, fo loko mcsweeney in klin vegan chambray. A rili ironic artisan wetin keytar , scenester fam-to-tebul banksy Austin twita handle frigan cred raw denim singl-orijin kɔfi vayral.
Fo opshɔn dɛn de: ɔp, rayt, dɔŋ, ɛn lɛft alaynɛd.
Fɔ pefɔmɛns rizin, di Tultip ɛn Popover data-apis na opt-in, we min se yu fɔ initialize dɛn yusɛf .
Wan we fɔ initialize ɔl di tultip dɛn na wan pej na fɔ pik dɛn bay dɛn data-toggle
atribyut:
Di tultip plɔgin de jenarayz kɔntinyu ɛn mak we dɛn aks fɔ, ɛn bay difɔlt i de put tultip dɛn afta dɛn trig ɛlimɛnt.
Trig di tultip bay JavaSkript:
Di mak we yu nid fɔ wan tultip na jɔs wan data
atribyut ɛn title
na di HTML ɛlimɛnt yu want fɔ gɛt tultip. Di mak we dɛn dɔn mek fɔ wan tultip rili simpul, pan ɔl we i nid fɔ gɛt pozishɔn (bay difɔlt, top
di plɔgin sɛt to).
Sɔntɛnde yu kin want fɔ ad wan tultip to wan haypa link we de rap bɔku layn dɛn. Di difɔlt bihayvya fɔ di tultip plɔgin na fɔ sɛnt am ɔrizɔntal ɛn vertikal. Ad white-space: nowrap;
to yu ankɔ dɛn fɔ avɔyd dis.
We yu de yuz tultip dɛn pan ɛlimɛnt dɛn we de insay a .btn-group
ɔ wan .input-group
, ɔ pan ɛlimɛnt dɛn we gɛt fɔ du wit tebul ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), yu go gɛt fɔ spɛsifa di opshɔn container: 'body'
(we dɛn rayt dɔŋ ya) fɔ avɔyd sayd ɛfɛkt dɛn we yu nɔ want (lɛk di ɛlimɛnt we de gro big ɛn/ ɔ i kin lɔs in rawnd kɔna dɛn we dɛn trig di tultip).
Fɔ di wan dɛn we de yuz kibɔd, ɛn mɔ di wan dɛn we de yuz ɛp tɛknɔlɔji dɛn, yu fɔ jɔs ad tultip dɛn to di tin dɛn we yu kin pe atɛnshɔn pan di kibɔd lɛk link dɛn, fɔm kɔntrol dɛn, ɔ ɛni ɛlimɛnt we yu want we gɛt tabindex="0"
atribyut.
Fɔ ad tultip to wan disabled
ɔ .disabled
ɛlimɛnt, put di ɛlimɛnt insay a <div>
ɛn yuz di tultip to dat <div>
insted.
Yu kin pas opshɔn dɛn bay we yu yuz data atribyut ɔ JavaSkript. Fɔ data atribyut dɛn, ad di opshɔn nem to data-
, lɛk insay data-animation=""
.
Nem | Kayn | Balans | Tɔk bɔt |
---|---|---|---|
animashɔn fɔ di pikchɔ dɛn | boolean we dɛn kɔl | tru | Aplay wan CSS fade transishɔn to di tultip |
kɔntena we dɛn kin put insay | string fɔ di wan dɛn we de | lay | lay | Apɛnd di tultip to wan patikyula ɛlimɛnt. Fɔ ɛgzampul: |
westɛm | nɔmba | tin | 0. Di wan dɛn we de | Dilay fɔ sho ɛn ayd di tultip (ms) - nɔ de aplay to manual trigger tayp If dɛn gi wan nɔmba, dɛn kin delay fɔ ɔl tu di ayd/sho Objekt strɔkchɔ na: |
html na di pikchɔ | boolean we dɛn kɔl | lay | Put HTML insay di tultip. If na lay, text dɛn go yuz jQuery in we fɔ put kɔntinyu insay di DOM. Yuz tɛks if yu de wɔri bɔt XSS atak dɛn. |
ples fɔ put am | string fɔ di wan dɛn we de | wok | 'ɔp' | Aw fɔ posishun di tultip - ɔp | dɔŋ ya | lɛft | rayt | ɔto. We dɛn yuz wan fɛnshɔn fɔ no di plesmɛnt, dɛn kin kɔl am wit di tultip DOM node as in fɔs argumɛnt ɛn di trigɛn ɛlimɛnt DOM node as in sɛkɔn. Di |
sɛlɛktɔ | rop | lay | If dɛn gi wan sɛlɛktɔ, dɛn go gi tultip ɔbjɛkt dɛn to di target dɛn we dɛn dɔn spɛsifa. Insay prɔsis, dɛn kin yuz dis fɔ mek dinamik HTML kɔntinyu fɔ gɛt tultip dɛn we dɛn ad. Si dis ɛn wan ɛgzampul we gɛt bɔku tin dɛn fɔ no bɔt . |
tɛmplat fɔ di wan dɛn we de | rop | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Base HTML fɔ yuz we yu de mek di tultip. Di tultip dɛn
Di ɔtamost wrap ɛlimɛnt fɔ gɛt di |
taytul | string fɔ di wan dɛn we de | wok | '' . | Difɔlt taytul valyu if If dɛn gi wan fɛnshɔn, dɛn go kɔl am wit in |
stat | rop | 'hova fɔs'. | Aw di tultip de trig - klik | hover fɔ di wan dɛn we de wok | fɔs fɔs | buk. Yu kin pas bɔku trig dɛn; separet dɛn wit wan ples. manual nɔ kin ebul fɔ jɔyn wit ɛni ɔda trig. |
di say fɔ si di tin dɛn | string fɔ di wan dɛn we de | ɔbjɛkt | wok | { sɛlɛktɔ: 'bɔdi', padding: 0 } | Kip di tultip insay di bɔund dɛn fɔ dis ɛlimɛnt. Fɔ ɛgzampul: If dɛn gi wan fɛnshɔn, dɛn kɔl am wit di trig ɛlimɛnt DOM node as in wangren argumɛnt. Di |
Opshɔn fɔ wan wan tultip dɛn kin ɔda we fɔ spɛsifa tru di yus fɔ data atribyut dɛn, lɛk aw dɛn ɛksplen am ɔp.
$().tooltip(options)
Ataya wan tultip handla to wan ɛlimɛnt kɔlɛkshɔn.
.tooltip('show')
Rivɛl wan ɛlimɛnt in tultip. Ritɔn to di pɔsin we kɔl bifo dɛn rili sho di tultip (dat na bifo di shown.bs.tooltip
tin apin). Dis kin bi "manual" trigεrin fכ di tultip. Tultip dɛn we gɛt taytul dɛn we nɔ gɛt ziro nɔ de ɛva sho.
.tooltip('hide')
Ayd wan ɛlimɛnt in tultip. Ritɔn to di pɔsin we kɔl bifo di tultip dɔn rili ayd (dat na bifo di hidden.bs.tooltip
tin apin). Dis kin bi "manual" trigεrin fכ di tultip.
.tooltip('toggle')
Toggles wan element in tultip. Ritɔn to di pɔsin we kɔl bifo dɛn rili sho ɔ ayd di tultip (dat na bifo di shown.bs.tooltip
ɔ hidden.bs.tooltip
ivin apin). Dis kin bi "manual" trigεrin fכ di tultip.
.tooltip('destroy')
Ayd ɛn pwɛl wan ɛlimɛnt in tultip. Tultip dɛn we de yuz delegɛshɔn (we dɛn mek yuz di selector
opshɔn ) nɔ kin ebul fɔ pwɛl wan wan pan disɛndant trig ɛlimɛnt dɛn.
Di kayn tin we apin | Tɔk bɔt |
---|---|
sho.bs.tultip fɔ sho | Dis ivent de faya wantɛm wantɛm we dɛn kɔl di show instans mɛtɔd. |
we dɛn sho.bs.tultip | Dis ivent de faya we dɛn dɔn mek di tultip si di pɔsin we de yuz am (go wet fɔ mek di CSS transishɔn dɛn dɔn). |
ayd.bs.tultip fɔ di wan dɛn we de | Dis ivent de faya wantɛm wantɛm we hide dɛn dɔn kɔl di instans mɛtɔd. |
hidden.bs.tultip fɔ di wan dɛn we de | Dis ivent de faya we di tultip dɔn dɔn fɔ ayd frɔm di yuza (go wet fɔ CSS transishɔn dɛn fɔ dɔn). |
dɛn dɔn put insay.bs.tultip | Dis ivent de faya afta di show.bs.tooltip ivent we dɛn dɔn ad di tultip tɛmplat to di DOM. |
Ad smɔl ɔvalayz dɛn fɔ kɔntinyu, lɛk di wan dɛn we de na di iPad, to ɛni ɛlimɛnt fɔ haus sɛkɔndari infɔmeshɔn.
Popovers we dɛn ɔl tu taytul ɛn kɔntinyu na zero-lɛngth nɔ de ɛva sho.
Popovers nid di tultip plɔgin fɔ de insay yu vɛshɔn fɔ Bootstrap.
Fɔ pefɔmɛns rizin, di Tultip ɛn Popover data-apis na opt-in, we min se yu fɔ initialize dɛn yusɛf .
Wan we fɔ initialize ɔl di popovers na wan pej go bi fɔ pik dɛn bay dɛn data-toggle
atribyut:
We yu de yuz popovers pan elemɛnt dɛn we de insay a .btn-group
ɔ wan .input-group
, ɔ pan ɛlimɛnt dɛn we gɛt fɔ du wit tebul ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), yu go gɛt fɔ spɛsifa di opshɔn container: 'body'
(we dɛn rayt dɔŋ ya) fɔ avɔyd sayd ɛfɛkt dɛn we yu nɔ want (lɛk di ɛlimɛnt we de gro big ɛn/ ɔ fɔ lɔs in rawnd kɔna dɛn we di popover de trig).
Fɔ ad popover to a disabled
ɔ .disabled
element, put di element insay a <div>
ɛn put di popover to dat <div>
insted.
Sɔntɛnde yu kin want fɔ ad wan popover to wan haypa link we de rap bɔku layn dɛn. Di difɔlt bihayvya fɔ di popover plɔgin na fɔ sɛnt am ɔrizɔntal ɛn vertikal. Ad white-space: nowrap;
to yu ankɔ dɛn fɔ avɔyd dis.
Fo opshɔn dɛn de: ɔp, rayt, dɔŋ, ɛn lɛft alaynɛd.
Sed posuere konsectetur est na di lobortis. Aenean yu leo quam. Pɛlɛntesk ɔrnare sem lacinia kwam venɛnatis vestibulum.
Sed posuere konsectetur est na di lobortis. Aenean yu leo quam. Pɛlɛntesk ɔrnare sem lacinia kwam venɛnatis vestibulum.
Sed posuere konsectetur est na di lobortis. Aenean yu leo quam. Pɛlɛntesk ɔrnare sem lacinia kwam venɛnatis vestibulum.
Sed posuere konsectetur est na di lobortis. Aenean yu leo quam. Pɛlɛntesk ɔrnare sem lacinia kwam venɛnatis vestibulum.
Yuz di focus
triga fɔ dismis popovers pan di nɛks klik we di yuza mek.
Fɔ mek yu krɔs-brawza ɛn krɔs-pletfɔm biev fayn, yu fɔ yuz di <a>
tɛg, nɔto di <button>
tɛg, ɛn yu fɔ put di role="button"
ɛn tabindex
atribyut dɛn bak.
Enable popovers bay JavaSkript:
Yu kin pas opshɔn dɛn bay we yu yuz data atribyut ɔ JavaSkript. Fɔ data atribyut dɛn, ad di opshɔn nem to data-
, lɛk insay data-animation=""
.
Nem | Kayn | Balans | Tɔk bɔt |
---|---|---|---|
animashɔn fɔ di pikchɔ dɛn | boolean we dɛn kɔl | tru | Aplay wan CSS fade transishɔn to di popover |
kɔntena we dɛn kin put insay | string fɔ di wan dɛn we de | lay | lay | Apɛnd di popover to wan patikyula ɛlimɛnt. Fɔ ɛgzampul: |
satisfay | string fɔ di wan dɛn we de | wok | '' . | Difɔlt kɔntinyu valyu if If dɛn gi wan fɛnshɔn, dɛn go kɔl am wit in |
westɛm | nɔmba | tin | 0. Di wan dɛn we de | Dilay fɔ sho ɛn ayd di popover (ms) - nɔ de aplay to manual trigger type If dɛn gi wan nɔmba, dɛn kin delay fɔ ɔl tu di ayd/sho Objekt strɔkchɔ na: |
html na di pikchɔ | boolean we dɛn kɔl | lay | Put HTML insay di popover. If na lay, text dɛn go yuz jQuery in we fɔ put kɔntinyu insay di DOM. Yuz tɛks if yu de wɔri bɔt XSS atak dɛn. |
ples fɔ put am | string fɔ di wan dɛn we de | wok | 'rayt' | Aw fɔ posishun di popover - top | dɔŋ ya | lɛft | rayt | ɔto. We dɛn yuz wan fɛnshɔn fɔ no di plesmɛnt, dɛn kin kɔl am wit di popover DOM node as in fɔs argumɛnt ɛn di trigɛn ɛlimɛnt DOM node as in sɛkɔn. Di |
sɛlɛktɔ | rop | lay | If dɛn gi wan sɛlɛktɔ, dɛn go deleget popover ɔbjɛkt dɛn to di target dɛn we dɛn dɔn spɛsifa. Insay prɔsis, dɛn kin yuz dis fɔ mek dinamik HTML kɔntinyu fɔ gɛt popovers we dɛn ad. Si dis ɛn wan ɛgzampul we gɛt bɔku tin dɛn fɔ no bɔt . |
tɛmplat fɔ di wan dɛn we de | rop | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Base HTML fɔ yuz we yu de mek di popover. Di popover's Di popover's
Di ɔtamost wrap ɛlimɛnt fɔ gɛt di |
taytul | string fɔ di wan dɛn we de | wok | '' . | Difɔlt taytul valyu if If dɛn gi wan fɛnshɔn, dɛn go kɔl am wit in |
stat | rop | 'klik'. | Aw popover de trig - klik | hover fɔ di wan dɛn we de wok | fɔs fɔs | buk. Yu kin pas bɔku trig dɛn; separet dɛn wit wan ples. manual nɔ kin ebul fɔ jɔyn wit ɛni ɔda trig. |
di say fɔ si di tin dɛn | string fɔ di wan dɛn we de | ɔbjɛkt | wok | { sɛlɛktɔ: 'bɔdi', padding: 0 } | Kip di popover insay di bounds fɔ dis element. Fɔ ɛgzampul: If dɛn gi wan fɛnshɔn, dɛn kɔl am wit di trig ɛlimɛnt DOM node as in wangren argumɛnt. Di |
Opshɔn fɔ wan wan popover dɛn kin ɔda we fɔ spɛsifa tru di yus fɔ data atribyut dɛn, as dɛn ɛksplen am ɔp.
$().popover(options)
Initializes popovers fɔ wan ɛlimɛnt kɔllɛkshɔn.
.popover('show')
Rivɛl wan ɛlimɛnt in popover. Ritɔn to di pɔsin we kɔl bifo di popover dɔn rili sho (dat na bifo di shown.bs.popover
ivin apin). dis dεn kin kכnsidr am as "manual" trigεr fכ di popover. Popovers we dɛn ɔl tu taytul ɛn kɔntinyu na zero-lɛngth nɔ de ɛva sho.
.popover('hide')
Ayd wan ɛlimɛnt in popover. Ritɔn to di pɔsin we kɔl bifo di popover dɔn rili ayd (dat na bifo di hidden.bs.popover
ivin apin). dis dεn kin kכnsidr am as "manual" trigεr fכ di popover.
.popover('toggle')
Toggles wan element in popover. Ritɔn to di pɔsin we kɔl bifo di popover dɔn rili sho ɔ ayd (dat na bifo di shown.bs.popover
ɔ hidden.bs.popover
ivin apin). dis dεn kin kכnsidr am as "manual" trigεr fכ di popover.
.popover('destroy')
Ayd ɛn pwɛl wan ɛlimɛnt in popover. Popovers we de yuz delegɛshɔn (we dɛn mek yuz di selector
opshɔn ) nɔ kin ebul fɔ pwɛl wan wan pan disɛndant trig ɛlimɛnt dɛn.
Di kayn tin we apin | Tɔk bɔt |
---|---|
sho.bs.popover fɔ di wan dɛn we de | Dis ivent de faya wantɛm wantɛm we dɛn kɔl di show instans mɛtɔd. |
sho.bs.popova | Dis ivent de faya we di popover dɔn mek visible to di yuza (go wet fɔ CSS transishɔn fɔ dɔn). |
ayd.bs.popover fɔ di wan dɛn we de | Dis ivent de faya wantɛm wantɛm we hide dɛn dɔn kɔl di instans mɛtɔd. |
ayd.bs.powa we de | Dis ivent de faya we di popover dɔn dɔn fɔ ayd frɔm di yuza (go wet fɔ CSS transishɔn dɛn fɔ dɔn). |
insay.bs.poova | Dis ivent de faya afta di show.bs.popover ivent we dɛn dɔn ad di popover tɛmplat to di DOM. |
Ad dismis funkshɔnaliti to ɔl di alɛt mɛsej dɛn wit dis plɔgin.
We yu de yuz .close
bɔtin, i fɔ bi di fɔs pikin fɔ di .alert-dismissible
ɛn nɔ tɛks kɔntinyu nɔ go kam bifo am na di mak.
Chenj dis ɛn dat ɛn tray bak. Duis mollis, est non komodo luktus, nisi erat porttitor ligula, eget lasinia odio sem nec elit. Kras mattis consectetur purus sidon amet fεmεnt.
Jɔs ad data-dismiss="alert"
to yu klos bɔtin fɔ gi yu wan alɛt klos funkshɔnaliti ɔtomɛtik wan. We yu lɔk wan alɛt, i de pul am na di DOM.
Fɔ mek yu alɛt dɛn yuz animashɔn we yu de klos, mek shɔ se dɛn gɛt di .fade
ɛn.in
klas dɛn we dɛn dɔn ɔlrɛdi aplay to dɛn.
$().alert()
Mek wan alɛt lisin fɔ klik ivin dɛn pan disɛndant ɛlimɛnt dɛn we gɛt di data-dismiss="alert"
atribyut. (Nɔ nid we yu de yuz di data-api in ɔto-initializeshɔn.)
$().alert('close')
Klos wan alɛt bay we i pul am na di DOM. If di .fade
ɛn .in
klas dɛn de na di ɛlimɛnt, di alɛt go dɔn bifo dɛn pul am.
Bootstrap in alert plɔgin de ɛksplɔz sɔm ivin dɛn fɔ huk insay alert funkshɔnaliti.
Di kayn tin we apin | Tɔk bɔt |
---|---|
klos.bs.alɛt fɔ di wan dɛn we de | Dis ivent de faya wantɛm wantɛm we dɛn kɔl di close instans mɛtɔd. |
klos.bs.alɛt | Dis ivent de faya we di alɛt dɔn lɔk (go wet fɔ CSS transishɔn dɛn fɔ dɔn). |
Du mɔ wit bɔtin dɛn. Kɔntrol bɔtin de tɔk ɔ mek grup dɛn fɔ bɔtin fɔ mɔ kɔmpɔnɛnt dɛn lɛk tulba dɛn.
Fayafaks de kɔntinyu fɔm kɔntrol stet dɛn (disabledness ɛn checkedness) akɔdin to pej lod dɛn . Wan we fɔ sɔlv dis na fɔ yuz autocomplete="off"
. Si Mozilla bɔg #654072 .
Ad data-loading-text="Loading..."
fɔ yuz wan lod stet na wan bɔtin.
Dis ficha nɔ de igen frɔm v3.3.5 ɛn dɛn dɔn pul am na v4.
Fɔ di sake fɔ dis demonstreshɔn, wi de yuz data-loading-text
ɛn $().button('loading')
, bɔt nɔto di wangren stet we yu kin yuz. Si mɔ bɔt dis dɔŋ ya na di $().button(string)
dɔkyumentri .
Add data-toggle="button"
fɔ aktiv di toggling pan wan singl bɔtin.
.active
ɛnaria-pressed="true"
Fɔ di bɔtin dɛn we dɛn dɔn chenj bifo tɛm, yu fɔ ad di .active
klas ɛn di aria-pressed="true"
atribyut to di button
yusɛf.
Ad data-toggle="buttons"
to wan .btn-group
chɛkbɔks we gɛt ɔ redio input dɛn fɔ mek yu ebul fɔ tɔgl insay dɛn yon stayl dɛn.
.active
Fɔ opshɔn dɛn we yu dɔn pik bifo tɛm, yu fɔ ad di .active
klas to di input’s label
yusɛf.
If di chɛk stet fɔ wan chɛkbɔks bɔtin ɔpdet we yu nɔ faya wan click
ivin na di bɔtin (ɛgz. via <input type="reset">
ɔ via sɛtin di checked
prɔpati fɔ di input), yu go nid fɔ tɔgl di .active
klas pan di input in yon label
.
$().button('toggle')
Toggles push stet. Gi di bɔtin di we aw i tan lɛk se dɛn dɔn aktiv am.
$().button('reset')
Riset bɔtin stet - swap tɛks to ɔrijinal tɛks. Dis we ya na asynchronous ɛn i de kam bak bifo di riset dɔn rili dɔn.
$().button(string)
Swap tɛks to ɛni data we dɛn dɔn difayn tɛks stet.
Fleksibul plɔgin we de yuz wan anful klas fɔ izi tɔgl bihayvya.
Kollaps nid di transitions plɔgin fɔ de insay yu vɛshɔn fɔ Bootstrap.
Klik di bɔtin dɛn we de dɔŋ fɔ sho ɛn ayd ɔda ɛlimɛnt bay we dɛn chenj di klas:
.collapse
de ayd di tin dɛn we de insay.collapsing
na di tɛm we dɛn de chenj.collapse.in
sho wetin de insayYu kin yuz wan link wit di href
atribyut, ɔ wan bɔtin wit di data-target
atribyut. Insay dɛn tu kes ya, data-toggle="collapse"
dɛn nid fɔ du di.
Ekstend di difɔlt kollaps bihayvya fɔ mek wan akodiɔn wit di panɛl kɔmpɔnɛnt.
I posibul tu fo swap out .panel-body
s wit .list-group
s.
Mek shɔ se yu ad aria-expanded
pan di kɔntrol ɛlimɛnt. Dis atribyut de difayn klia wan di stet we di kollapsbul ɛlimɛnt de naw fɔ skrin rida ɛn di sem kayn ɛp tɛnkɔlɔji dɛn. If di kollapsibl ɛlimɛnt dɔn lɔk bay difɔlt, i fɔ gɛt valyu we na aria-expanded="false"
. If yu dɔn sɛt di kɔlapsibl ɛlimɛnt fɔ opin bay difɔlt yuz di in
klas, sɛt aria-expanded="true"
pan di kɔntrol insted. Di plɔgin go ɔtomɛtik tɔgl dis atribyut bay we dɛn dɔn opin ɔ lɔk di ɛlimɛnt we dɛn kin kɔlap ɔ nɔ.
Apat frɔm dat, if yu kɔntrol ɛlimɛnt de tɔch wan singl kɔlapsibl ɛlimɛnt – dat na di data-target
atribyut de pɔynt to wan id
sɛlɛktɔ – yu kin ad wan ɔda aria-controls
atribyut to di kɔntrol ɛlimɛnt, we gɛt di id
ɔf di kɔlapsibl ɛlimɛnt. Di mɔdan skrin rida dɛn ɛn di sem kayn ɛp tɛnkɔlɔji dɛn de yuz dis atribyut fɔ gi di wan dɛn we de yuz am ɔda sɔtkat dɛn fɔ go dairekt to di ɛlimɛnt sɛf we dɛn kin kol.
Di kollaps plɔgin de yuz sɔm klas dɛn fɔ handel di ebi liftin:
.collapse
de ayd di tin dɛn we de insay.collapse.in
sho di tin dɛn we de insay.collapsing
dɛn kin ad am we di chenj bigin, ɛn dɛn kin pul am we i dɔnYu kin fɛn dɛn klas ya na component-animations.less
.
Jɔs ad data-toggle="collapse"
ɛn a data-target
to di ɛlimɛnt fɔ ɔtomɛtik asaynd kɔntrol fɔ wan kollapsbul ɛlimɛnt. Di data-target
atribyut de aksept wan CSS sɛlɛktɔ fɔ aplay di kɔlapshɔn to. Mek shɔ se yu ad di klas collapse
to di ɛlimɛnt we yu kin kɔlap. If yu want fɔ mek i opin difɔlt, ad di ɔda klas in
.
Fɔ ad grup manejmɛnt we tan lɛk akɔdiɔn to wan kɔntrol we pɔsin kin kɔl, ad di data atribyut data-parent="#selector"
. Rif to di demo fɔ si dis in akshɔn.
Enable manually wit:
Yu kin pas opshɔn dɛn bay we yu yuz data atribyut ɔ JavaSkript. Fɔ data atribyut dɛn, ad di opshɔn nem to data-
, lɛk insay data-parent=""
.
Nem | kayn | balans | tɔk bɔt |
---|---|---|---|
mama ɔ papa | sɛlɛktɔ | lay | If dɛn gi wan sɛlɛktɔ, den ɔl di ɛlimɛnt dɛn we dɛn kin kɔl ɔnda di mama ɔ papa we dɛn dɔn spɛsifa go lɔk we dɛn sho dis tin we dɛn kin kɔl. (similar to tradishonal akכdiכn bihayvya - dis de dipכnt pan di panel klas) |
fɔ chenj di we aw dɛn de | boolean we dɛn kɔl | tru | Toggles di kollapsibl elemɛnt pan invokeshɔn |
.collapse(options)
Aktiv yu kɔntinyu as wan ɛlimɛnt we pɔsin kin kɔlap. Aksept wan opshɔnal opshɔn dɛn object
.
.collapse('toggle')
Toggles wan kollapsibl elemɛnt fɔ sho ɔ ayd. Ritɔn to di pɔsin we kɔl bifo di kɔlapsibl ɛlimɛnt dɔn rili sho ɔ ayd (dat na bifo di shown.bs.collapse
ɔ hidden.bs.collapse
ivin apin).
.collapse('show')
Sho wan ɛlimɛnt we pɔsin kin kɔlap. Ritɔn to di pɔsin we kɔl bifo di kɔlapsibl ɛlimɛnt dɔn rili sho (dat na bifo di shown.bs.collapse
ivin apin).
.collapse('hide')
I de ayd wan ɛlimɛnt we pɔsin kin kɔlap. Ritɔn to di pɔsin we kɔl bifo di kɔlapsibl ɛlimɛnt dɔn rili ayd (dat na bifo di hidden.bs.collapse
ivin apin).
Bootstrap in kollaps klas de ɛksplɔz sɔm ivintɛns fɔ huk insay kollaps funkshɔnaliti.
Di kayn tin we apin | Tɔk bɔt |
---|---|
sho.bs.kɔlaps | Dis ivent de faya wantɛm wantɛm we dɛn kɔl di show instans mɛtɔd. |
sho.bs.kɔlaps | Dis ivent de faya we dɛn dɔn mek wan kollaps ɛlimɛnt fɔ si to di yuza (go wet fɔ CSS transishɔn dɛn fɔ dɔn). |
ayd.bs.kollaps fɔ di wan dɛn we de | Dis ivent de faya wantɛm wantɛm we hide dɛn dɔn kɔl di we aw dɛn de du am. |
ayd.bs.kɔlaps | Dis ivent de faya we dɛn dɔn ayd wan kollaps ɛlimɛnt frɔm di yuza (go wet fɔ mek CSS transishɔn dɛn dɔn). |
Wan slayd sho kɔmpɔnɛnt fɔ sayklis tru ɛlimɛnt dɛn, lɛk karusel. Nested carousels nɔ de sɔpɔt.
Di karusel kɔmpɔnɛnt jɔs nɔ de fala di aksesibiliti standad dɛn. If yu nid fɔ fala di lɔ, duya tink bɔt ɔda tin dɛn we yu go du fɔ sho wetin yu de tɔk bɔt.
Bootstrap de yuz CSS3 nɔmɔ fɔ in animashɔn dɛn, bɔt Intanɛt Ɛksplɔrɔ 8 & 9 nɔ de sɔpɔt di CSS prɔpati dɛn we nid. So, no slayd transishɔn animashɔn nɔ de we yu de yuz dɛn brɔuza dɛn ya. Wi dɔn disayd bay wilful fɔ nɔ put jQuery-based fallbacks fɔ di transishɔn dɛn.
Di .active
klas nid fɔ ad to wan pan di slayd dɛn. If nɔto dat, di karusel nɔ go de fɔ si.
Di .glyphicon .glyphicon-chevron-left
ɛn .glyphicon .glyphicon-chevron-right
klas dɛn nɔ rili nid fɔ di kɔntrol dɛn. Bootstrap de gi .icon-prev
ɛn .icon-next
as plein yunikɔd ɔltɛrnativ dɛn.
Ad kapshɔn dɛn to yu slayd dɛn izi wan wit di .carousel-caption
ɛlimɛnt insay ɛni .item
. Put jɔs lɛk ɛni opshɔnal HTML insay de ɛn i go ɔtomɛtik alaynɛd ɛn fɔmat.
Karusel nid fɔ yuz wan id
pan di kɔntena we de na do (di .carousel
) fɔ mek di karusel kɔntrol dɛn wok fayn fayn wan. We yu de ad bɔku bɔku karusel dɛn, ɔ we yu de chenj di karusel dɛn id
, mek shɔ se yu ɔpdet di kɔntrol dɛn we gɛt fɔ du wit am.
Yuz data atribyut fɔ izi fɔ kɔntrol di pozishɔn fɔ di karusel. data-slide
aksept di ki wɔd dɛn prev
ɔ next
, we de chenj di say we di slayd de we yu kɔmpia am to di say we i de naw. Ɔda we de fɔ yuz data-slide-to
fɔ pas wan raw slayd indeks to di karusel data-slide-to="2"
, we de chenj di say we di slayd de go to wan patikyula indeks we bigin wit 0
.
Di data-ride="carousel"
atribyut de yuz fɔ mak wan karusel as animat stat we pej lod. I nɔ go ebul fɔ yuz am togɛda wit (ridandant ɛn nɔ nid) ɛksplisit JavaSkript initializeshɔn fɔ di sem karusel.
Kɔl karusel wit yu an wit:
Yu kin pas opshɔn dɛn bay we yu yuz data atribyut ɔ JavaSkript. Fɔ data atribyut dɛn, ad di opshɔn nem to data-
, lɛk insay data-interval=""
.
Nem | kayn | balans | tɔk bɔt |
---|---|---|---|
intaval | nɔmba | 5000 pipul dɛn | Di amount of taim fɔ delay bitwin ɔtomɛtik sayklis wan tin. If na lay, karusel nɔ go ɔtomɛtik saykl. |
wet smɔl | string fɔ di wan dɛn we de | nɔ gɛt wan valyu | "hova" fɔ de. | If dɛn sɛt am to "hover" , i de stɔp di sayklis fɔ di karusel mouseenter ɛn bigin bak di sayklis fɔ di karusel pan mouseleave . If yu sɛt am to null , fɔ hov oba di karusel nɔ go stɔp am. |
rap | boolean we dɛn kɔl | tru | If di karusel fɔ de saykl kɔntinyu ɔ i fɔ gɛt had stɔp dɛn. |
kibɔd fɔ di kibɔd | boolean we dɛn kɔl | tru | If di karusel fɔ riak to di tin dɛn we de apin na di kibɔd. |
.carousel(options)
Initializes di carousel wit wan opshonal opshon object
en stat saikl tru tin dem.
.carousel('cycle')
Saykl dɛn tru di karusel tin dɛn frɔm lɛft to rayt.
.carousel('pause')
Stɔp di karusel fɔ sayklɔs tru tin dɛn.
.carousel(number)
Saykl di karusel to wan patikyula freym (0 bays, we fiba wan arenjmɛnt).
.carousel('prev')
Saykl dɛn to di tin we bin dɔn de bifo.
.carousel('next')
Saykl dɛn to di nɛks tin.
Bootstrap in karusel klas de ɛksplɔz tu ivintɛns fɔ huk insay karusel funkshɔnaliti.
Dɛn tu ivin dɛn ya gɛt dɛn ɔda prɔpati dɛn ya:
direction
: Di dairekshɔn we di karusel de slayv (ɛither "left"
ɔ "right"
).relatedTarget
: Di DOM elemɛnt we dɛn de slid insay ples as di aktiv aytem.Ɔl di karusel ivin dɛn de faya na di karusel sɛf (dat na na di <div class="carousel">
).
Di kayn tin we apin | Tɔk bɔt |
---|---|
slayd.bs.karosel | Dis ivent de faya wantɛm wantɛm we dɛn kɔl di slide instans mɛtɔd. |
slid.bs.karosel we de na di slid | Dis ivent de faya we di karusel dɔn dɔn in slayd transishɔn. |
Di afiks plɔgin de tɔn position: fixed;
ɛn ɔf, ɛn i de falamakata di ifɛkt we dɛn fɛn wit position: sticky;
. Di sabnavigishɔn we de na di rayt say na layv dɛmo fɔ di afiks plɔgin.
Yuz di afiks plɔgin bay we yu yuz data atribyut dɛn ɔ yuz yu yon JavaSkript wit yu an. Insay ɔl tu di sityueshɔn dɛn, yu fɔ gi CSS fɔ di pozishɔn ɛn di wit we yu afiks kɔntinyu.
Notis: Nɔ yuz di afiks plɔgin pan ɛlimɛnt we de insay ɛlimɛnt we rili pozishɔn, lɛk kɔlɔm we dɛn pul ɔ push, bikɔs ɔf wan Safari rɛnda bɔg .
Di afiks plɔgin de chenj bitwin tri klas dɛn, ɛn ɛni wan pan dɛn de sho wan patikyula stet: .affix
, .affix-top
, ɛn .affix-bottom
. Yu fɔ gi di stayl dɛn, wit di ɛksɛpshɔn fɔ position: fixed;
on .affix
, fɔ dɛn klas ya yusɛf (indipɛndɛnt frɔm dis plɔgin) fɔ handle di aktual pozishɔn dɛn.
Na so di afiks plɔgin de wok:
.affix-top
fɔ sho se di ɛlimɛnt de na in ɔp-mɔst pozishɔn. Na dis tɛm no CSS pozishɔn nɔ nid fɔ de..affix
riples .affix-top
ɛn sɛt position: fixed;
(we Bootstrap in CSS gi am)..affix
wit .affix-bottom
. Bikɔs ɔfset dɛn na opshɔnal, fɔ sɛt wan, yu fɔ sɛt di rayt CSS. If na so i bi, ad position: absolute;
we nid de. Di plɔgin de yuz di data atribyut ɔ di JavaSkript opshɔn fɔ no usay fɔ put di ɛlimɛnt frɔm de.Fɔ fala di step dɛn we de ɔp fɔ sɛt yu CSS fɔ ɛni wan pan di yuz opshɔn dɛn we de dɔŋ ya.
Fɔ ad afiks bihayvya izi wan to ɛni ɛlimɛnt, jɔs ad data-spy="affix"
to di ɛlimɛnt we yu want fɔ spay pan. Yuz ɔfset fɔ difayn ustɛm fɔ tɔgl di pinin fɔ wan ɛlimɛnt.
Kɔl di afiks plɔgin bay JavaSkript:
Yu kin pas opshɔn dɛn bay we yu yuz data atribyut ɔ JavaSkript. Fɔ data atribyut dɛn, ad di opshɔn nem to data-
, lɛk insay data-offset-top="200"
.
Nem | kayn | balans | tɔk bɔt |
---|---|---|---|
ɔfset | nɔmba | funkshɔn | tin | 10. Di wan dɛn we de | Piksɛl dɛn fɔ ɔfset frɔm skrin we yu de kɔlkul di pozishɔn fɔ skrol. If dɛn gi wan nɔmba, dɛn go yuz di ɔfset na ɔl tu di say dɛn we de ɔp ɛn dɔŋ. Fɔ gi yu wan, bɔt ɛn ɔp ɔfset jɔs gi wan tin offset: { top: 10 } ɔ offset: { top: 10, bottom: 5 } . Yuz wan fɛnshɔn we yu nid fɔ dinamik wan kɔlkyul wan ɔfset. |
tagɛt | sɛlɛktɔ | node na di | jKwɛri ɛlimɛnt | di window tin we dɛn de yuz |
Spɛsifikɛt di target ɛlimɛnt fɔ di afiks. |
.affix(options)
Aktiv yu kɔntinyu as affixed kɔntinyu. Aksept wan opshɔnal opshɔn dɛn object
.
.affix('checkPosition')
Rikalkul di stet fɔ di afiks bay di dimɛnshɔn, pozishɔn, ɛn skrol pozishɔn fɔ di ɛlimɛnt dɛn we gɛt fɔ du wit am. Dɛn kin ad ɔ pul di .affix
, .affix-top
, ɛn klas dɛn pan di tin dɛn we dɛn dɔn afiks akɔdin to di nyu stet. .affix-bottom
Dis we fɔ du tin nid fɔ kɔl ɛni tɛm we dɛn chenj di dimɛnshɔn dɛn fɔ di kɔntinyu we dɛn afiks ɔ di ɛlimɛnt we dɛn want fɔ afɛkt, fɔ mek shɔ se dɛn put di kɔntinyu we dɛn afiks kɔrɛkt wan.
Bootstrap in afiks plɔgin de ɛksplɔz sɔm ivin dɛn fɔ huk insay afiks funkshɔnaliti.
Di kayn tin we apin | Tɔk bɔt |
---|---|
afiks.bs.afiks | Dis ivent de faya wantɛm wantɛm bifo dɛn dɔn afiks di ɛlimɛnt. |
afiks.bs.afiks | Dis ivent de faya afta dɛn dɔn afiks di ɛlimɛnt. |
afiks-tɔp.bs.afiks | Dis ivent de faya wantɛm wantɛm bifo dɛn dɔn afiks di ɛlimɛnt-tɔp. |
afiks-tɔp.bs.afiks | Dis ivent de faya afta di elemɛnt dɔn afiks-tɔp. |
afiks-bɔt.bs.afiks | Dis ivent de faya wantɛm wantɛm bifo di ɛlimɛnt dɔn afiks-bɔt. |
afiks-bɔt.bs.afiks | Dis ivent de faya afta di element don affix-bottom. |