JavaSkript fɔ di Bootstrap

Bring Bootstrap in kɔmpɔnɛnt dɛn to layf—naw wit 12 kɔstɔm jQuery plɔgin dɛn.

Modal dɛn

Wan strimlayn, bɔt fleksibul, tek pan di tradishɔnal javaskript modal plɔgin wit ɔl di minimum rikwayd funkshɔnaliti ɛn smat difɔlt dɛn.

Drɔpdɔwn dɛn

Ad drɔpdɔwn mɛnyu dɛn to nia ɛnitin na Bootstrap wit dis simpul plɔgin. Bootstrap gɛt ful drɔpdɔwn mɛnyu sɔpɔt pan insay di navbar, tab dɛn, ɛn pils dɛn.

Skrol dɛn we de na di skrol

Yuz scrollspy fɔ ɔtomɛtik ɔpdet di link dɛn na yu navbar fɔ sho di aktiv link we de naw bay di say we yu de skrol.

Tab dɛn we yu kin chenj

Yuz dis plɔgin fɔ mek tab ɛn pils yusful mɔ bay we yu alaw dɛn fɔ tɔgl tru tabbul pan dɛn fɔ lokal kɔntinyu.

Tultip dɛn fɔ yuz

Wan nyu tek pan di jQuery Tipsy plɔgin, Tooltips nɔ de abop pan pikchɔ dɛn—dɛn de yuz CSS3 fɔ animashɔn ɛn data-atribyut fɔ lokal taytul stɔrɔj.

Popovers dɛn * .

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.

* I nid fɔ de insay di Tultip dɛn

Mesej dɛn fɔ wɔn pɔsin

Di alɛt plɔgin na wan smɔl klas fɔ ad klos funkshɔnaliti to alɛt dɛn.

Bɔtin 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.

Fɔdɔm

Gɛt bays stayl ɛn fleksibul sɔpɔt fɔ kɔlapsibl kɔmpɔnɛnt dɛn lɛk akodiɔn ɛn nevigishɔn.

Karusel we dɛn kin yuz fɔ mek

Krio wan merry-go-round fɔ ɛni kɔntinyu we yu want fɔ gi wan intaraktiv slayd sho fɔ kɔntinyu.

Tayp bifo tɛm

Wan besik, izi fɔ ɛkstɛnd plɔgin fɔ mek kwik kwik wan elegant tayp-hɛd wit ɛni fɔm tɛks input.

Di tin dɛn we de chenj * .

Fɔ simpul transishɔn ifɛkt dɛn, inklud bootstrap-transition.js wan tɛm fɔ slayv insay modals ɔ fade aut alɛt dɛn.

* Rikwayd fɔ animashɔn insay plɔgin dɛn

Hed dɛn de ɔp! Ɔl di javascript plɔgin dɛn nid di laytst vɛshɔn fɔ jQuery.

Bɔt di modal dɛn

Wan strimlayn, bɔt fleksibul, tek pan di tradishɔnal javaskript modal plɔgin wit ɔl di minimum rikwayd funkshɔnaliti ɛn smat difɔlt dɛn.

Daunlod fayl

Statik ɛgzampul

Di wan dɛn we de dɔŋ ya na wan statically rendered modal.

Layf dɛmo

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.

Lans di modal fɔ di demo

Yuz di bootstrap-modal fɔ yuz

Kɔl di modal bay javascript:

  1. $ ( '#miModal' ). modal ( opshɔn dɛn ) .

Di tin dɛn we yu kin pik fɔ du

Nem kayn balans tɔk bɔt
bakdrop fɔ de boolean we dɛn kɔl tru Inklud wan modal-bakdrop ɛlimɛnt. Ɔda we de fɔ du dat, spɛsifa staticfɔ 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.

Mak-ap fɔ di tin dɛn we de apin

