Javascript na Bootstrap ƒe nuŋɔŋlɔ

Na Bootstrap ƒe akpawo nagbɔ agbe—fifia kple jQuery ƒe kpeɖeŋutɔ 12 siwo wowɔ ɖe ɖoɖo nu.

Modalwo ƒe ɖoɖowo

A streamlined, gake flexible, xɔ ɖe dekɔnu javascript modal plugin kple dɔwɔwɔ suetɔ kekeake si hiã kple smart defaults ko.

Nusiwo wotsɔna ƒua gbe

Tsɔ nuɖuɖu siwo le tsia dzi kpe ɖe nusianu kloe ŋu le Bootstrap me kple kpeɖeŋutɔ bɔbɔe sia. Bootstrap na bliboe dropdown menu kpekpeɖeŋu le le navbar, tabs, kple atikekuiwo.

Agbalẽxatsaxatsa

Zã scrollspy nàtsɔ atrɔ asi le kadodo siwo le wò navbar me ŋu le ɖokuiwò si be wòaɖe kadodo si le dɔ wɔm fifia afia le agbalẽxatsaxatsa ƒe nɔnɔme nu.

Tab siwo woate ŋu atrɔ asi le

Zã plugin sia nàtsɔ ana tabs kple pills naɖe vi wu to mɔɖeɖe na wo be woatrɔ to tabbable panes of local content me.

Dɔwɔnu ƒe Aɖaŋuɖoɖowo

Nu yeye aɖe si woxɔ le jQuery Tipsy ƒe kpeɖeŋutɔa ŋu, Tooltips meɖoa ŋu ɖe nɔnɔmetatawo ŋu o—wozãa CSS3 hena nɔnɔmetatawo kple nyatakaka-nɔnɔmewo hena nutoa me tanyawo dzraɖoƒe.

Popovers * .

Tsɔ nyatakaka suesuesue siwo wotsɔ ƒo xlãe, abe esiwo le iPad la dzi ene, kpe ɖe nu ɖesiaɖe ŋu hena nyatakaka evelia ƒe aƒe.

* Ebia be woatsɔ Dɔwɔnu ƒe Aɖaŋuɖoɖowo ade eme

Nuxlɔ̃ame gbedasiwo

Nuxlɔ̃ame ƒe kpeɖeŋutɔ nye klass sue aɖe si wotsɔna tsɔa dɔwɔwɔ kplikplikpli kpena ɖe nuxlɔ̃amewo ŋu.

Abɔtawo ƒe ƒuƒoƒo

Wɔ geɖe wu kple abɔtawo. Dzɔdzɔmeŋusẽ ƒe abɔta gblɔ alo wɔ abɔta ƒe ƒuƒoƒowo na akpa geɖe abe dɔwɔnu ƒe ʋuƒo ene.

Dze anyi

Na gɔmeɖoanyi ƒe atsyãwo kple kpekpeɖeŋu si te ŋu trɔna ɖe nɔnɔmewo ŋu na akpa siwo woate ŋu agbã abe accordions kple mɔfiame ene.

Carousel ƒe ƒuƒoƒo

Wɔ dzidzɔkpɔkpɔ ƒe ɖoɖowɔɖi na nyatakaka ɖesiaɖe si nèdi be yeana nyatakakawo ƒe slideshow si me woawɔ nu aduadu le.

Ŋlɔ ŋgɔ

Gɔmeɖoanyi, si keke ɖe enu bɔbɔe plugin na kabakaba wɔwɔ kabakaba typeaheads dzeaniwo kple nɔnɔme nuŋɔŋlɔ ɖesiaɖe.

Tɔtrɔwo * .

Ne èdi tɔtrɔ ƒe ŋusẽkpɔɖeamedzi bɔbɔewo la, tsɔ bootstrap-transition.js kpe ɖe eŋu zi ɖeka be nàgli le modals me alo nàɖe nuxlɔ̃amewo ɖa.

* Wohiã na animation le plugins me

Tawo yi dzi! Javascript ƒe kpeɖeŋutɔwo katã hiã jQuery ƒe tata yeyetɔ.

Ku ɖe modals ŋu

A streamlined, gake flexible, xɔ ɖe dekɔnu javascript modal plugin kple dɔwɔwɔ suetɔ kekeake si hiã kple smart defaults ko.

Wɔ faɛl la ƒe kɔpi

Kpɔɖeŋu si meʋãna o

Le ete la, wowɔ modal si woɖe ɖe go le mɔ si mewɔa tɔtrɔ o nu.

Live demo ƒe wɔwɔfia

Trɔ modal aɖe to javascript dzi to asiƒoƒo ɖe dzesi si le ete la dzi. Aɖiɖi ɖe anyi eye wòaɖiɖi tso axaa tame.

Dze demo modal gɔme

Bootstrap-modal zazã

Yɔ modal la to javascript dzi:

  1. $ ( '#nyeModal' ). modal ( tiatiawɔblɔɖewo ) .

Tiatiawɔblɔɖewo

Ŋkɔ ƒomevi gᴐmedzeƒe nuɖᴐɖᴐ
megbenyawo boolean ƒe ƒuƒoƒo nyateƒe Modal-backdrop ƒe akpa aɖe hã le eme. Alo, gblɔ staticna megbenya si metua modal le ʋuʋu dzi o.
keyboard dzi boolean ƒe ƒuƒoƒo nyateƒe Doa modal la ne wozi escape key dzi
ɖe fia boolean ƒe ƒuƒoƒo nyateƒe Fia modal la ne wodze egɔme.

Dzesidede dzesiwo

Àteŋu awɔ modals ŋudɔ le wò axa dzi bɔbɔe evɔ mahiã be nàŋlɔ javascript ƒe fli ɖeka pɛ hã o. Ðeko nàɖoe data-toggle="modal"ɖe controller element dzi kple a data-target="#foo"alo href="#foo"si sɔ kple modal element id, eye ne èzi edzi la, adze wò modal gɔme.

