Ame ɖekaɖekawo alo woƒo ƒu

Woateŋu ade plugins ɖekaɖeka (togbɔ be ɖewo bia be woanɔ te ɖe wo dzi hã), alo wo katã zi ɖeka. Bootstrap.js kple bootstrap.min.js siaa me plugins katã le faɛl ɖeka me.

Nyatakaka ƒe nɔnɔmewo

Àteŋu azã Bootstrap ƒe kpeɖeŋutɔwo katã to dzeside API la dzi ko evɔ maŋlɔ JavaScript ƒe fli ɖeka pɛ hã o. Esia nye Bootstrap ƒe API ƒe klass gbãtɔ eye ele be wòanye wò susu gbãtɔ ne èle plugin zãm.

Ne míegblɔe alea la, le nɔnɔme aɖewo me la, ate ŋu anyo be woatsi dɔwɔnu sia. Eyata míena ŋutete hã be míawɔ nyatakaka nɔnɔme API la nuwɔametɔe to nudzɔdzɔwo katã ɖeɖeɖa le ŋutilã ƒe ŋkɔ dometsotso kple `'data-api'` dzi. Esia le abe alea ene:

$ ( 'ŋutilã' ). off ( '.nyatakaka-api' ) .

Alo, be nàɖo taɖodzinu na plugin aɖe koŋ la, ɖeko nàde plugin la ƒe ŋkɔ abe ŋkɔteƒe ene kpe ɖe data-api ŋkɔteƒe ŋu abe esia ene:

$ ( 'ŋutilã' ). off ( '.nuxlɔ̃ame.nyatakaka-api' ) .

Ðoɖowɔɖi ƒe API

Míexɔe se hã be ele be nàte ŋu azã Bootstrap ƒe kpeɖeŋutɔwo katã to JavaScript API dzi ko. Dutoƒo APIwo katã nye mɔnu ɖeka, siwo ŋu kɔsɔkɔsɔ le, eye wogbugbɔa nuƒoƒoƒu si dzi wowɔ dɔ ɖo la trɔna.

$ ( ".btn.afɔku" ). button ( "trɔ asi le eŋu" ). addClass ( "ami ƒe ami" ) .

Ele be mɔnuwo katã naxɔ tiatiawɔblɔɖe ƒe nu, ka si woɖo taɖodzinu na mɔnu aɖe koŋ, alo naneke o (si dzea kpeɖeŋutɔ gɔme kple nuwɔna si woɖo ɖi):

$ ( "#nyeModal" ). modal () // dze egɔme kple defaults                       
$ ( "#nyeModal" ). modal ({ keyboard : alakpa }) // wodze egɔme kple keyboard aɖeke o     
$ ( "#nyeModal" ). modal ( 'show' ) // dzea egɔme eye wòyɔa ɖeɖefia enumake                

Plugin ɖesiaɖe hã ɖea eƒe raw constructor ɖe go le `Constructor` ƒe nɔnɔme dzi: $.fn.popover.Constructor. Ne èdi be yeaxɔ plugin ƒe kpɔɖeŋu aɖe koŋ la, xɔe tẽ tso element aɖe me: $('[rel=popover]').data('popover').

Masɔmasɔ aɖeke Meli O

Ɣeaɖewoɣi la, ehiãna be woazã Bootstrap ƒe kpeɖeŋutɔwo kple UI ƒe ɖoɖo bubuwo. Le nɔnɔme siawo me la, ŋkɔteƒewo ƒe gododo ate ŋu adzɔ ɣeaɖewoɣi. Ne esia dzɔ la, àte ŋu ayɔ .noConflictplugin si nèdi be yeatrɔ asi le eƒe asixɔxɔ ŋu.

var bootstrap ƒe abɔta = $ . fn . ƒe dzesi . noConflict () // trɔ $.fn.button ɖe asixɔxɔ si wode asi na va yi la me 
$ . fn . bootstrapBtn = bootstrapButton             // na $().bootstrapBtn bootstrap ƒe dɔwɔwɔ