Yu kin aktiv modal dɛn na yu pej izi wan we yu nɔ nid fɔ rayt wan layn fɔ javaskript. Jɔs sɛt data-toggle="modal"pan wan kɔntrol ɛlimɛnt wit wan data-target="#foo"ɔ href="#foo"we kɔrɛkt to wan modal ɛlimɛnt id, ɛn we yu klik, i go lanch yu modal.

Dɔn bak, fɔ ad opshɔn dɛn to yu modal instans, jɔs inklud dɛn as ɔda data atribyut dɛn pan ɛni wan pan di kɔntrol ɛlimɛnt ɔ di modal mak sɛf.

  1. <a klas = "btn" data-tɔgl = "modal" href = "#miModal" > Lanch Mɔdal </a>
  1. <div klas = "modal ayd" id = "miModal" >
  2. <div klas = "modal-hɛda" >
  3. <bɔtin tayp = "bɔtin" klas = "klos" data-dismis = "modal" > × </bɔtin>
  4. <h3> Modal hεda </h3>
  5. </div> fɔ di wan dɛn we de
  6. <div klas = "modal-bɔdi" >
  7. <p> Wan fayn bɔdi... </p>
  8. </div> fɔ di wan dɛn we de
  9. <div klas = "modal-fut" >
  10. <a href = "#" klas = "btn" data-dismis = "modal" > Klos </a>
  11. <a href = "#" klas = "btn btn-praymari" > Sev chenj dɛn </a>
  12. </div> fɔ di wan dɛn we de
  13. </div> fɔ di wan dɛn we de
Hed dɛn de ɔp! If yu want yu modal fɔ animate in ɛn aut, jɔs ad wan .fadeklas to di .modalɛlimɛnt (rifer to di demo fɔ si dis in akshɔn) ɛn inklud bootstrap-transition.js.

Di we aw dɛn de du am

.modal(opshɔn dɛn) .

Aktiv yu kɔntinyu as modal. Aksept wan opshɔnal opshɔn dɛn object.

  1. $ ( '#miModal' ). modal ({
  2. kibɔd : lay lay tɔk
  3. }) bin de.

.modal('tɔgl') .

Manually de toggle wan modal.

  1. $ ( '#miModal' ). modal ( ‘tɔgl’ ) .

.modal('sho') .

Manually de opin wan modal.

  1. $ ( '#miModal' ). modal ( ‘sho’ ) .

.modal('ayd') .

Manually de ayd wan modal.

  1. $ ( '#miModal' ). modal ( ‘ayd’ ) .

Di tin dɛn we kin apin

Bootstrap in modal klas de ɛksplɔz sɔm ivin dɛn fɔ huk insay modal funkshɔnaliti.

Program Tɔk bɔt
sho Dis ivent de faya wantɛm wantɛm we dɛn kɔl di showinstans mɛtɔd.
we dɛn sho Dis ivent de faya we di modal dɔn mek visible to di yuza (go wet fɔ css transishɔn dɛn fɔ dɔn).
ayd Dis ivent de faya wantɛm wantɛm we hidedɛn dɔn kɔl di instans mɛtɔd.
ayd 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).
  1. $ ( '#miModal' ). on ( 'ayd' , fɛnshɔn () {
  2. // du sɔntin...
  3. }) bin de.

Di ScrollSpy plɔgin na fɔ ɔtomɛtik ɔpdet nav target dɛn bays pan skrol pozishɔn.

Daunlod fayl

Example navbar wit skrolspy

Skrol di eria we de dɔŋ ɛn wach di ɔpdet fɔ di nevigishɔn. Di drɔpdɔwn sab aytem dɛn go aylayt bak. Tray am!

@bɔmp

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.

@mdo na @mdo

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.

wan

Occaecat komodo alikwa delektɔs. Fap kraft bia deserunt skateboard 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 adipisicing fɔ di wan dɛn we de yuz am. Konsectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus konsectetur fanny pak ifon.

tu

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.

three

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.


Yuz di bootstrap-scrollspy.js we yu de yuz

