Bootstrap na JS

JavaSkript fɔ di Bootstrap

Bring Bootstrap in kɔmpɔnɛnt dɛn to layf wit nyu, kɔstɔm plɔgin dɛn we de wok wit jQuery ɛn Ender .

← Bak to Bootstrap na os

SkrolSpy bootstrap-skrolspy.js

Dis plɔgin na fɔ ad di skrolspy (ɔto ɔpdet nav) intarakshɔn to di butstrap tɔpba.

Dɔŋlod

Yuz di bootstrap-scrollspy.js we yu de yuz

  1. $ ( '#tɔpbar' ). skrolSpy () .

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

Fɔ mek i izi fɔ ad skrolspi bihayvya to yu nav, jɔs ad di data-scrollspyatribyut to di .topbar.

  1. <div klas = "tɔpbar" data-skrolspy = "skrolspi" > ... </div>

Di we aw dɛn de du am

$().skrolSpy () .

Oto aktivet nevigishɔn bɔtin dɛn bay yuzman dɛn skrol pozishɔn.

  1. $ ( 'bɔdi > .tɔpbar' ). skrolSpy () .

Notis Topbar ankɔ tag 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>.

.skrolSpy('rifresh')

Di skrolspy de kech di nav bɔtin dɛn ɛn di sɛkshɔn kɔdinɛt dɛn fɔ mek dɛn ebul fɔ du di wok. If yu nid fɔ ɔpdet dis kesh (i go bi if yu gɛt dinamik kɔntinyu) jɔs kɔl dis rifresh we. If yu yuz di data atribyut fɔ difayn yu skrol, jɔs kɔl rifresh na di bɔdi.

  1. $ ( ‘bɔdi’ ). skrolSpy ( ‘rifresh’ ) .

Demo we de sho aw fɔ du am

Chek ɔut di di topbar nevigishɔn na dis pej.

Bɔtin dɛn bootstrap-bɔtin dɛn.js

Dis plɔgin de gi ɔda wok fɔ manej bɔtin stet.

Dɔŋlod

Yuz di bootstrap-buttons.js we yu de yuz

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

Di we aw dɛn de du am

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

Toggles push stet. Gives btn de luk dat e don aktivet.

Notis Yu kin ɛnabul ɔto toggling fɔ wan bɔtin bay we yu yuz di data-toggleatribyut.

  1. <bɔtin klas = "btn" data-tɔgl = "tɔgl" > ... </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>

$().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').bɔtin('kɔmplit')
  4. </skrip>

Demo we de sho aw fɔ du am

Tab dɛn bootstrap-tabs.js

Dis plɔgin de ad kwik, dinamik tab ɛn pil funkshɔnaliti.

Dɔŋlod

Yuz di bootstrap-tabs.js

  1. $ ( '.tab dɛn' ). tab dɛn () .

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 gi dɛn wan data-tabsɔ data-pillsatribyut.

  1.  <ul klas = "tab dɛn" data-tab dɛn = "tab dɛn" > ... </ul>

Di we aw dɛn de du am

$().tabs ɔ $().pils dɛn

Aktivet tab ɛn pil funkshɔnaliti fɔ wan givɛn kɔntena. Tab link dɛn fɔ rɛfrɛns id dɛn na di dɔkyumɛnt.

  1. <ul klas = "tab dɛn" > 
  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 = "pil-kɔntinɛnt" > 
  9.   <div klas = "aktiv" id = "os" > ... </div>  
  10.   <div id = "prɔfayl" > ... </div> 
  11.   <div id = "mɛsej dɛn" > ... </div> 
  12.   <div id = "sɛtin dɛn" > ... </div> 
  13. </div> fɔ di wan dɛn we de
  14.  
  15. <skript>
  16.   $ ( fɛnshɔn () { .  
  17.     $ ( '.tab dɛn' ). tab dɛn () .
  18.   }) bin de.
  19. </skript>

Di tin dɛn we kin apin

Program Tɔk bɔt
chenj Dis ivent de faya pan tab chenj. Yuz event.targetɛn event.relatedTargetfɔ tɔch di aktiv tab ɛn di fɔs aktiv tab rispɛktful wan. 
  1. $ ( '#.tab dɛn' ). bind ( 'chenj' , funkshɔn ( e ) { .   
  2.   e . target // tab we dɛn dɔn aktiv
  3.   e . relatedTarget // tab we bin de bifo
  4. }) bin de.

Demo we de sho aw fɔ du am

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.

Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.

Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.

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.

Twipsy bootstrap-twipsy.js fɔ di wan dɛn we de wok

Bays pan di fayn fayn jQuery.tipsy plɔgin we Jason Frame rayt; twipsy na wan ɔpdet vɛshɔn, we nɔ de abop pan pikchɔ dɛn, i de yuz css3 fɔ animashɔn, ɛn data-atribyut fɔ taytul stɔrɔj!

Dɔŋlod

Yuz di bootstrap-twipsy.js we yu de yuz

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

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