Nudzɔdzɔwo

Bootstrap naa nudzɔdzɔ tɔxɛwo na plugin ƒe nuwɔna tɔxɛ akpa gãtɔ. Zi geɖe la, esiawo va le nyagbemanɔsitɔ kple nyagbe si va yi ƒe nɔnɔme me - afisi wodzea nyagbe (ex. show) gɔme le nudzɔdzɔ aɖe ƒe gɔmedzedze, eye eƒe akpa si va yi ƒe nɔnɔme (ex. shown) nyea nusi dzea egɔme le nuwɔna aɖe ƒe nuwuwu.

Nudzɔdzɔ siwo katã me seɖoƒe meli na o naa preventDefault ƒe dɔwɔwɔ. Esia naa ŋutete be woatɔ te nuwɔna aɖe wɔwɔ hafi wòadze egɔme.

$ ( '#nyeModal' ). on ( 'ɖee fia' , dɔwɔwɔ ( e ) { .   
    ne (! data ) trɔ gbɔ e . preventDefault () // tɔ te modal ƒe ɖeɖefia   
}) ƒe .

Ku ɖe tɔtrɔwo ŋu

Ne èdi tɔtrɔ ƒe ŋusẽkpɔɖeamedzi bɔbɔewo la, tsɔ bootstrap-transition.js kpe ɖe JS faɛl bubuawo ŋu zi ɖeka. Ne èle bootstrap.js si woƒo ƒu (alo woɖe edzi) zãm la , mehiã be nàde esia eme o—ele afima xoxo.

Zã nyawo ƒe akpa aɖewo

Trɔtrɔ ƒe kpeɖeŋutɔ ƒe kpɔɖeŋu ʋee aɖewo:

• Sliding alo fading le modals me
• Tab siwo le vɔvɔm
• Nuxlɔ̃ame siwo le vɔvɔm
• Carousel ƒe ʋuƒo siwo le ʋuʋum

Kpɔɖeŋuwo

Modals nye streamlined, gake woateŋu atrɔ asi le, dzeɖoɖo ƒe nyabiasewo kple dɔwɔwɔ suetɔ kekeake si hiã kple smart defaults.

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

Modal si woɖe gɔme kple ta, ŋutilã, kple nuwɔna ƒe ƒuƒoƒo le afɔti me.

<div klass = "modal ɣla fade" > 
  <div klass = "modal-tanya" > 
    <bɔt ƒomevi = "bɔt" klass = "tu" data-dismiss = "modal" aria-ɣla = "nyateƒe" > &ɣeyiɣiwo; </button> ƒe dzesi    
    <h3> Modal ƒe tanya </h3>
  </div> ƒe nyawo
  <div klass = "modal-ŋutilã" > 
    <p> Ŋutilã nyui ɖeka... </p>
  </div> ƒe nyawo
  <div klass = "modal-afɔdzideƒe" > 
    <a href = "#" klass = "btn" > Kpe </a>  
    <a href = "#" class = "btn btn-primary" > Dzra tɔtrɔwo ɖo </a>  
  </div> ƒe nyawo
</div> ƒe nyawo

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.

<!-- Abɔta si aʋã modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Dze wɔwɔfia ƒe nɔnɔme gɔme </a>    
 
<!-- Modal -->
<div id = "nyeModal" klass = "modal ɣla fade" tabindex = "-1" akpa = "nyatakaka" aria-labelledby = "nyeModalLabel" aria-ɣla = "nyateƒe" >      
  <div klass = "modal-tanya" > 
    <bɔt ƒomevi = "bɔt" klass = "tu" data-dismiss = "modal" aria-ɣla = "nyateƒe" > × </button>    
    <h3 id = "myModalLabel" > Mɔnu ƒe tanya </h3> 
  </div> ƒe nyawo
  <div klass = "modal-ŋutilã" > 
    <p> Ŋutilã nyui ɖeka... </p>
  </div> ƒe nyawo
  <div klass = "modal-afɔdzideƒe" > 
    <button class = "btn" data- dismiss = "modal" aria-ɣla = "nyateƒe" > Tu </button>   
    <button class = "btn btn-primary" > Dzra tɔtrɔwo ɖo </button> 
  </div> ƒe nyawo