Kɔl di skrol dɛn bay javascript:

  1. $ ( '#navbar' na di wan dɛn we de yuz am ). skrol dɛn () .

Mak-ap fɔ di tin dɛn we de apin

Fɔ ad skrolspi bihayvya izi wan to yu tɔpba nevigishɔn, jɔs ad data-spy="scroll"to di ɛlimɛnt we yu want fɔ spay pan (mɔs tipikli dis go bi di bɔdi).

  1. <bɔdi data-spy = "skrol" > ... </bɔdi>
Hed dɛn de ɔp! 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>.

Di we aw dɛn de du am

.skrolspy('rifresh') .

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:

  1. $ ( '[data-spy="skrol"]' ). ɛni wan ( fɛnshɔn () { .
  2. var $spy = $ ( dis ). skrolspy ( ‘rifresh’ ) .
  3. });

Di tin dɛn we yu kin pik fɔ du

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 tin dɛn we kin apin

Program Tɔk bɔt
aktivet fɔ wok Dis ivent de faya ɛnitɛm we di skrol spy mek nyu tin wok.

Dis plɔgin de ad kwik, dinamik tab ɛn pil funkshɔnaliti fɔ chenj tru lokal kɔntinyu.

Daunlod fayl

Ɛgzampul tab dɛn

Klik di tab dɛn we de dɔŋ fɔ chenj bitwin di say dɛn we dɛn ayd, ivin bay di meny dɛn we de dɔŋ.

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.


Yuz di bootstrap-tab.js

Enable tabable tabs via javascript (ɛni tab nid fɔ aktiv wan wan):

  1. $ ( '#miTab a' ). klik ( fonkshɔn ( e ) { .
  2. e . prɛventDifɔlt ();
  3. $ ( dis ). tab ( ‘sho’ );
  4. }) bin de.

Yu kin aktiv wan wan tab dɛn difrɛn we dɛn:

  1. $ ( '#miTab wan[href="#profayl"]' ). tab ( ‘sho’ ); // Selekt tab bay nem
  2. $ ( '#miTab a:fɔs' ). tab ( ‘sho’ ); // Selekt fɔs tab
  3. $ ( '#miTab a: las' ). tab ( ‘sho’ ); // Selekt las tab
  4. $ ( '# miTab li: eq (2) a' ). tab ( ‘sho’ ); // Selekt tɔd tab (0-indeks)

Mak-ap fɔ di tin dɛn we de apin

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. We yu ad di navɛn nav-tabsklas dɛn to di tab ul, i go yuz di bootstrap tab stayl.

  1. <ul klas = "nav nav-tab dɛn" >
  2. <li><a href = "#os" data-tɔgl = "tab" > Os </a></li>
  3. <li><a href = "#prɔfayl" data-tɔgl = "tab" > Profayl </a></li>
  4. <li><a href = "#mɛsej dɛn" data-tɔgl = "tab" > Mɛsej dɛn </a></li>
  5. <li><a href = "#sɛtin" data-tɔgl = "tab" > Sɛtin dɛn </a></li>
  6. </ul> fɔ di wan dɛn we de

Di we aw dɛn de du am

$().tab fɔ di wan dɛn

Aktiv wan tab ɛlimɛnt ɛn kɔntinyu kɔntena. Tab fɔ gɛt ɛni wan pan wan data-targetɔ wan hrefwe de tɔch wan kɔntena node na di DOM.

  1. <ul klas = "nav nav-tab" id = "miTab" >
  2. <li klas = "aktiv" ><a href = "#os" > Os </a></li>
  3. <li><a href = "#prɔfayl" > Profayl </a></li>
  4. <li><a href = "#mɛsej dɛn" > Mɛsej dɛn </a></li>
  5. <li><a href = "#sɛtin dɛn" > Sɛtin dɛn </a></li>
  6. </ul> fɔ di wan dɛn we de
  7.  
  8. <div klas = "tab-kɔntinɛnt" >
  9. <div klas = "tab-pan aktiv" id = "os" > ... </div>
  10. <div klas = "tab-pan" id = "prɔfayl" > ... </div>
  11. <div klas = "tab-pan" id = "mɛsej dɛn" > ... </div>
  12. <div klas = "tab-pan" id = "sɛtin dɛn" > ... </div>
  13. </div> fɔ di wan dɛn we de
  14.  
  15. <skript>
  16. $ ( fɛnshɔn () { .
  17. $ ( '#miTab a: las' ). tab ( ‘sho’ );
  18. }) bin de.
  19. </skript>