Nem kayn balans tɔk bɔt
fɔ mek pɔsin gɛt layf boolean we dɛn kɔl tru aplay wan css fade transishɔn to di tultip
dilayIn nɔmba 0. Di wan dɛn we de dilay bifo yu sho tultip (ms) .
delayOut fɔ de nɔmba 0. Di wan dɛn we de dilay bifo yu ayd tultip (ms) .
fɔl bak rop '' . tɛks fɔ yuz we nɔ tultip taytul nɔ de
ples fɔ put am rop 'ɔp' aw fɔ posishun di tultip - ɔp | dɔŋ ya | lɛft | rayt
html boolean we dɛn kɔl lay alaw html kɔntinyu insay tultip
tap boolean we dɛn kɔl lay yuz ivent delegɛshɔn instead ɔf wan wan ivent handla dɛn
ɔfset nɔmba 0. Di wan dɛn we de piksɛl ɔfset fɔ tultip frɔm target ɛlimɛnt
taytul string, fɔ wok 'taytul' atribyut ɔ we fɔ pul di taytul tɛks
stat rop 'hova' we yu de du. aw di tultip de trig - hover | fɔs fɔs | buk
tɛmplat fɔ di wan dɛn we de rop [difɔlt mak-ap] . Di html tɛmplat we dɛn yuz fɔ rɛnd wan twipsy.

Notis Individyual twipsy instans opshɔn dɛn kin ɔda we fɔ spɛsifa tru di yus fɔ data atribyut dɛn.

  1. <a href = "#" data-plesmɛnt = "dɔŋ" rel = 'twipsy' taytul = 'Sɔm taytul tɛks' > tɛks </a>

Di we aw dɛn de du am

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

Ataya wan twipsy handler to wan elemɛnt kɔlɛkshɔn.

.twipsy('sho') .

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

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

.twipsy('ayd') .

Ayd wan ɛlimɛnt dɛn twipsy.

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

.twipsy(na tru) .

Ritɔn wan ɛlimɛnt dɛn twipsy klas instans.

  1. $ ( '#ɛlimɛnt' ). twipsy ( na tru ) .

Notis Ɔda we de fɔ du dat, yu kin tek dis wit $().data('twipsy').

Demo we de sho aw fɔ du am

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. Wan rili ironic artisan wetin keytar, scenester fam-to-tebul banksy Austin twita handle frigan cred raw denim singl-orijin kofi vayral.

Popovers bootstrap-popover.js we de na di wɔl

Di popover plɔgin de gi yu wan simpul intafays fɔ ad popovers to yu aplikeshɔn. I de ɛkstɛnd di bootstrap-twipsy.js plɔgin, so mek shɔ se yu grap da fayl de bak we yu de inklud popovers insay yu prɔjek!

Notis Yu fɔ put di bootstrap-twipsy.js fayl bifo bootstrap-popover.js.

Dɔŋlod

Yuz di bootstrap-popover.js we yu de yuz

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

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

Nem kayn balans tɔk bɔt
fɔ mek pɔsin gɛt layf boolean we dɛn kɔl tru aplay wan css fade transishɔn to di tultip
dilayIn nɔmba 0. Di wan dɛn we de dilay bifo yu sho tultip (ms) .
delayOut fɔ de nɔmba 0. Di wan dɛn we de dilay bifo yu ayd tultip (ms) .
fɔl bak rop '' . tɛks fɔ yuz we nɔ tultip taytul nɔ de
ples fɔ put am rop 'rayt' aw fɔ posishun di tultip - ɔp | dɔŋ ya | lɛft | rayt
html boolean we dɛn kɔl lay alaw html kɔntinyu insay tultip
tap boolean we dɛn kɔl lay yuz ivent delegɛshɔn instead ɔf wan wan ivent handla dɛn
ɔfset nɔmba 0. Di wan dɛn we de piksɛl ɔfset fɔ tultip frɔm target ɛlimɛnt
taytul string, fɔ wok 'taytul' atribyut ɔ we fɔ pul di taytul tɛks
satisfay string, fɔ wok 'data-kɔntinɛnt'. wan string ɔ we fɔ pul di tɛks we de insay. if dɛn nɔ gi ɛni wan, dɛn go pul di tin dɛn frɔm wan data-kɔntinɛnt atribyut.
stat rop 'hova' we yu de du. aw di tultip de trig - hover | fɔs fɔs | buk
tɛmplat fɔ di wan dɛn we de rop [difɔlt mak-ap] . Di html tɛmplat we dɛn yuz fɔ rɛnd wan popover.

Notis Individyual popover instans opshɔn dɛn kin ɔda we fɔ spɛsifa tru di yus fɔ data atribyut dɛn.

  1. <a data-plesmɛnt = "dɔŋ" href = "#" klas = "btn denja" rel = "popover" > tɛks </a>

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’ ) .

Demo we de sho aw fɔ du am

hover fɔ popover

Di alɛt dɛn de bɔt bootstrap-alerts.js

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

Dɔŋlod

Yuz di bootstrap-alerts.js

  1. $ ( ".alert-mɛsej" ). alɛrt () .

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

Jɔs ad wan data-alertatribyut to yu alɛt mɛsej dɛn fɔ mek dɛn ɔtomɛtik gi dɛn klos funkshɔnaliti.

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

Nem kayn balans tɔk bɔt
sɛlɛktɔ rop '.tayt' Us sɛlɛktɔ fɔ target fɔ klos wan alɛt.

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. $ ( ".alert-mɛsej" ). alert ( ‘klos’ ) .

Demo we de sho aw fɔ du am

×

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