Azɔ hã, be nàtsɔ tiatia aɖewo akpe ɖe wò modal kpɔɖeŋu ŋu la, ɖeko nàde wo abe nyatakaka ƒe nɔnɔme bubuwo ene ɖe dziɖuɖu ƒe akpaa alo modal dzesi ŋutɔ dzi.

  1. <a klass = "btn" data-toggle = "modal" href = "#nyeModal" > Dze Mɔnu gɔme </a>
  1. <div klass = "modal ɣla" id = "nyeModal" >
  2. <div klass = "modal-tanya" >
  3. <bɔt ƒomevi = "bɔt" klass = "tu" data-dismiss = "modal" > × </button>
  4. <h3> Modal ƒe tanya </h3>
  5. </div> ƒe nyawo
  6. <div klass = "modal-ŋutilã" >
  7. <p> Ŋutilã nyui ɖeka... </p>
  8. </div> ƒe nyawo
  9. <div klass = "modal-afɔti" >
  10. <a href = "#" klass = "btn" nyatakaka-ɖe asi le eŋu = "modal" > Tu </a>
  11. <a href = "#" class = "btn btn-primary" > Dzra tɔtrɔwo ɖo </a>
  12. </div> ƒe nyawo
  13. </div> ƒe nyawo
Tawo yi dzi! Ne èdi be wò modal nawɔ agbe le eme kple ado go la, ɖeko nàtsɔ .fadeklass aɖe akpe ɖe .modalelement la ŋu (kpɔ demo la be nàkpɔ esia le dɔwɔwɔ me) eye nàde bootstrap-transition.js eme.

Mɔnuwo

.modal(tiatiawɔblɔɖe) .

Ewɔa wò nyatakakawo ŋudɔ abe modal ene. Lɔ̃ ɖe tiatia siwo woate ŋu awɔ le wo ɖokui si dzi object.

  1. $ ( '#nyeModal' ). modal ({ ) .
  2. keyboard : alakpa
  3. }) .

.modal('trɔ asi le eŋu')

Asitɔtrɔ le modal aɖe ŋu.

  1. $ ( '#nyeModal' ). modal ( 'trɔ asi le eŋu' ) .

.modal('ɖee fia') .

Eʋua modal aɖe kple asi.

  1. $ ( '#nyeModal' ). modal ( 'ɖee fia' ) .

.modal('ɣla') .

Asi ɣlaa modal aɖe.

  1. $ ( '#nyeModal' ). modal ( 'ɣla' ) .

Nudzɔdzɔwo

Bootstrap ƒe modal klass ɖea nudzɔdzɔ ʋee aɖewo ɖe go na hooking ɖe modal dɔwɔwɔ me.

Nudzᴐdzᴐ Nuɖᴐɖᴐ
ɖe fia Nudzɔdzɔ sia doa dzo enumake ne woyɔ showkpɔɖeŋu mɔnu la.
woɖee fia Woɖea nudzɔdzɔ sia ne wowɔ modal la be wòadze na zãla (alala be css ƒe tɔtrɔwo nawu enu).
be Woɖea nudzɔdzɔ sia ɖa enumake ne woyɔ hideinstance mɔnu la.
si le ɣaɣlame Woɖea nudzɔdzɔ sia ne modal la ɣla ɖe zãla la vɔ (alala be css ƒe tɔtrɔwo nawu enu).
  1. $ ( '#nyeModal' ). on ( 'ɣla' , dɔwɔwɔ () { .
  2. // wɔ nane...
  3. }) .

ScrollSpy ƒe kpeɖeŋutɔa nye na nav taɖodzinuwo ƒe asitɔtrɔ le eɖokui si le agbalẽxatsaxatsa ƒe nɔƒe nu.

Wɔ faɛl la ƒe kɔpi

Kpɔɖeŋu navbar kple scrollspy

Yi teƒe si le ete la eye nàkpɔ mɔfiame yeyea. Woade dzesi nu sue siwo le fli dzi la hã. Tee kpɔ!

@da ami

Ad leggings keytar, brunch id nutata kplɔ̃ɖoƒe dolor labore. Pitchfork yr enim lo-fi hafi wodzra qui. Tumblr agble-to-kplɔ̃ kekefɔkpa ƒe gomenɔamesiwo nusianu. Anim keffiyeh carles ƒe lãgbalẽ. Velit seitan mcsweeney ƒe fotoɖeƒe 3 amegãxi ɣleti irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui ɖewohĩ mèse wo ŋkɔ kpɔ o et cardigan kakaɖedzi ga culpa biodiesel wes anderson atsyɔ̃ɖoɖo. Nihil tattooed accusamus, cred nukokoedonamela biodiesel keffiyeh aɖaŋudɔwɔla ullamco consequat.

@mdo dzi

Veniam marfa ƒe ɖaƒoƒo ƒe ɖaƒoƒo, adipisicing fugiat velit pitchfork ɖa. Freegan ɖa aliqua cupidat mcsweeney ƒe vero. Cupidatat ene loko nisi, ea helvetica nulla carles. Tattooed cosby sweater nuɖuɖu agbatsɔʋu, mcsweeney ƒe quis non freegan vinyl. Lo-fi wes anderson +1 ƒe awudziwuiwo. Carles non atsyɔ̃ɖoɖo ƒe kamedede quis gentrify. Brooklyn adipisicing asinudɔwɔwɔ biya vice keytar deserunt.

ɖeka

Occaecat commodo si nye lãgbalẽgolo si woyɔna be delectus. Fap asinudɔwɔwɔ biya deserunt skateboard ea. Lomo keke ƒe gomenɔamesiwo adipisicing banh mi, velit ea sunt kplɔe ɖo dzidzenu locavore ɖeka-dzɔtsoƒe kɔfi le magna veniam. Agbe kɔkɔ id vinyl, echo tsaɖibɔ consequat quis aliquip banh mi pitchfork. Vero VHS est amiɖeɖe ɖe lãme na ame. Consectetur nisi DIY minim dɔla ƒe akplo. Cred ex le, si li tegbee delectus consectetur fanny pack iphone.