Di tin dɛn we kin apin

Program Tɔk bɔt
sho Dis ivent de faya pan tab sho, bɔt bifo dɛn dɔn sho di nyu tab. Yuz event.targetɛn event.relatedTargetfɔ tɔch di aktiv tab ɛn di aktiv tab we bin de bifo (if i de) rispɛktful wan.
we dɛn sho Dis ivent de faya pan tab sho afta dɛn dɔn sho wan tab. Yuz event.targetɛn event.relatedTargetfɔ tɔch di aktiv tab ɛn di aktiv tab we bin de bifo (if i de) rispɛktful wan.
  1. $ ( 'a[data-tɔgl="tab"]' ). on ( 'sho' , funkshɔn ( e ) {
  2. e . target // tab we dɛn dɔn aktiv
  3. e . relatedTarget // tab we bin de bifo
  4. }) bin de.

Bɔt Tultip dɛn

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.

Daunlod fayl

Ɛgzampul we fɔ yuz Tultip dɛn

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 messenger 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 thundercats. Tofu biodiesel 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.


Yuz di bootstrap-tooltip.js

Trig di tultip via javascript:

  1. $ ( '#ɛgzampul' ). tultip ( opshɔn dɛn ) .

Di tin dɛn we yu kin pik fɔ du

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
ples fɔ put am string|fɔnshɔn 'ɔp' aw fɔ posishun di tultip - ɔp | dɔŋ ya | lɛft | rayt
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.
taytul string fɔ di wan dɛn we de | wok '' . difɔlt taytul valyu if `taytul` tag nɔ de
stat rop 'hova' we yu de du. aw di tultip de trig - hover | fɔs fɔs | buk
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 trig tayp

If dɛn gi wan nɔmba, dɛn kin delay fɔ ɔl tu di ayd/sho

Objekt strɔkchɔ na:delay: { show: 500, hide: 100 }

Hed dɛn de ɔp! Opshɔn fɔ wan wan tultip dɛn kin ɔda we fɔ spɛsifa tru di yus fɔ data atribyut dɛn.

Mak-ap fɔ di tin dɛn we de apin

Fɔ pefɔmɛns rizin, di Tooltip ɛn Popover data-apis de opt in. If yu want fɔ yuz dɛn jɔs spɛsifa wan sɛlɛktɔ opshɔn.

  1. <a href = "#" rel = "tultip" title = "fɔs tultip" > hova oba mi </a>

Di we aw dɛn de du am

$().tultip(opshɔn dɛn)

Ataya wan tultip handla to wan ɛlimɛnt kɔlɛkshɔn.

.tultip('sho') .

Rivɛl wan ɛlimɛnt in tultip.

  1. $ ( '#ɛlimɛnt' ). tultip ( ‘sho’ ) .

.tultip('ayd') .

Ayd wan ɛlimɛnt in tultip.

  1. $ ( '#ɛlimɛnt' ). tultip ( ‘ayd’ ) .

.tultip('tɔgl')

Toggles wan element in tultip.

  1. $ ( '#ɛlimɛnt' ). tultip ( ‘tɔgl’ ) .

Na bɔt di popover dɛn

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.

* I nid fɔ de insay di Tultip

Daunlod fayl

Ɛgzampul fɔ hova popover

Hover ova di bɔtin fɔ trig di popover.


Yuz di bootstrap-popover.js we yu de yuz