</div> ƒe nyawo

Zãzã

To nyatakaka ƒe nɔnɔmewo dzi

Wɔ modal aɖe ŋudɔ JavaScript maŋlɔ o. Ðoe data-toggle="modal"ɖe dziɖunu ƒe akpa aɖe dzi, abe abɔta ene, kpakple data-target="#foo"alo href="#foo"be nàɖo taɖodzinu na modal aɖe koŋ be wòatrɔ.

<button type = "button" data-toggle = "modal" nyatakaka-taɖodzinu = "#myModal" > Dze modal </button> gɔme   

To JavaScript dzi

Yɔ modal si si id myModalle kple JavaScript ƒe fli ɖeka:

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

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

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.

$ ( '#nyeModal' ). modal ({ ) .
  keyboard : alakpa 
}) ƒe .

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

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

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

.modal('ɖee fia') .

Eʋua modal aɖe kple asi.

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

.modal('ɣla') .

Asi ɣlaa modal aɖe.

$ ( '#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.

$ ( '#nyeModal' ). on ( 'ɣla' , dɔwɔwɔ () { .   
  // wɔ nane...
}) ƒe .

Kpɔɖeŋuwo

Tsɔ nuɖuɖu siwo le tsia dzi kpe ɖe nusianu kloe ŋu kple kpeɖeŋutɔ bɔbɔe sia, siwo dometɔ aɖewoe nye navbar, tabs, kple pills.

Le navbar aɖe me

Le tabwo me

Zãzã

To nyatakaka ƒe nɔnɔmewo dzi

Tsɔe kpe data-toggle="dropdown"ɖe kadodo alo abɔta ŋu be nàtrɔ asi le nya aɖe ŋu.

<div klass = "nusiwo le tsia dzi" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Nusi wotsɔna tsia dzodzodzoetsitsi nu </a>   
  <ul klass = "dropdown-menu" akpa = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul> ƒe nyawo
</div> ƒe nyawo

Be URL-wo nanɔ anyi nyuie la, zã data-targetnɔnɔmea ɖe href="#".

<div klass = "nusiwo le tsia dzi" > 
  <a class = "ɖiɖi-ɖe-taɖodzinu" id = "dLabel" akpa = "button" nyatakaka-trɔtrɔ = "ɖiɖi" nyatakaka-taɖodzinu = "#" href = "/axa.html" >      
    Nusiwo wotsɔna ƒua gbe
    <b klass = "dzikpɔkpɔ" ></b> 
  </a>
  <ul klass = "dropdown-menu" akpa = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul> ƒe nyawo
</div> ƒe nyawo

To JavaScript dzi

Yɔ nusiwo le fli dzi la to JavaScript dzi:

$ ( '.dropdown-trɔtrɔ' ). si le fli dzi () .

Tiatiawɔblɔɖewo

Ɖeke o

Mɔnuwo

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

Programmatic api na toggling menus na navbar alo tabbed navigation si wona.

Kpɔɖeŋu le navbar me

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. Ʋu teƒe si le navbar la te eye nàkpɔ klass si le dɔ wɔm ƒe tɔtrɔ. Woade dzesi nu sue siwo le fli dzi la hã.

Zãzã

To nyatakaka ƒe nɔnɔmewo dzi

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) eye data-target=".navbar"nàtia nav si nàzã. Àdi be yeazã scrollspy kple .navakpa aɖe.

<ŋutilã ƒe nyatakaka-ŋkutsala = "ʋu" nyatakaka-taɖodzinu = ".navbar" > ... </body>  

To JavaScript dzi

Yɔ agbalẽxatsaxatsa la to JavaScript dzi:

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

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:

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

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-offset="".