eve

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 dɔla kotoku marfa nusianu delectus nuɖuɖu agbatsɔʋu. Sapiente ƒe wɔwɔme id assumenda. Locavore sed helvetica cliche irony, dziɖegbewo ɖewohĩ mèse nu tso wo ŋu o consequat hoodie gluten-maɖemaɖe lo-fi fap aliquip. Labore elit placeat hafi wodzra vɔ, terry richardson proident brunch nesciunt quis cosby awudziwui pariatur keffiyeh ut helvetica aɖaŋudɔwɔla. Cardigan asinudɔwɔwɔ biya seitan dzadzraɖo velit. VHS chambray laboris nye ɣeyiɣi kpui aɖe ƒe veniam. Anim mollit minim commodo ullamco dziɖegbe ƒe avuwo.


bootstrap-scrollspy.js zazã

Yɔ agbalẽxatsaxatsa la to javascript dzi:

  1. $ ( '#navbar' ). agbalẽxatsaxatsa () .

Dzesidede dzesiwo

Be nàtsɔ scrollspy nuwɔna akpe ɖe wò topbar navigation ŋu bɔbɔe la, ɖeko nàtsɔe akpe data-spy="scroll"ɖe element si nèdi be yeatsa ŋku ŋu (zi geɖe la, esia anye ŋutilã la).

  1. <ŋutilã data-spy = "ʋuʋu" > ... </ŋutilã>
Tawo yi dzi! Ele be id taɖodzinu siwo woate ŋu akpɔ gbɔ nanɔ Navbar kadodowo me. Le kpɔɖeŋu me, ele be a <a href="#home">home</a>nasɔ kple nane si le dom la me abe <div id="home"></div>.

Mɔnuwo

.scrollspy ('gbugbɔ') .

Ne èle scrollspy zãm kpe ɖe nusiwo wotsɔ kpe ɖe DOM ŋu alo wo ɖeɖe ɖa ŋu la, ahiã be nàyɔ gbugbɔgawɔ mɔnu la abe ale:

  1. $ ( '[nyatakaka-ŋkutsala="ʋuʋu"]' ). ɖesiaɖe ( dɔwɔwɔ () { .
  2. var $ ŋkutsala = $ ( esia ). scrollspy ( 'gbugbɔ' ) .
  3. });

Tiatiawɔblɔɖewo

Ŋkɔ ƒomevi gᴐmedzeƒe nuɖᴐɖᴐ
offset ƒe ƒuƒoƒo xexlẽdzesi 10 Pixels siwo woatsɔ atso dzi ne wole akɔnta bum le agbalẽxatsaxatsa ƒe nɔƒe ŋu.

Nudzɔdzɔwo

Nudzᴐdzᴐ Nuɖᴐɖᴐ
wɔ dɔ Nudzɔdzɔ sia doa dzo ɣesiaɣi si agbalẽxatsaxatsa la va le nu yeye aɖe ŋu dɔ wɔm.

Plugin sia tsɔa tab kple pill ƒe dɔwɔwɔ kabakaba, si trɔna kpena ɖe eŋu hena tɔtrɔ to nutoa me nyatakakawo me.

Wɔ faɛl la ƒe kɔpi

Kpɔɖeŋu tabwo

Zi tab siwo le ete dzi be nàtrɔ asi le akpa ɣaɣlawo dome, to menu siwo le ete dzi gɔ̃ hã.

Raw denim ɖewohĩ mèse wo ŋkɔ kpɔ o jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth aƒetɔ kɔklɔ. Aɖatsiwo ƒe nyagbɔgblɔ ɣeyiɣi kpui aɖe, williamsburg carles vegan helvetica. Reprehenderit lãwula retro keffiyeh drɔ̃ekukula synth. Cosby ƒe awudziwui eu banh mi, qui irure terry richardson ex squid. Aliquip placeat lãwo ƒe lãmesẽfefewɔlawo ƒe iphone. Seitan aliquip quis cardigan amerikatɔwo ƒe awudodo, lãwula 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.


Bootstrap-tab.js zazã

Na tabbable tabs nawɔ dɔ to javascript dzi (ele be woawɔ tab ɖesiaɖe ŋudɔ ɖekaɖeka):

  1. $ ( '#nyeTab a' ). zi ( dɔwɔwɔ ( e ) ) { .
  2. e . xe mɔ ɖeDefault ();
  3. $ ( esia ). tab ( 'ɖee fia' );
  4. }) .

Àte ŋu awɔ tab ɖekaɖekawo ŋudɔ le mɔ vovovowo nu:

  1. $ ( '#nyeTab a[href="#nyatakakadzraɖoƒe"]' ). tab ( 'ɖee fia' ); // Tia tab le ŋkɔ nu
  2. $ ( '#nyeTab a:gbãtɔ' ). tab ( 'ɖee fia' ); // Tia tab gbãtɔ
  3. $ ( '#nyeTab a:mlɔetɔ' ). tab ( 'ɖee fia' ); // Tia tab mamlɛtɔ
  4. $ ( '# nyeTab li: eq (2) a' ). tab ( 'ɖee fia' ); // Tia tab etɔ̃lia (0-indexed) .

Dzesidede dzesiwo