Enable popovers via javaskript:

  1. $ ( '#ɛgzampul' ). popover ( opshɔn dɛn ) .

Di tin dɛn we yu kin pik fɔ du

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
ples fɔ put am string|fɔnshɔn 'rayt' aw fɔ posishun di popover - top | dɔŋ ya | lɛft | rayt
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
stat rop 'hova' we yu de du. aw di tultip de trig - hover | fɔs fɔs | buk
taytul string fɔ di wan dɛn we de | wok '' . difɔlt taytul valyu if `taytul` atribyut nɔ de
satisfay string fɔ di wan dɛn we de | wok '' . difɔlt kɔntinyu valyu if `data-kɔntinɛnt` atribyut nɔ de
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:delay: { show: 500, hide: 100 }

Hed dɛn de ɔp! Opshɔn fɔ wan wan popover dɛn kin ɔda we fɔ spɛsifa tru di yus fɔ data atribyut dɛn.

Mak-ap fɔ di tin dɛn we de apin

Fɔ pefɔmɛns rizin, di Tooltip ɛn Popover data-apis de opt in. If yu want fɔ yuz dɛn jɔs spɛsifa wan sɛlɛktɔ opshɔn.

Di we aw dɛn de du am

$().popover(opshɔn dɛn) .

Initializes popovers fɔ wan ɛlimɛnt kɔllɛkshɔn.

.popover('sho') .

Rivɛl wan ɛlimɛnt dɛn popover.

  1. $ ( '#ɛlimɛnt' ). popover ( ‘sho’ ) .

.popover('ayd') .

Ayd wan ɛlimɛnt dɛn popover.

  1. $ ( '#ɛlimɛnt' ). popover ( ‘ayd’ ) .

.popover('tɔgl') .

Toggles wan ɛlimɛnt dɛn popover.

  1. $ ( '#ɛlimɛnt' ). popover ( ‘tɔgl’ ) .

Bɔt di alɛt dɛn

Di alɛt plɔgin na wan smɔl klas fɔ ad klos funkshɔnaliti to alɛt dɛn.

Dɔŋlod

Ɛgzampul alɛt dɛn

Di alɛt plɔgin de wok pan rɛgyula alɛt mɛsej dɛn, ɛn blok mɛsej dɛn.

Oli guacamole! Best check yo self, yu no luk tu gud.

Oh snap! Yu get wan error!

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 konsektetur purus sidon amet fεmεnt.

Tek dis akshɔn Ɔ du dis


Yuz di bootstrap-alert.js

Ɛnable fɔ dismis wan alɛt bay javascript:

  1. $ ( ".alɛt" ). alɛrt () .

Mak-ap fɔ di tin dɛn we de apin

Jɔs ad data-dismiss="alert"to yu klos bɔtin fɔ gi yu wan alɛt klos funkshɔnaliti ɔtomɛtik wan.

  1. <a klas = "klos" data-dismiss = "alɛt" href = "#" > &tayms; </a> fɔ di wan dɛn we de

Di we aw dɛn de du am

$().alɛrt() .

Rap ɔl di alɛt dɛn wit klos funkshɔnaliti. Fɔ mek yu alɛt dɛn animate aut we dɛn lɔk, mek shɔ se dɛn gɛt di .fadeɛn .inklas we dɔn ɔlrɛdi aplay to dɛn.

.alert('klos') .

Klos wan alɛt.

  1. $ ( ".alɛt" ). alert ( ‘klos’ ) .

Di tin dɛn we kin apin

Bootstrap in alɛt klas de ɛksplɔz sɔm ivintɛns fɔ huk insay alert funkshɔnaliti.

Program Tɔk bɔt
tayt Dis ivent de faya wantɛm wantɛm we dɛn kɔl di closeinstans mɛtɔd.
dɛn dɔn lɔk am Dis ivent de faya we di alert dɔn klos (go wet fɔ css transishɔn dɛn fɔ dɔn).
  1. $ ( '#mi-alɛt' ). bind ( 'klos' , fɛnshɔn () {
  2. // du sɔntin...
  3. }) bin de.