Nudzɔdzɔwo

Kpɔɖeŋu tabwo

Tsɔ tab ƒe dɔwɔwɔ kabakaba, si trɔna kpe ɖe eŋu be nàtrɔ to nutoa me nyatakakawo ƒe akpawo dzi, to menu siwo le tsia dzi gɔ̃ hã dzi.

Zãzã

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

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

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

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

Dzesidede dzesiwo

Àte ŋu awɔ tab alo pill navigation ŋudɔ JavaScript aɖeke maŋ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ɔ.

<ul klass = "nav nav-tabs" > 
  <li><a href = "#aƒe" nyatakaka-trɔtrɔ = "tab" > Aƒe </a></li>  
  <li><a href = "#nyatakakadzraɖoƒe" data-toggle = "tab" > Nɔnɔmetata </a></li>  
  <li><a href = "#gbedasiwo" data-toggle = "tab" > Gbedasiwo </a></li>  
  <li><a href = "#ɖoɖowo" data-toggle = "tab" > Ðoɖowo </a></li>  
</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.

<ul klass = "nav nav-tabs" id = "nyeTab" >  
  <li klass = "dɔwɔwɔ" ><a href = "#aƒe" > Aƒe </a></li>  
  <li><a href = "#nyatakakadzraɖoƒe" > Nɔnɔmetata </a></li> 
  <li><a href = "#gbedasiwo" > Gbedasiwo </a></li> 
  <li><a href = "#ɖoɖowo" > Ðoɖowo </a></li> 
</ul> ƒe nyawo
 
<div klass = "tab-nyawo" > 
  <div klass = "tab-pane le dɔ wɔm" id = "aƒe" > ... </div>  
  <div klass = "tab-pane" id = "nɔnɔmetata" > ... </div>  
  <div klass = "tab-pane" id = "gbedasiwo" > ... </div>  
  <div klass = "tab-pane" id = "ɖoɖowo" > ... </div>  
</div> ƒe nyawo
 
<ŋɔŋlɔdzesi>
  $ ( dɔwɔwɔ () { .  
    $ ( '#nyeTab a:mlɔetɔ' ). tab ( 'ɖee fia' );
  }) ƒe .
</script> ƒe nyawo

Nudzɔdzɔwo

$ ( 'a [nyatakaka-trɔtrɔ="tab"]' ). on ( 'woɖee fia' , dɔwɔwɔ ( e ) { .   
  e . taɖodzinu // tab si wowɔ dɔ le
  e . relatedTarget // tab si do ŋgɔ
}) ƒe .

Kpɔɖeŋuwo

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.

Le dɔwɔwɔ ta la, dɔwɔnu ƒe aɖaŋuɖoɖo kple popover data-apis nye opt in, si fia be ele be wò ŋutɔ nàdze wo gɔme .

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

Mɔfiame ene

Dɔwɔnu ƒe aɖaŋuɖoɖowo le nyawo tsɔtsɔ de eme ƒe ƒuƒoƒowo me

Ne èle dɔwɔnu ƒe aɖaŋuɖoɖowo kple popovers zãm kple Bootstrap ƒe nyawo tsɔtsɔ de eme ƒe ƒuƒoƒoawo la, ahiã be nàɖo container(si woŋlɔ ɖe ete) ƒe tiatia be nàƒo asa na nugbegblẽ le ame ŋu siwo mèdi o.

Zãzã

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

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

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-animation="".

Dzesidede dzesiwo

<a href = "#" data-toggle = "dɔwɔnu ƒe aɖaŋuɖoɖo" title = "dɔwɔnu gbãtɔ ƒe aɖaŋuɖoɖo" > 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.