Àte ŋu awɔ tab alo pill navigation dɔ javascript aɖeke ŋɔŋlɔ to element aɖe gbɔgblɔ data-toggle="tab"alo ɖe edzi ko me. data-toggle="pill"Ne ètsɔ navkple nav-tabsklasswo kpe ɖe tab ulla ŋu la, awɔ bootstrap tab ƒe atsyã ŋudɔ.

  1. <ul klass = "nav nav-tabs" >
  2. <li><a href = "#aƒe" nyatakaka-trɔtrɔ = "tab" > Aƒe </a></li>
  3. <li><a href = "#nyatakakadzraɖoƒe" data-toggle = "tab" > Nɔnɔmetata </a></li>
  4. <li><a href = "#gbedasiwo" data-toggle = "tab" > Gbedasiwo </a></li>
  5. <li><a href = "#ɖoɖowo" data-toggle = "tab" > Ðoɖowo </a></li>
  6. </ul> ƒe nyawo

Mɔnuwo

$().tab ƒe ƒuƒoƒo

Ewɔa tab element kple emenyawo ƒe nugoe ŋudɔ. Ele be tab nanye a data-targetalo hreftaɖodzinu si nye container node le DOM la me.

  1. <ul klass = "nav nav-tabs" id = "nyeTab" >
  2. <li klass = "dɔwɔwɔ" ><a href = "#aƒe" > Aƒe </a></li>
  3. <li><a href = "#nyatakakadzraɖoƒe" > Nɔnɔmetata </a></li>
  4. <li><a href = "#gbedasiwo" > Gbedasiwo </a></li>
  5. <li><a href = "#ɖoɖowo" > Ðoɖowo </a></li>
  6. </ul> ƒe nyawo
  7.  
  8. <div klass = "tab-menyawo" >
  9. <div klass = "tab-pane le dɔ wɔm" id = "aƒe" > ... </div>
  10. <div klass = "tab-pane" id = "nɔnɔmetata" > ... </div>
  11. <div klass = "tab-pane" id = "gbedasiwo" > ... </div>
  12. <div klass = "tab-pane" id = "ɖoɖowo" > ... </div>
  13. </div> ƒe nyawo
  14.  
  15. <ŋɔŋlɔdzesi>
  16. $ ( dɔwɔwɔ () { .
  17. $ ( '#nyeTab a:mlɔetɔ' ). tab ( 'ɖee fia' );
  18. }) .
  19. </script> ƒe nyawo

Nudzɔdzɔwo

Nudzᴐdzᴐ Nuɖᴐɖᴐ
ɖe fia Nudzɔdzɔ sia doa dzo le tab show dzi, gake hafi woaɖe tab yeyea afia. Zã event.targetkple event.relatedTargetnàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm kple tab si le dɔ wɔm va yi (ne ele eme) ɖe wo nɔewo yome.
woɖee fia Nudzɔdzɔ sia dzona le tab ɖeɖefia me ne woɖe tab aɖe fia vɔ. Zã event.targetkple event.relatedTargetnàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm kple tab si le dɔ wɔm va yi (ne ele eme) ɖe wo nɔewo yome.
  1. $ ( 'a [nyatakaka-trɔtrɔ="tab"]' ). on ( 'woɖee fia' , dɔwɔwɔ ( e ) { .
  2. e . taɖodzinu // tab si wowɔ dɔ le
  3. e . relatedTarget // tab si do ŋgɔ
  4. }) .

Le Dɔwɔnu ƒe Aɖaŋuɖoɖowo Ŋu

Wotsɔ jQuery.tipsy ƒe kpeɖeŋutɔ nyuitɔ kekeake si Jason Frame ŋlɔ la ʋãe; Dɔwɔnu ƒe aɖaŋuɖoɖowo nye tɔtrɔ yeye aɖe, si meɖoa ŋu ɖe nɔnɔmetatawo ŋu o, zãa css3 hena nɔnɔmetatawo, kple data-nɔnɔmewo hena teƒea ƒe tanyawo dzraɖoƒe.

Wɔ faɛl la ƒe kɔpi

Dɔwɔnu ƒe Aɖaŋuɖoɖowo zazã ƒe kpɔɖeŋu

Tsɔ asi ɖo kadodo siwo le ete la dzi be nàkpɔ dɔwɔnu ƒe aɖaŋuɖoɖowo:

Tight pants next level keffiyeh ɖewohĩ mèse wo ŋkɔ kpɔ o. Fotoɖeƒe ɖaɖa raw denim letterpress vegan dɔla kotoku stumptown. Agble-to-kplɔ̃ seitan, mcsweeney ƒe fixie si li tegbee quinoa 8-bit american awuwo le terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo dziɖegbe ƒe avuwo. Tofu biodiesel williamsburg marfa, ene loko mcsweeney ƒe kɔ vegan chambray. A really ironic artisan whatever keytar , scenester agble-ɖe-kplɔ̃ banksy Austin twitter asi freegan cred raw denim ɖeka-dzɔtsoƒe kɔfi viral.


bootstrap-tooltip.js zazã

Dze dɔwɔnu ƒe aɖaŋuɖoɖoa gɔme to javascript dzi:

  1. $ ( '#kpɔɖeŋu' ). dɔwɔnu ƒe aɖaŋuɖoɖo ( tiatiawɔblɔɖe ) .

Tiatiawɔblɔɖewo

Ŋkɔ ƒomevi gᴐmedzeƒe nuɖᴐɖᴐ
nɔnɔmetata si me woɖea nɔnɔmetatawo le boolean ƒe ƒuƒoƒo nyateƒe zã css fade ƒe tɔtrɔ ɖe dɔwɔnu ƒe aɖaŋuɖoɖoa dzi
ɖoɖo ɖe teƒe aɖe ka|dɔwɔwɔ 'dzi' alesi woaɖo dɔwɔnu ƒe aɖaŋuɖoɖoa ɖe teƒe - ta | ete | miame | nyui
tiatiawɔla ka alakpa Ne wotsɔ tiatiawɔnu aɖe na la, woatsɔ dɔwɔnu ƒe aɖaŋuɖoɖo nuawo ade asi na taɖodzinu siwo woɖo.
tanya kaƒoƒo | wᴐ dᴐ '' . tanya ƒe asixɔxɔ gbãtɔ ne `title` tag mele afima o
daƒe ka 'hover'. alesi wodzea dɔwɔnu ƒe aɖaŋuɖoɖo gɔmee - hover | susu tsɔtsɔ ɖo nu ŋu | asi nu
hehe ɖe megbe xexlẽdzesi | nu 0.