Bɔt

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.

Daunlod fayl

Ɛgzampul we dɛn kin yuz

Yuz di bɔtin dɛn plɔgin fɔ stet ɛn tɔgl dɛn.

Stetful wan
Single toggle we yu de yuz
Chɛkbɔks
Redio

Yuz di bootstrap-bɔt.js

Enable bɔtin dɛn tru javascript:

  1. $ ( '.nav-tab dɛn' ). bɔtin () .

Mak-ap fɔ di tin dɛn we de apin

Data atribyut dɛn na impɔtant tin fɔ di bɔtin plɔgin. Chek di ɛgzampul kɔd we de dɔŋ fɔ di difrɛn kayn mak dɛn.

  1. <!-- Ad data-toggle="button" fɔ aktiv toggling pan wan singl bɔtin -->
  2. <bɔtin klas = "btn" data-tɔgl = "bɔt" > Singl Tɔgl </bɔtin>
  3.  
  4. <!-- Ad data-toggle="buttons-checkbox" fɔ chɛkbɔks stayl tɔgl pan btn-grup -->
  5. <div klas = "btn-grup" data-tɔgl = "bɔt-chɛkbɔks" >
  6. <bɔtin klas = "btn" > Lɛft </bɔtin>
  7. <bɔtin klas = "btn" > Midul </bɔtin>
  8. <bɔtin klas = "btn" > Rayt </bɔtin>
  9. </div> fɔ di wan dɛn we de
  10.  
  11. <!-- Ad data-toggle="buttons-radio" fɔ redio stayl tɔgl na btn-grup -->
  12. <div klas = "btn-grup" data-tɔgl = "bɔtin-redio" >
  13. <bɔtin klas = "btn" > Lɛft </bɔtin>
  14. <bɔtin klas = "btn" > Midul </bɔtin>
  15. <bɔtin klas = "btn" > Rayt </bɔtin>
  16. </div> fɔ di wan dɛn we de

Di we aw dɛn de du am

$().bɔtin('tɔgl')

Toggles push stet. Gi di bɔtin di we aw i tan lɛk se dɛn dɔn aktiv am.

Hed dɛn de ɔp! Yu kin ɛnabul ɔto toggling fɔ wan bɔtin bay we yu yuz di data-toggleatribyut.
  1. <bɔtin klas = "btn" data-tɔgl = "bɔt" > ... </bɔtin>

$().bɔtin('lod')

Set bɔtin stet to lod - disables bɔtin ɛn swap tɛks to lod tɛks. Lod tɛks fɔ difayn pan di bɔtin ɛlimɛnt yuz di data atribyut data-loading-text.

  1. <bɔtin klas = "btn" data-lɔd-tɛks = "lɔd tin..." > ... </bɔtin>
Hed dɛn de ɔp! Fayafaks de kɔntinyu fɔ de di disabled stet akɔdin to di pej lod dɛn . Wan we fɔ sɔlv dis na fɔ yuz autocomplete="off".

$().bɔtin('riset')

Riset bɔtin stet - swap tɛks to ɔrijinal tɛks.

$().bɔtin(string) .

Riset bɔtin stet - swap tɛks to ɛni data difayn tɛks stet.

  1. <bɔt klas = "btn" data-kɔmplit-tɛks = " dɔn!" > ... </bɔtin>
  2. <skript>
  3. $ ( '.btn' ) we de na di wɔl. bɔtin ( ‘kɔmplit’ ) .
  4. </skript>

Bɔt

Gɛt bays stayl ɛn fleksibul sɔpɔt fɔ kɔlapsibl kɔmpɔnɛnt dɛn lɛk akodiɔn ɛn nevigishɔn.

Daunlod fayl

* I nid fɔ de insay di Transitions plɔgin.

Ɛgzampul fɔ sho se di akodiɔn