$ ( '#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.

$ ( '#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ɔ asi le element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo ŋu.

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

.dɔwɔnu ƒe dzesi('tsrɔ̃') .

Eɣlaa element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo eye wòtsrɔ̃nɛ.

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

Kpɔɖeŋuwo

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. Tsɔ asi ɖo abɔta la dzi be nàdze popover la gɔme. Ebia be woatsɔ Tooltip ade eme.

Popover si meʋãna o

Tiatia ene li: etame, ɖusime, ete, kple miame.

Womewɔ dzesi aɖeke si woɖe fia abe popovers ene tso JavaScript kple emenyawo me le datanɔnɔme aɖe me o.

Live demo ƒe wɔwɔfia

Mɔfiame ene

Zãzã

Na popovers nawɔ dɔ to JavaScript dzi:

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

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-animation="".

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.

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

.popover('ɣla') .

Ɣla elementwo ƒe popover aɖe.

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

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

Trɔ asi le elements popover ŋu.

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

.popover('tsrɔ̃ nu') .

Eɣlaa element aɖe ƒe popover eye wòtsrɔ̃nɛ.

$ ( '#nu vevi aɖe' ). popover ( 'tsrɔ̃ nu' ) .

Kpɔɖeŋu nuxlɔ̃amewo

Tsɔ dismiss dɔwɔwɔ kpe ɖe nuxlɔ̃ame gbedasiwo katã ŋu kple plugin sia.

Zãzã

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

$ ( ".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.

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

$ ( ".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.

$ ( '#nye-nuxlɔ̃ame' ). bind ( 'tu' , dɔwɔwɔ () { .   
  // wɔ nane...
}) ƒe .

Kpɔɖeŋuwo zazã

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.

Dukɔmevinyenye ƒe nuwɔna

Tsɔ kpe ɖe eŋu data-loading-text="Loading..."be nàzã agbatsɔtsɔ ƒe nɔnɔme le abɔta aɖe dzi.

<button type = "button" class = "btn btn-primary" data-loading-text = "Ele agba me..." > Nɔnɔme si le agba me </button>   

Toggle ɖeka ƒe tɔtrɔ

Tsɔ kpe ɖe eŋu data-toggle="button"be nàwɔ tɔtrɔ le abɔta ɖeka dzi ŋudɔ.

<button type = "button" class = "btn btn-primary" data-toggle = "bɔt" > Trɔtrɔ Ðeka </button>   

Dzesiwo ƒe Aɖaka

Tsɔe kpe ɖe eŋu data-toggle="buttons-checkbox"na dzesideɖaka ƒe atsyã ƒe tɔtrɔ le btn-group dzi.

<div klass = "btn-ƒuƒoƒo" nyatakaka-trɔtrɔ = "bɔtwo-dzesiwo ƒe aɖaka" >  
  <bɔt ƒomevi = "bɔt" klass = "btn btn-gbãtɔ" > Miame </bɔt>  
  <bɔt ƒomevi = "bɔt" klass = "btn btn-gbãtɔ" > Titina </bɔt>  
  <bɔt ƒomevi = "bɔt" klass = "btn btn-gbãtɔ" > Nuɖusi </bɔt>  
</div> ƒe nyawo

Radio dzi

Tsɔe kpe ɖe eŋu data-toggle="buttons-radio"na radio ƒe atsyã ƒe tɔtrɔ le btn-group dzi.

<div klass = "btn-ƒuƒoƒo" nyatakaka-trɔtrɔ = "bɔtwo-radio" >  
  <bɔt ƒomevi = "bɔt" klass = "btn btn-gbãtɔ" > Miame </bɔt>  
  <bɔt ƒomevi = "bɔt" klass = "btn btn-gbãtɔ" > Titina </bɔt>  
  <bɔt ƒomevi = "bɔt" klass = "btn btn-gbãtɔ" > Nuɖusi </bɔt>  
</div> ƒe nyawo

Zãzã

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

$ ( '.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.

Tiatiawɔblɔɖewo

Ɖeke o

Mɔnuwo

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

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

<bɔt ƒomevi = "bɔt" klass = "btn" nyatakaka-trɔ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.

<button type = "button" class = "btn" data-loading-text = "nu siwo le agba me..." > ... </button>    

$ ().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.

<button type = "button" class = "btn" nyatakaka-wu-nuŋɔŋlɔ = "wowu enu!" > ... </a dzesi>    
<ŋɔŋlɔdzesi>
  $ ( '.btn' ). button ( 'wu enu' ) .
</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.

* 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:

<div klass = "akɔdion" id = "akɔdin2" >  
  <div klass = "accordion-ƒuƒoƒo" > 
    <div klass = "accordion-tanya" > 
      <a klass = "accordion-toggle" data-toggle = "akɔ" nyatakaka-dzila = "#akɔdin2" href = "#akɔ ɖeka" >    
        Ƒuƒoƒo ƒe Nu #1 si Woate Ŋu Agbã
      </a>
    </div> ƒe nyawo
    <div id = "collapseOne" class = "accordion-ŋutilã ƒe gbagbã le" >  
      <div klass = "accordion-ememetɔ" > 
        Anim pariatur ƒe nyagbɔgblɔ...
      </div> ƒe nyawo
    </div> ƒe nyawo
  </div> ƒe nyawo
  <div klass = "accordion-ƒuƒoƒo" > 
    <div klass = "accordion-tanya" > 
      <a class = "accordion-toggle" data-toggle = "akɔ" nyatakaka-dzila = "#akɔdin2" href = "#akɔ Eve" >    
        Ƒuƒoƒo ƒe Nu #2 si Woate Ŋu Agbã
      </a>
    </div> ƒe nyawo
    <div id = "collapseTwo" klass = "akɔrdion-ŋutilã ƒe gbagbã" >  
      <div klass = "accordion-ememetɔ" > 
        Anim pariatur ƒe nyagbɔgblɔ...
      </div> ƒe nyawo
    </div> ƒe nyawo
  </div> ƒe nyawo
</div> ƒe nyawo
...

Àte ŋu azã plugin la hã accordion ƒe dzesi manɔmee. Na abɔta aɖe natrɔ nu bubu ƒe kekeɖenu kple eƒe gbagbã.

<bɔt ƒomevi = "bɔt" klass = "btn btn-afɔku" nyatakaka-trɔtrɔ = "mumu" nyatakaka-taɖodzinu = "#demo" >    
  bɔbɔe si woate ŋu agbã
</button> ƒe dzesi
 
<div id = "demo" klass = "gbã le" > ... </div>  

Zãzã

To nyatakaka ƒe nɔnɔmewo dzi

Ð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.

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.

To JavaScript dzi

Na wòawɔ dɔ kple asi kple:

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

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-parent="".

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.

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

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

$ ( '#nye si woate ŋu aƒo ƒu' ). on ( 'ɣla' , dɔwɔwɔ () { .   
  // wɔ nane...
}) ƒe .

Kpɔɖeŋu carousel

Slideshow si le ete la fia generic plugin kple component na kekeli to elementwo abe carousel ene me.

Gbãtɔ ƒe Nɔnɔmetata Suewo ƒe dzeside

Cras justo odio, dapibus ac facilisis le, egestas eget quam. Donec id elit non mi porta gravida le eget metus me. Nullam id dolor id nibh ultricies ʋuwo ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ . › .

<div id = "nyeCarousel" klass = "carousel ƒe ʋuʋudedi" >  
  <ol klass = "carousel-fianuwo" > 
    <li nyatakaka-taɖodzinu = "#myCarousel" nyatakaka-slide-to = "0" klass = "dɔwɔwɔ" ></li>   
    <li nyatakaka-taɖodzinu = "#myCarousel" nyatakaka-slide-yi = "1" ></li>  
    <li nyatakaka-taɖodzinu = "#myCarousel" nyatakaka-slide-yi = "2" ></li>  
  </ol>
  <!-- Carousel nuawo -->
  <div klass = "carousel-ememetɔ" > 
    <div klass = "nu si le dɔ wɔm" > ... </div> 
    <div klass = "nu" > ... </div> 
    <div klass = "nu" > ... </div> 
  </div> ƒe nyawo
  <!-- Ʋuʋudedi nav -->
  <a klass = "carousel-dziɖuɖu miame" href = "#nyeCarousel" data-slide = "do ŋgɔ" > ‹ </a>   
  <a klass = "carousel-dziɖuɖu ƒe gomenɔamesi" href = "#nyeCarousel" data-slide = "si kplɔe ɖo" > › </a>   
</div> ƒe nyawo

Zãzã

To nyatakaka ƒe nɔnɔmewo dzi

Zã data attributes nàtsɔ akpɔ carousel la ƒe nɔƒe dzi bɔbɔe. data-slidexɔa nya veviawo prevalo next, si trɔa slide ƒe nɔƒe ne wotsɔe sɔ kple eƒe nɔƒe fifia. Alo, zãe data-slide-totsɔ to slide index ƒuƒlu aɖe yi carousel data-slide-to="2"la gbɔ , si ti kpo nye slide ƒe nɔƒe yi index aɖe koŋ si dze egɔme kple 0.

To JavaScript dzi

Yɔ carousel kple asi kple:

$ ( '.ʋuʋudedi' ). carousel ƒe ʋuƒo () .

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScriptz dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-interval="".

Mɔnuwo

.carousel(tiatiawɔnuwo) .

Edzea carousel la gɔme kple tiatia siwo woate ŋu atia objecteye wòdzea gasɔdodo gɔme to nuawo me.

$ ( '.ʋuʋudedi' ). carousel ƒe ʋuƒo ({ .
  dometsotso : 2000 
}) ƒe .

.carousel('ɣeyiɣi ƒe tsatsam') .

Tsitsatsa to carousel-nuawo me tso miame yi ɖusime.

.carousel('tɔ vie') .

Exea mɔ na carousel la be wòagazɔ to nuwo me o.

.carousel(xexlẽdzesi) .

Trɔ carousel la ɖe frame aɖe koŋ dzi (0 si wotu ɖe edzi, si sɔ kple array).

.carousel('do ŋgɔ') .

Tsitre ɖe nusi do ŋgɔ ŋu.

.carousel('si kplɔe ɖo') .

Tsitre ɖe nu si kplɔe ɖo ŋu.

Nudzɔdzɔwo

Bootstrap ƒe carousel klass ɖea nudzɔdzɔ eve ɖe go na hooking ɖe carousel dɔwɔwɔ me.

Kpɔɖeŋu

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.

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

Àdi be yeaɖoe autocomplete="off"be yeaxe mɔ na web-browser ƒe nuɖuɖu siwo woɖo ɖi la be woagadze le Bootstrap typeahead ƒe fli dzi o.

Zãzã

To nyatakaka ƒe nɔnɔmewo dzi

Tsɔ nyatakaka ƒe nɔnɔmewo kpee be nàŋlɔ element aɖe si me typeahead ƒe dɔwɔwɔ le abe alesi woɖee fia le kpɔɖeŋu si le etame me ene.

To JavaScript dzi

Yɔ typeahead la kple asi kple:

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

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-source="".

Mɔnuwo

.typeahead(tiatiawɔnuwo) .

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

Kpɔɖeŋu

Subnavigation si le miame la nye affix plugin la ƒe live demo.

Zãzã

To nyatakaka ƒe nɔnɔmewo dzi

Be nàtsɔ affix behavior akpe ɖe element ɖesiaɖe ŋu bɔbɔe la, ɖeko nàtsɔe akpe data-spy="affix"ɖe element si nèdi be yeatsa ŋku ŋu. Emegbe zã offsets nàtsɔ aɖe ɣeyiɣi si nàtrɔ asi le element aɖe ƒe pinning ŋu kple esi nàtsi la gɔme.

<div nyatakaka-ŋkutsala = "affix" nyatakaka-offset-ta = "200" > ... </div>  

To JavaScript dzi

Yɔ affix plugin la to JavaScript dzi:

$ ( '#navbar' ). affix () ƒe akpa aɖe.

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-offset-top="200".