delay ɖeɖefia kple eɣla dɔwɔnu ƒe aɖaŋuɖoɖo (ms) - meku ɖe asi trigger ƒomevi ŋu o

Ne wotsɔ xexlẽdzesi aɖe na la, wozãa megbedede ɖe ɣla/ɖee fia siaa ŋu

Nu ƒe wɔwɔme enye:delay: { show: 500, hide: 100 }

Tawo yi dzi! Woateŋu agblɔ tiatia siwo woawɔ na dɔwɔnu ɖekaɖekawo le mɔ bubu nu to nyatakaka ƒe nɔnɔmewo zazã me.

Dzesidede dzesiwo

Le dɔwɔwɔ ta la, Tooltip kple Popover data-apis nye opt in. Ne èdi be yeazã wo la, ɖeko nàgblɔ tiatiawɔblɔɖe ƒe tiatia aɖe.

  1. <a href = "#" rel = "dɔwɔnu ƒe aɖaŋuɖoɖo" title = "dɔwɔnu ƒe aɖaŋuɖoɖo gbãtɔ" > tsɔ asi le dzinye </a>

Mɔnuwo

$ ().dɔwɔnu ƒe aɖaŋuɖoɖo(tiatia) .

Kpe dɔwɔnu ƒe aɖaŋuɖoɖo ƒe asiléƒe ɖe element ƒe nuƒoƒoƒu ŋu.

.dɔwɔnu ƒe aɖaŋuɖoɖo('ɖee fia')

Eɖea element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo fiana.

  1. $ ( '#nu vevi aɖe' ). dɔwɔnu ƒe aɖaŋuɖoɖo ( 'ɖee fia' ) .

.dɔwɔnu ƒe aɖaŋuɖoɖo('ɣla')

Ɣla element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo.

  1. $ ( '#nu vevi aɖe' ). dɔwɔnu ƒe aɖaŋuɖoɖo ( 'ɣla' ) .

.dɔwɔnu ƒe aɖaŋuɖoɖo('toggle')

Trɔa element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo.

  1. $ ( '#nu vevi aɖe' ). dɔwɔnu ƒe aɖaŋuɖoɖo ( 'toggle' ) .

Ku ɖe popovers ŋu

Tsɔ nyatakaka suesuesue siwo wotsɔ ƒo xlãe, abe esiwo le iPad la dzi ene, kpe ɖe nu ɖesiaɖe ŋu hena nyatakaka evelia ƒe aƒe.

* Ebia be woatsɔ Tooltip ade eme

Wɔ faɛl la ƒe kɔpi

Kpɔɖeŋu hover popover

Tsɔ asi ɖo abɔta la dzi be nàdze popover la gɔme.


Bootstrap-popover.js zazã

Na popovers nawɔ dɔ to javascript dzi:

  1. $ ( '#kpɔɖeŋu' ). popover ( tiatia siwo woawɔ ) .

Tiatiawɔblɔɖewo

Ŋkɔ ƒomevi gᴐmedzeƒe nuɖᴐɖᴐ
nɔnɔmetata si me woɖea nɔnɔmetatawo le boolean ƒe ƒuƒoƒo nyateƒe zã css fade ƒe tɔtrɔ ɖe dɔwɔnu ƒe aɖaŋuɖoɖoa dzi
ɖoɖo ɖe teƒe aɖe ka|dɔwɔwɔ 'nyui' alesi woaɖo popover la ɖe ɖoɖo nu - ta | ete | miame | nyui
tiatiawɔla ka alakpa ne wotsɔ tiatiawɔnu aɖe na la, woatsɔ dɔwɔnu ƒe aɖaŋuɖoɖo nuawo ade asi na taɖodzinu siwo woɖo
daƒe ka 'hover'. alesi wodzea dɔwɔnu ƒe aɖaŋuɖoɖo gɔmee - hover | susu tsɔtsɔ ɖo nu ŋu | asi nu
tanya kaƒoƒo | wᴐ dᴐ '' . tanya ƒe asixɔxɔ gbãtɔ ne `title` nɔnɔme mele afima o
eme nuwo kaƒoƒo | wᴐ dᴐ '' . default content value ne `data-content` nɔnɔme mele afima o
hehe ɖe megbe xexlẽdzesi | nu 0.

delay ɖeɖefia kple eɣla popover (ms) - meku ɖe asi trigger ƒomevi ŋu o

Ne wotsɔ xexlẽdzesi aɖe na la, wozãa megbedede ɖe ɣla/ɖee fia siaa ŋu

Nu ƒe wɔwɔme enye:delay: { show: 500, hide: 100 }

Tawo yi dzi! Woateŋu agblɔ tiatia siwo woawɔ na popover ɖekaɖekawo le mɔ bubu nu to nyatakaka ƒe nɔnɔmewo zazã me.

Dzesidede dzesiwo

Le dɔwɔwɔ ta la, Tooltip kple Popover data-apis nye opt in. Ne èdi be yeazã wo la, ɖeko nàgblɔ tiatiawɔblɔɖe ƒe tiatia aɖe.

Mɔnuwo

$ ().popover (tiatiawɔblɔɖe) .

Edzea popovers gɔme na element nuƒoƒoƒu.

.popover('ɖee fia') .

Eɖea elements popover aɖe fiana.

  1. $ ( '#nu vevi aɖe' ). popover ( 'ɖee fia' ) .

.popover('ɣla') .

Ɣla elementwo ƒe popover aɖe.

  1. $ ( '#nu vevi aɖe' ). popover ( 'ɣla' ) .