Yuz di kollaps plɔgin, wi bil wan simpul akkɔdin stayl widget:

Anim pariatur cliche reprehenderit, enim eiusmod ay layf akusum teri richardson ad squid. 3 wulf mun officia aute, nɔ cupidat sketbɔd dolor brunch. Trak fɔ it quinoa nesciunt laborum eiusmod. Brunch 3 wulf mun tempor, sunt aliqua put wan bɔd pan am squid singl-ɔrijin kɔfi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, kraft bia laboure wes anderson kred nesciunt sapiente ea proident. Ad vegan ekseptɔr butcher vays lomo. Leggings occaecat kraft bia fam-to-tebul, raw denim aesthetic synth nesciunt yu probabli nɔ yɛri bɔt dɛn accusamus labore sataynabul VHS.
Anim pariatur cliche reprehenderit, enim eiusmod ay layf akusum teri richardson ad squid. 3 wulf mun officia aute, nɔ cupidat sketbɔd dolor brunch. Trak fɔ it quinoa nesciunt laborum eiusmod. Brunch 3 wulf mun tempor, sunt aliqua put wan bɔd pan am squid singl-ɔrijin kɔfi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, kraft bia laboure wes anderson kred nesciunt sapiente ea proident. Ad vegan ekseptɔr butcher vays lomo. Leggings occaecat kraft bia fam-to-tebul, raw denim aesthetic synth nesciunt yu probabli nɔ yɛri bɔt dɛn accusamus labore sataynabul VHS.
Anim pariatur cliche reprehenderit, enim eiusmod ay layf akusum teri richardson ad squid. 3 wulf mun officia aute, nɔ cupidat sketbɔd dolor brunch. Trak fɔ it quinoa nesciunt laborum eiusmod. Brunch 3 wulf mun tempor, sunt aliqua put wan bɔd pan am squid singl-ɔrijin kɔfi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, kraft bia laboure wes anderson kred nesciunt sapiente ea proident. Ad vegan ekseptɔr butcher vays lomo. Leggings occaecat kraft bia fam-to-tebul, raw denim aesthetic synth nesciunt yu probabli nɔ yɛri bɔt dɛn accusamus labore sataynabul VHS.

Yuz di bootstrap-kollaps.js

Ɛnable via javascript:

  1. $ ( ".kɔlaps" ). fɔdɔm () .

Di tin dɛn we yu kin pik fɔ du

Nem kayn balans tɔk bɔt
mama ɔ papa sɛlɛktɔ lay If sɛlɛktɔ den ɔl di ɛlimɛnt dɛn we dɛn kin kɔl ɔnda di mama ɛn papa we dɛn dɔn spɛsifa go lɔk we dɛn sho dis tin we dɛn kin kol. (we fiba di tradishɔnal akɔdin we dɛn kin biev)
fɔ chenj di we aw dɛn de boolean we dɛn kɔl tru Toggles di kollapsibl elemɛnt pan invokeshɔn

Mak-ap fɔ di tin dɛn we de apin

Jɔs ad data-toggle="collapse"ɛn wan data-targetto ɛlimɛnt fɔ ɔtomɛtik asaynd kɔntrol fɔ wan kollapsbul ɛlimɛnt. Di data-targetatribyut aksept wan css sɛlɛktɔ fɔ aplay di kɔlaps to. Mek shɔ se yu ad di klas collapseto di ɛlimɛnt we yu kin kɔlap. If yu want fɔ mek i opin difɔlt, ad di ɔda klas in.

  1. <bɔt klas = "btn btn-denja" data-tɔgl = "kɔlaps" data-target = "#demo" >
  2. simpul we pɔsin kin kɔlap
  3. </bɔtin>
  4.  
  5. <div id = "demo" klas = "kɔlaps insay" > ... </div>
Hed dɛn de ɔp! 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.

Di we aw dɛn de du am

.kollaps(opshɔn dɛn) .