.popover('trɔ asi le eŋu')

Trɔ asi le elements popover ŋu.

  1. $ ( '#nu vevi aɖe' ). popover ( 'trɔ asi le eŋu' ) .

Ku ɖe nuxlɔ̃amewo ŋu

Nuxlɔ̃ame ƒe kpeɖeŋutɔ nye klass sue aɖe si wotsɔna tsɔa dɔwɔwɔ kplikplikpli kpena ɖe nuxlɔ̃amewo ŋu.

Hee ɖa anyi

Kpɔɖeŋu nuxlɔ̃amewo

Nuxlɔ̃ame ƒe kpeɖeŋutɔa wɔa dɔ le nuxlɔ̃ame gbedasi siwo woɖona edziedzi dzi, eye wòxea mɔ na gbedasiwo.

Guacamole kɔkɔe la! Best check yo self, mèle dzedzem nyuie akpa o.

Oo, ʋuʋu! Vodada aɖe va su asiwò!

Trɔ esia kple ema eye nàgadze agbagba ake. Duis mollis, est non commodo luctus, nisi erat agbatsɔla ƒe lãgbalẽ, eget lacinia odio sem nec elit. Cras mattis consectetur purus nɔa anyi ɖe lãmi me.

Wɔ afɔɖeɖe sia Alo wɔ esia


bootstrap-alert.js zazã

Na nuxlɔ̃ame aɖe ɖeɖeɖa to javascript dzi nawɔ dɔ:

  1. $ ( ".nuxlɔ̃ame" ). nuxlɔ̃ame () .

Dzesidede dzesiwo

Ðeko nàtsɔe akpe data-dismiss="alert"ɖe wò nutrenu ƒe dzesi ŋu be wòana nuxlɔ̃ame ƒe nutrenu ƒe dɔwɔwɔ le eɖokui si.

  1. <a klass = "tu" data-dismiss = "nuxlɔ̃ame" href = "#" > &ɣeyiɣiwo; </a>

Mɔnuwo

$().nuxlɔ̃ame () .

Bla nuxlɔ̃amewo katã kple dɔwɔwɔ kplikplikpli. Be wò nuxlɔ̃amewo nawɔ dɔ ne wotu la, kpɔ egbɔ be wowɔ .fadekple .inklass la le wo ŋu xoxo.

.alert('tu nu') .

Etua nuxlɔ̃ame aɖe nu.

  1. $ ( ".nuxlɔ̃ame" ). alert ( 'tu ɖe eŋu' ) .

Nudzɔdzɔwo

Bootstrap ƒe nuxlɔ̃ame ƒe hatsotso la ɖea nudzɔdzɔ ʋee aɖewo ɖe go hena hooking ɖe nuxlɔ̃ame ƒe dɔwɔwɔ me.

Nudzᴐdzᴐ Nuɖᴐɖᴐ
tu Nudzɔdzɔ sia doa dzo enumake ne woyɔ closekpɔɖeŋu mɔnu la.
wotu nu ɖo Woɖea nudzɔdzɔ sia ne wotu nuxlɔ̃amea (alala be css ƒe tɔtrɔwo nawu enu).
  1. $ ( '#nye-nuxlɔ̃ame' ). bind ( 'tu' , dɔwɔwɔ () { .
  2. // wɔ nane...
  3. }) .

Ku ɖe

Wɔ geɖe wu kple abɔtawo. Dzɔdzɔmeŋusẽ ƒe abɔta gblɔ alo wɔ abɔta ƒe ƒuƒoƒowo na akpa geɖe abe dɔwɔnu ƒe ʋuƒo ene.

Wɔ faɛl la ƒe kɔpi

Kpɔɖeŋuwo zazã

Zã buttons plugin na nɔnɔmewo kple toggles.

Dukɔmevinyenye ƒe nuwɔna
Toggle ɖeka ƒe tɔtrɔ
Dzesiwo ƒe Aɖaka
Radio dzi

bootstrap-button.js zazã

Na abɔtawo nawɔ dɔ to javascript dzi:

  1. $ ( '.nav-tabs' ). ƒe dzesi () .

Dzesidede dzesiwo

Nyatakaka ƒe nɔnɔmewo nye nu vevi aɖe le abɔta ƒe kpeɖeŋutɔa me. Kpɔ kpɔɖeŋu ƒe kɔda si le ete hena dzeside ƒomevi vovovoawo.

  1. <!-- Tsɔ data-toggle="bɔt" kpe ɖe eŋu be nàwɔ tɔtrɔ le abɔta ɖeka dzi -->
  2. <button class = "btn" data-toggle = "bɔt" > Trɔtrɔ Ðeka </button>
  3.  
  4. <!-- Tsɔ data-toggle="buttons-checkbox" kpe ɖe eŋu na checkbox ƒe atsyã ƒe tɔtrɔ le btn-group --> dzi
  5. <div klass = "btn-ƒuƒoƒo" nyatakaka-trɔtrɔ = "bɔtwo-dzesiwo ƒe aɖaka" >
  6. <bɔt ƒe hatsotso = "btn" > Miame </bɔt>
  7. <button class = "btn" > Titina </bɔt>
  8. <button class = "btn" > Nuɖusi </button>
  9. </div> ƒe nyawo
  10.  
  11. <!-- Tsɔ data-toggle="buttons-radio" kpee na radio ƒe atsyã ƒe tɔtrɔ le btn-group -->
  12. <div klass = "btn-ƒuƒoƒo" nyatakaka-trɔtrɔ = "bɔtwo-radio" >
  13. <bɔt ƒe hatsotso = "btn" > Miame </bɔt>
  14. <button class = "btn" > Titina </bɔt>
  15. <button class = "btn" > Nuɖusi </button>
  16. </div> ƒe nyawo

Mɔnuwo

$ ().button ('trɔ asi le eŋu')

Toggles push nɔnɔme. Enaa abɔta la dzena abe ɖe wowɔe ene.

Tawo yi dzi! Àte ŋu ana auto toggling na button aɖe nawɔ dɔ to data-toggleattribute la zazã me.
  1. <bɔt ƒe hatsotso = "btn" nyatakaka-trɔ = "bɔt" > ... </bɔt>

$ ().button ('agbatsɔtsɔ le eme')

Ðo abɔta ƒe nɔnɔme ɖe agbatsɔtsɔ me - ewɔa abɔta nuwɔametɔe eye wòtrɔa nuŋɔŋlɔ ɖe nuŋɔŋlɔ ƒe agbatsɔtsɔ ŋu. Ele be woaɖe nuŋɔŋlɔ ƒe agbatsɔtsɔ gɔme le abɔta ƒe akpaa dzi to nyatakaka ƒe nɔnɔme zazã me data-loading-text.

  1. <button class = "btn" data-loading-text = "nu siwo le agba me..." > ... </button>
Tawo yi dzi! Firefox yia edzi nɔa nɔnɔme si wowɔ nuwɔametɔe la me le axawo ƒe agbawo katã me . Esia gbɔ kpɔnu aɖee nye be woazã autocomplete="off".

$ ().button ('gbugbɔ ɖoɖo')

Trɔ asi le abɔta ƒe nɔnɔme ŋu - trɔa nuŋɔŋlɔ ɖe nuŋɔŋlɔ gbãtɔ ŋu.

$ ().bɔt (ka) .

Trɔ asi le abɔta ƒe nɔnɔme ŋu - trɔa nuŋɔŋlɔ ɖe nuŋɔŋlɔ ƒe nɔnɔme ɖesiaɖe si woɖe fia le nyatakaka me.

  1. <button class = "btn" nyatakaka-wu-nuŋɔŋlɔ = "wowu enu!" > ... </a dzesi>
  2. <ŋɔŋlɔdzesi>
  3. $ ( '.btn' ). button ( 'wu enu' ) .
  4. </script> ƒe nyawo

Ku ɖe

Na gɔmeɖoanyi ƒe atsyãwo kple kpekpeɖeŋu si te ŋu trɔna ɖe nɔnɔmewo ŋu na akpa siwo woate ŋu agbã abe accordions kple mɔfiame ene.

Wɔ faɛl la ƒe kɔpi

* Ebia be woatsɔ Transitions ƒe kpeɖeŋutɔa ade eme.

Kpɔɖeŋu accordion

Míezã collapse plugin la, míewɔ accordion ƒe atsyã ƒe widget bɔbɔe aɖe:

Anim pariatur cliche reprehenderit, enim eiusmod agbe kɔkɔ accusamus terry richardson ad squid. 3 amegãxi ɣleti officia aute, non cupidat skateboard dolor brunch. Nuɖuɖu agbatsɔʋu quinoa nesciunt laborum eiusmod. Brunch 3 amegãxi dzinu tempor, sunt aliqua tsɔ xevi aɖe ɖo edzi squid ɖeka-dzɔtsoƒe kɔfi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, asinudɔwɔwɔ biya dɔ wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur lãwula vice lomo. Leggings occaecat aɖaŋu biya agble-ɖe-kplɔ̃, raw denim atsyɔ̃ɖoɖo synth nesciunt ɖewohĩ mèse wo accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod agbe kɔkɔ accusamus terry richardson ad squid. 3 amegãxi ɣleti officia aute, non cupidat skateboard dolor brunch. Nuɖuɖu agbatsɔʋu quinoa nesciunt laborum eiusmod. Brunch 3 amegãxi dzinu tempor, sunt aliqua tsɔ xevi aɖe ɖo edzi squid ɖeka-dzɔtsoƒe kɔfi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, asinudɔwɔwɔ biya dɔ wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur lãwula vice lomo. Leggings occaecat aɖaŋu biya agble-ɖe-kplɔ̃, raw denim atsyɔ̃ɖoɖo synth nesciunt ɖewohĩ mèse wo accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod agbe kɔkɔ accusamus terry richardson ad squid. 3 amegãxi ɣleti officia aute, non cupidat skateboard dolor brunch. Nuɖuɖu agbatsɔʋu quinoa nesciunt laborum eiusmod. Brunch 3 amegãxi dzinu tempor, sunt aliqua tsɔ xevi aɖe ɖo edzi squid ɖeka-dzɔtsoƒe kɔfi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, asinudɔwɔwɔ biya dɔ wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur lãwula vice lomo. Leggings occaecat aɖaŋu biya agble-ɖe-kplɔ̃, raw denim atsyɔ̃ɖoɖo synth nesciunt ɖewohĩ mèse wo accusamus labore sustainable VHS.

Bootstrap-collapse.js zazã

Na wòawɔ dɔ to javascript dzi:

  1. $ ( ".klɔƒe" ). dze anyi () .

Tiatiawɔblɔɖewo

Ŋkɔ ƒomevi gᴐmedzeƒe nuɖᴐɖᴐ
dzila tiatiawɔla alakpa Ne selector la ekema woatu nusiwo katã woateŋu agbã le dzila si woɖo la te ne woɖe nu sia si woateŋu agbã la fia. (si sɔ kple accordion ƒe nuwɔna si wozãna tsã)
trɔ asi le eŋu boolean ƒe ƒuƒoƒo nyateƒe Trɔa nusi woate ŋu agbã la le yɔyɔ dzi

Dzesidede dzesiwo