Aktiv yu kɔntinyu as wan ɛlimɛnt we pɔsin kin kɔlap. Aksept wan opshɔnal opshɔn dɛn object.

  1. $ ( '#mi Kɔlapsibl' ). kollaps ({
  2. toggle : na lay lay tɔk
  3. }) bin de.

.kollaps('tɔgl') .

Toggles wan kollapsibl elemɛnt fɔ sho ɔ ayd.

.kollaps('sho') .

Sho wan ɛlimɛnt we pɔsin kin kɔlap.

.kollaps('ayd') .

I de ayd wan ɛlimɛnt we pɔsin kin kɔlap.

Di tin dɛn we kin apin

Bootstrap in kollaps klas de ɛksplɔz sɔm ivintɛns fɔ huk insay kollaps funkshɔnaliti.

Program Tɔk bɔt
sho Dis ivent de faya wantɛm wantɛm we dɛn kɔl di showinstans mɛtɔd.
we dɛn sho Dis ivent de faya we wan kollaps elemɛnt dɔn mek visible to di yuza (go wet fɔ css transishɔn dɛn fɔ dɔn).
ayd Dis ivent de faya wantɛm wantɛm we hidedɛn dɔn kɔl di we aw dɛn de du am.
ayd Dis ivent de faya we wan kollaps elemɛnt dɔn ayd frɔm di yuza (go wet fɔ css transishɔn dɛn fɔ dɔn).
  1. $ ( '#mi Kɔlapsibl' ). on ( 'ayd' , fɛnshɔn () {
  2. // du sɔntin...
  3. }) bin de.

Bɔt

Wan besik, izi fɔ ɛkstɛnd plɔgin fɔ mek kwik kwik wan elegant tayp-hɛd wit ɛni fɔm tɛks input.

Daunlod fayl

Ɛgzampul

Start fɔ tayp na di fil we de dɔŋ fɔ sho di rizɔlt dɛn we de bifo di tayp.


Yuz di bootstrap-typeahead.js we yu de yuz

Kɔl di typeahead bay javascript:

  1. $ ( '.tayp bifo' ). tayp bifo () .

Di tin dɛn we yu kin pik fɔ du

Nem kayn balans tɔk bɔt
usay i kɔmɔt arenjmɛnt fɔ di wan dɛn we de [ ] . Di data sɔs fɔ aks agens.
tin dɛn nɔmba 8. Di wan dɛn we de Di maks nɔmba fɔ di tin dɛn we yu fɔ sho na di drɔpdɔwn.
di wan we de mach wok kes we nɔ gɛt sɛns Di we aw dɛn kin yuz fɔ no if kwɛstyɔn de mach wan tin. Aksept wan argumɛnt, di itemagens we fɔ tɛst di kwɛstyɔn. Akses di kwɛstyɔn we yu de aks naw wit this.query. Ritɔn wan bɔlin trueif kwɛstyɔn na wan mach.
sɔrt we de sɔt wok ɛksaktɔl mach,
kes sɛnsitiv,
kes nɔ sɛnsitiv
Method we dɛn yuz fɔ sɔt ɔtokɔmplit rizɔlt dɛn. Aksept wan singl argumɛnt itemsɛn gɛt di skɔp fɔ di typeahead instans. Rifrɛns di kwɛstyɔn we yu de aks naw wit this.query.
di wan we de sho aw fɔ aylayt wok de sho ɔl di difɔlt mats dɛn Method we dɛn yuz fɔ sho di ɔtokɔmplit rizɔlt dɛn. Aksept wan singl argumɛnt itemɛn gɛt di skɔp fɔ di typeahead instans. Fɔ ritɔn html.

Mak-ap fɔ di tin dɛn we de apin

Ad data atribyut fɔ rɛjista wan ɛlimɛnt wit typeahead funkshɔnaliti.

  1. <input tayp = "tɛks" data-provayd = "tayp bifo" >

Di we aw dɛn de du am

.typeahead(opshɔn dɛn) .

Initialize wan input wit wan typeahead.