Ðeko nàtsɔe akpe ɖe eŋu data-toggle="collapse"kple a data-targetto element be wòade dɔ asi na element si woate ŋu agbã la dzi kpɔkpɔ le eɖokui si. Nɔnɔmea data-targetxɔa css tiatia aɖe be woatsɔ awɔ collapse la ŋudɔ ɖe. Kpɔ egbɔ be yetsɔ klass la kpe collapseɖe nusi woate ŋu agbã ŋu. Ne èdi be wòaʋu le gɔmedzedzea me la, tsɔ klass bubu kpee in.

  1. <button class = "btn btn-afɔku" nyatakaka-trɔtrɔ = "mumu" nyatakaka-taɖodzinu = "#demo" >
  2. bɔbɔe si woate ŋu agbã
  3. </button> ƒe dzesi
  4.  
  5. <div id = "demo" klass = "gbã le" > ... </div>
Tawo yi dzi! Be nàtsɔ ƒuƒoƒodzikpɔkpɔ si le abe accordion ene akpe ɖe dziɖuɖu si woate ŋu agbã ŋu la, tsɔ nyatakaka ƒe nɔnɔme kpe ɖe eŋu data-parent="#selector". Kpɔ demo la be nàkpɔ esia le dɔwɔwɔ me.

Mɔnuwo

.collapse(tiatiawɔnuwo) .

Ewɔa wò nyatakakawo ŋudɔ abe nusi woate ŋu agbã ene. Lɔ̃ ɖe tiatia siwo woate ŋu awɔ le wo ɖokui si dzi object.

  1. $ ( '#nye si woate ŋu aƒo ƒu' ). ƒuƒuiƒe ({
  2. toggle : alakpa
  3. }) .

.collapse('trɔ asi le eŋu') .

Trɔa nusi woate ŋu agbã la ɖe nusi woɖe fia alo woɣla me.

.collapse('ɖee fia') .

Fia nusi woate ŋu agbã.

.collapse('ɣla') .

Eɣlaa nusi woate ŋu agbã.

Nudzɔdzɔwo

Bootstrap ƒe collapse klass ɖea nudzɔdzɔ ʋee aɖewo ɖe go na hooking ɖe collapse dɔwɔwɔ me.

Nudzᴐdzᴐ Nuɖᴐɖᴐ
ɖe fia Nudzɔdzɔ sia doa dzo enumake ne woyɔ showkpɔɖeŋu mɔnu la.
woɖee fia Woɖea nudzɔdzɔ sia ne wowɔ collapse element aɖe be wòadze na zãla (alala be css ƒe tɔtrɔwo nawu enu).
be Wodaa tu nudzɔdzɔ sia enumake ne woyɔ hidemɔnua vɔ.
si le ɣaɣlame Woɖea nudzɔdzɔ sia ne woɣla collapse element aɖe ɖe zãla la (alala be css ƒe tɔtrɔwo nawu enu).
  1. $ ( '#nye si woate ŋu aƒo ƒu' ). on ( 'ɣla' , dɔwɔwɔ () { .
  2. // wɔ nane...
  3. }) .

Ku ɖe

Gɔmeɖoanyi, si keke ɖe enu bɔbɔe plugin na kabakaba wɔwɔ kabakaba typeaheads dzeaniwo kple nɔnɔme nuŋɔŋlɔ ɖesiaɖe.

Wɔ faɛl la ƒe kɔpi

Kpɔɖeŋu

Dze nuŋɔŋlɔ gɔme le akpa si le ete la me be nàɖe nusiwo do ŋgɔ na nuŋɔŋlɔa afia.


bootstrap-typeahead.js zazã

Yɔ typeahead to javascript dzi:

  1. $ ( '.ŋlɔ ŋgɔgbe' ). ŋlɔ nu ɖe ​​ŋgɔ () .

Tiatiawɔblɔɖewo

Ŋkɔ ƒomevi gᴐmedzeƒe nuɖᴐɖᴐ
dzᴐtsoƒe ƒuƒoƒo ƒe ƒuƒoƒo [ ] . Nyatakakatsoƒe si ŋu woabia nya tsoe.
nuwo xexlẽdzesi 8 Nusiwo woaɖe afia le xexlẽdzesi si le fli me la ƒe xexlẽme si sɔ gbɔ wu.
matcher wᴐ dᴐ nu suesuesue siwo me womesea nu le o Mɔnu si wozãna tsɔ nyaa nenye be nyabiase aɖe sɔ kple nu aɖe. Lɔ̃ ɖe nyaʋiʋli ɖeka dzi, itemsi ŋu woado nyabiasea kpɔ le. Kpɔ nyabiase si li fifia kple this.query. Trɔ boolean truene biabia nye ɖeka.
nuƒoƒoƒula wᴐ dᴐ exact match,
ŋɔŋlɔdzesi gãwo ƒe dzesiwo,
ŋɔŋlɔdzesi gãwo ƒe vovototodedeameme
Mɔnu si wozãna tsɔ ɖoa ​​autocomplete ƒe emetsonuwo ɖe ɖoɖo nu. Lɔ̃ ɖe nyaʋiʋli ɖeka dzi itemseye typeahead ƒe kpɔɖeŋu ƒe kekeme le esi. Tsɔ nyabiase si nèbia fifia la ɖo this.query.
nusi te gbe ɖe edzi wᴐ dᴐ te gbe ɖe nusiwo katã sɔ kple wo nɔewo siwo woɖo ɖi la dzi Mɔnu si wozã tsɔ te gbe ɖe autocomplete ƒe emetsonuwo dzi. Lɔ̃ ɖe nyaʋiʋli ɖeka dzi itemeye typeahead ƒe kpɔɖeŋu ƒe kekeme le esi. Ele be wòatrɔ html.

Dzesidede dzesiwo

Tsɔ nyatakaka ƒe nɔnɔmewo kpee be nàŋlɔ element aɖe si me typeahead ƒe dɔwɔwɔ le la agbalẽ me.

  1. <input type = "nuŋɔŋlɔ" data-na = "typeahead" >

Mɔnuwo

.typeahead(tiatiawɔnuwo) .

Edzea nyawo tsɔtsɔ de eme gɔme kple typeahead.