Yndividueel of gearstald

Plugins kinne yndividueel opnommen wurde (hoewol guon hawwe fereaske ôfhinklikens), of alles yn ien kear. Sawol bootstrap.js en bootstrap.min.js befetsje alle plugins yn ien triem.

Data attributen

Jo kinne alle Bootstrap-plugins suver brûke fia de markup API sûnder in inkele line fan JavaScript te skriuwen. Dit is Bootstrap's earste klasse API en soe jo earste konsideraasje wêze moatte by it brûken fan in plugin.

Dat sei, yn guon situaasjes kin it winsklik wêze om dizze funksjonaliteit út te skeakeljen. Dêrom jouwe wy ek de mooglikheid om it data-attribút API út te skeakeljen troch alle eveneminten op it lichem te ûntbinen mei ''data-api'`. Dit sjocht der sa út:

$ ( 'body' ). út ( '.data-api' )

As alternatyf, om in spesifyk plugin te rjochtsjen, befetsje gewoan de namme fan 'e plugin as in nammeromte tegearre mei de data-api nammeromte sa:

$ ( 'body' ). út ( '.alert.data-api' )

Programmatyske API

Wy leauwe ek dat jo alle Bootstrap-plugins suver moatte kinne brûke fia de JavaScript API. Alle iepenbiere APIs binne single, chainable metoaden, en werom de kolleksje hannele op.

$ ( ".btn.danger" ). knop ( "wikselje" ). addClass ( "fet" )

Alle metoaden moatte in opsjoneel opsjeobjekt akseptearje, in tekenrige dy't in bepaalde metoade rjochtet, of neat (wat in plugin inisjearret mei standertgedrach):

$ ( "#myModal" ). modal () // inisjalisearre mei standerts                       
$ ( "#myModal" ). modal ({ toetseboerd : false }) // inisjalisearre sûnder toetseboerd     
$ ( "#myModal" ). modal ( 'show' ) // inisjalisearret en ropt show fuortendaliks op                

Elke plugin bleatstelt ek syn rauwe konstruktor op in 'Constructor'-eigenskip: $.fn.popover.Constructor. As jo ​​​​in bepaalde plugin-eksimplaar wolle krije, helje it dan direkt fan in elemint op: $('[rel=popover]').data('popover').

Gjin konflikt

Soms is it nedich om Bootstrap-plugins te brûken mei oare UI-kaders. Yn dizze omstannichheden kinne nammeromte botsingen soms foarkomme. As dit bart, kinne jo .noConflictde plugin oanroppe wêrfan jo de wearde weromsette wolle.

var bootstrapButton = $ . fn . knop . noConflict () // werom $.fn.button nei earder tawiisd wearde 
$ . fn . bootstrapBtn = bootstrapButton             // jou $().bootstrapBtn de bootstrap-funksjonaliteit

Eveneminten

Bootstrap leveret oanpaste eveneminten foar de measte unike aksjes fan plugin. Yn 't algemien komme dizze yn in ynfinityf- en dieltiidsfoarm - wêrby't de ynfinityf (bgl. show) oan it begjin fan in barren wurdt aktivearre, en de doetiidsfoarm (bgl. shown) wurdt aktivearre by it foltôgjen fan in aksje.

Alle infinitive eveneminten jouwe preventDefault funksjonaliteit. Dit jout de mooglikheid om de útfiering fan in aksje te stopjen foardat it begjint.

$ ( '#myModal' ). on ( 'show' , funksje ( e ) {   
    as (! gegevens ) weromkomme e . preventDefault () // stopet modaal te sjen   
})

Oer transysjes

Foar ienfâldige oergongseffekten, befetsje bootstrap-transition.js ien kear neist de oare JS-bestannen. As jo ​​​​de kompilearre (of minifisearre) bootstrap.js brûke , is it net nedich om dit op te nimmen - it is der al.

Brûk gefallen

In pear foarbylden fan 'e oergongsplugin:

• Sliding of fading yn modalen
• Fading út ljeppers
• Fading out warskôgings
• Sliding carrousel ruten

Foarbylden

Modalen binne streamlined, mar fleksibel, dialoochprompts mei de minimale fereaske funksjonaliteit en tûke standerts.

Statyske foarbyld

In werjûn modaal mei koptekst, lichem en set aksjes yn 'e fuottekst.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "slute" data-dismiss = "modaal" aria-hidden = "wier" > × </knop>    
    <h3> Modale koptekst </h3>
  </div>
  <div class = "modal-body" > 
    <p> Ien moai lichem... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Slute </a>  
    <a href = "#" class = "btn btn-primary" > Bewarje wizigingen </a>  
  </div>
</div>

Live demo

Skeakelje in modaal fia JavaScript troch op de knop hjirûnder te klikken. It sil nei ûnderen glide en ferdwine fan 'e boppekant fan' e side.

<!-- Knop om modaal te triggeren -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Launch demo modal </a>    
 
<!-- Modaal -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialooch" aria-labelledby = "myModalLabel" aria-hidden = "wier" >      
  <div class = "modal-header" > 
    <button type = "button" class = "slute" data-dismiss = "modaal" aria-hidden = "wier" > × </button>    
    <h3 id = "myModalLabel" > Modale koptekst </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Ien moai lichem... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modaal" aria-hidden = "wier" > Slute </button>   
    <button class = "btn btn-primary" > Bewarje wizigingen </button> 
  </div>
</div>

Gebrûk

Fia data attributen

Aktivearje in modaal sûnder JavaScript te skriuwen. Set data-toggle="modal"op in controller-elemint, lykas in knop, tegearre mei in data-target="#foo"of href="#foo"om in spesifike modaal te rjochtsjen om te wikseljen.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Modaal starte </button>   

Fia JavaScript

Rop in modaal mei id myModalmei ien line fan JavaScript:

$ ( '#myModal' ). modaal ( opsjes )

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-backdrop="".

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

Metoaden

.modal(opsjes)

Aktivearret jo ynhâld as modaal. Akseptearret in opsjonele opsjes object.

$ ( '#myModal' ). modal ({
  toetseboerd : falsk 
})

.modal('toggle')

Wizigje manuell in modaal.

$ ( '#myModal' ). modaal ( 'wikselje' )

.modal('show')

Iepenet in modaal mei de hân.

$ ( '#myModal' ). modaal ( 'show' )

.modal('ferbergje')

Ferberget in modaal mei de hân.

$ ( '#myModal' ). modaal ( 'ferbergje' )

Eveneminten

De modale klasse fan Bootstrap bleatstelt in pear eveneminten foar heakjen oan modale funksjonaliteit.

$ ( '#myModal' ). on ( 'ferburgen' , funksje () {   
  // wat dwaan…
})

Foarbylden

Foegje dropdown-menu's ta oan hast alles mei dizze ienfâldige plugin, ynklusyf de navbar, ljeppers en pillen.

Binnen in navigaasjebalke

Binnen ljeppers

Gebrûk

Fia data attributen

Taheakje data-toggle="dropdown"oan in keppeling of knop om in dropdown te wikseljen.

<div class = "dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Dropdown-trigger </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Om URL's yntakt te hâlden, brûk it data-targetattribút ynstee fan href="#".

<div class = "dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html"> _      
    Dropdown
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Fia JavaScript

Rop de dropdowns fia JavaScript:

$ ( '.dropdown-toggle' ). dropdown ()

Opsjes

Gjin

Metoaden

$().dropdown('toggle')

In programmatyske api foar it wikseljen fan menu's foar in opjûne navigaasjebalke of navigaasje mei ljeppers.

Foarbyld yn navbar

De ScrollSpy-plugin is foar it automatysk bywurkjen fan nav-doelen basearre op scrollposysje. Rôlje it gebiet ûnder de navigaasjebalke en besjoch de aktive klasse feroarje. De dellûk-subitems sille ek markearre wurde.

Gebrûk

Fia data attributen

Om maklik scrollspy-gedrach ta te foegjen oan jo topbalke-navigaasje, foegje gewoan ta data-spy="scroll"oan it elemint wêrop jo wolle bispiede (meast typysk soe dit it lichem wêze) en data-target=".navbar"selektearje hokker nav te brûken. Jo wolle scrollspy brûke mei in .navkomponint.

<body data-spy = "scroll" data-target = ".navbar" > ... </body>  

Fia JavaScript

Rop de scrollspy fia JavaScript:

$ ( '#navbar' ). scrollspy ()

Metoaden

.scrollspy('ferfarskje')

By it brûken fan scrollspy yn kombinaasje mei it tafoegjen of ferwiderjen fan eleminten út 'e DOM, moatte jo de ferfarskingsmetoade sa neame:

$ ( '[data-spy="scroll"]' ). each ( funksje () {  
  var $spy = $ ( dizze ). scrollspy ( 'ferfarskje' )
});

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-offset="".

Eveneminten

Foarbyld ljeppers

Foegje rappe, dynamyske ljepperfunksjes ta oan oergong troch ruten fan lokale ynhâld, sels fia dellûkmenu's.

Gebrûk

Ljepblêden ynskeakelje fia JavaScript (elke ljepper moat yndividueel aktivearre wurde):

$ ( '#myTab a' ). klik ( funksje ( e ) {  
  e . foarkommeDefault ();
  $ ( dizze ). tab ( 'show' );
})

Jo kinne yndividuele ljeppers op ferskate manieren aktivearje:

$ ( '#myTab a[href="#profyl"]' ). tab ( 'show' ); // Selektearje ljepper by namme 
$ ( '#myTab a:first' ). tab ( 'show' ); // Selektearje earste ljepper 
$ ( '#myTab a:last' ). tab ( 'show' ); // Selektearje lêste ljepper 
$ ( '#myTab li:eq(2) a' ). tab ( 'show' ); // Selektearje tredde ljepper (0-yndeksearre) 

Markup

Jo kinne in ljepper of pilnavigaasje aktivearje sûnder JavaScript te skriuwen troch gewoan op te jaan data-toggle="tab"of data-toggle="pill"op in elemint. It tafoegjen fan de klassen naven oan it ljepblêd sil de styling fan it ljepblêd Bootstrap tapasse.nav-tabsul

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Thús </a></li>  
  <li><a href = "#profile" data-toggle = "tab"> Profyl </a> </li>  
  <li><a href = "#messages" data-toggle = "tab"> Berjochten </a> </li>  
  <li><a href = "#settings" data-toggle = "tab"> Ynstellings </a> </li>  
</ul>

Metoaden

$().tab

Aktivearret in ljepper elemint en ynhâld container. De ljepper moat in data-targetof in hrefrjochte op in kontenerknooppunt hawwe yn 'e DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "aktyf" ><a href = "#home"> Thús </a> </li>  
  <li><a href = "#profile" > Profyl </a></li> 
  <li><a href = "#messages" > Berjochten </a></li> 
  <li><a href = "#settings" > Ynstellings </a></li> 
</ul>
 
<div class = "tab-ynhâld" > 
  <div class = "tab-pane active" id = "thús" > ... </div>  
  <div class = "tab-pane" id = "profyl" > ... </div>  
  <div class = "tab-pane" id = "berjochten" > ... </div>  
  <div class = "tab-pane" id = "ynstellings" > ... </div>  
</div>
 
<skript>
  $ ( funksje () {  
    $ ( '#myTab a:last' ). tab ( 'show' );
  })
</skript>

Eveneminten

$ ( 'a[data-toggle="tab"]' ). on ( 'sjoen' , funksje ( e ) {   
  e . target // aktivearre ljepper
  e . relatedTarget // foarige ljepper
})

Foarbylden

Ynspirearre troch de treflike jQuery.tipsy plugin skreaun troch Jason Frame; Tooltips binne in bywurke ferzje, dy't net fertrouwe op ôfbyldings, CSS3 brûke foar animaasjes, en data-attributen foar lokale titelopslach.

Om prestaasjesredenen binne de tooltip en popover-data-apis oanmeld, wat betsjut dat jo se sels moatte inisjalisearje .

Hover oer de keppelings hjirûnder om tooltips te sjen:

Fjouwer rjochtingen

Tooltips yn ynfiergroepen

By it brûken fan tooltips en popovers mei de Bootstrap-ynputgroepen, moatte jo de containeropsje (dokumintearre hjirûnder) ynstelle om unwanted by-effekten te foarkommen.

Gebrûk

Trigger de tooltip fia JavaScript:

$ ( '#foarbyld' ). tooltip ( opsjes )

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-animation="".

Markup

<a href = "#" data-toggle = "tooltip" title = "earste tooltip"> hâld de mûs oer my </a>   

Metoaden

$().tooltip(opsjes)

Hechtet in tooltip handler oan in elemint kolleksje.

.tooltip('show')

Bliuwt de tooltip fan in elemint.

$ ( '#element' ). tooltip ( 'show' )

.tooltip('ferbergje')

Ferberget de tooltip fan in elemint.

$ ( '#element' ). tooltip ( 'ferbergje' )

.tooltip('toggle')

Skeakelt de tooltip fan in elemint.

$ ( '#element' ). tooltip ( 'wikselje' )

.tooltip('destroy')

Ferberget en ferneatiget de tooltip fan in elemint.

$ ( '#element' ). tooltip ( 'destroy' )

Foarbylden

Foegje lytse overlays fan ynhâld ta, lykas dy op 'e iPad, oan elk elemint foar húsfesting fan sekundêre ynformaasje. Hoverje oer de knop om de popover te aktivearjen. Fereasket Tooltip om te wêzen opnommen.

Statyske popover

Fjouwer opsjes binne beskikber: boppe, rjochts, ûnder, en lofts ôfstimd.

Gjin markup werjûn as popovers wurde generearre út JavaScript en ynhâld binnen in dataattribút.

Live demo

Fjouwer rjochtingen

Gebrûk

Popovers ynskeakelje fia JavaScript:

$ ( '#foarbyld' ). popover ( opsjes )

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-animation="".

Markup

Om prestaasjesredenen binne de Tooltip en Popover data-apis oanmelden. As jo ​​se brûke wolle, spesifisearje gewoan in selektoropsje.

Metoaden

$().popover(opsjes)

Inisjalisearje popovers foar in elemint kolleksje.

.popover('show')

Bliuwt in popover fan eleminten.

$ ( '#element' ). popover ( 'show' )

.popover('ferbergje')

Ferberget in eleminten popover.

$ ( '#element' ). popover ( 'ferbergje' )

.popover('toggle')

Skeakelt in popover fan eleminten.

$ ( '#element' ). popover ( 'wikselje' )

.popover('destroy')

Ferberget en ferneatiget popover fan in elemint.

$ ( '#element' ). popover ( 'ferniele' )

Foarbyld alerts

Foegje ûntslachfunksjonaliteit ta oan alle warskôgingsberjochten mei dizze plugin.

Gebrûk

It ûntslaan fan in warskôging fia JavaScript ynskeakelje:

$ ( ".alert" ). warskôgje ()

Markup

Foegje gewoan ta data-dismiss="alert"oan jo slute knop om automatysk in warskôging slute funksjonaliteit te jaan.

<a class = "close" data-dismiss = "alert" href = "#"> & times; </a>   

Metoaden

$().alert()

Wraps alle warskôgings mei nauwe funksjonaliteit. Om jo warskôgings te animearjen as se sluten binne, soargje derfoar dat se de .fadeen .inklasse al op har tapast hawwe.

.alert('slute')

Slút in warskôging.

$ ( ".alert" ). warskôging ( 'slute' )

Eveneminten

Bootstrap's warskôgingsklasse bleatstelt in pear eveneminten foar heakjen oan warskôgingsfunksjonaliteit.

$ ( '#myn-alert' ). binde ( 'sluten' , funksje () {   
  // wat dwaan…
})

Foarbyld gebrûk

Doch mear mei knoppen. Kontrolearje knop steaten of meitsje groepen fan knoppen foar mear komponinten lykas arkbalken.

Stateful

Taheakje data-loading-text="Loading..."om in laden steat te brûken op in knop.

<button type = "button" class = "btn btn-primary" data-loading-text = "Laden..." > Laadstatus </button>   

Single skeakel

Foegje data-toggle="button"ta om wikseljen op ien knop te aktivearjen.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Single Toggle </button>   

Checkbox

Foegje ta data-toggle="buttons-checkbox"foar wikseljen fan karfakjestyl op btn-groep.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Lofts </button>  
  <button type = "button" class = "btn btn-primary" > Middel </button>  
  <button type = "button" class = "btn btn-primary" > Rjochts </button>  
</div>

Radio

Taheakje data-toggle="buttons-radio"foar wikseljen fan radiostyl op btn-groep.

<div class = "btn-group" data-toggle = "knoppen-radio" >  
  <button type = "button" class = "btn btn-primary" > Lofts </button>  
  <button type = "button" class = "btn btn-primary" > Middel </button>  
  <button type = "button" class = "btn btn-primary" > Rjochts </button>  
</div>

Gebrûk

Knoppen ynskeakelje fia JavaScript:

$ ( '.nav-tabs' ). knop ()

Markup

Data attributen binne yntegraal mei de knop plugin. Besjoch de foarbyldkoade hjirûnder foar de ferskate markuptypen.

Opsjes

Gjin

Metoaden

$().button('toggle')

Wizigje push-status. Jout de knop it uterlik dat it is aktivearre.

<button type = "button" class = "btn" data-toggle = "knop" > … </button>    

$().button('laden')

Stelt knopstatus yn op laden - skeakelet knop út en wikselet tekst om tekst te laden. It laden fan tekst moat definieare wurde op it knopelemint mei it data-attribút data-loading-text.

<button type = "button" class = "btn" data-loading-text = "laden dingen..." > ... </button>    

$().button('reset')

Reset knopstatus - wikselt tekst nei orizjinele tekst.

$().button(string)

Reset knop tastân - wikselt tekst nei alle gegevens definiearre tekst steat.

<button type = "button" class = "btn" data-complete-text = "klear!" > ... </knop>    
<skript>
  $ ( '.btn' ). knop ( 'folslein' )
</skript>

Oer

Krij basisstilen en fleksibele stipe foar ynklapbere komponinten lykas akkordeons en navigaasje.

* Fereasket dat de Transitions-plugin wurdt opnommen.

Foarbyld fan akkordeon

Mei it ynstoarten plugin hawwe wy in ienfâldige widget foar akkordeonstyl boud:

<div class = "akkordeon" id = "akkordeon2" >  
  <div class = "akkordeon-groep" > 
    <div class = "akkordeon-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Ynklapbere groep item #1
      </a>
    </div>
    <div id = "collapseOne" class = "akkordeon-lichem ynstoarten" >  
      <div class = "accordeon-inner" > 
        Anim pariatur cliche ...
      </div>
    </div>
  </div>
  <div class = "akkordeon-groep" > 
    <div class = "akkordeon-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo"> _    
        Ynklapbere groep item #2
      </a>
    </div>
    <div id = "collapseTwo" class = "akkordeon-lichem ynstoarten" >  
      <div class = "accordeon-inner" > 
        Anim pariatur cliche ...
      </div>
    </div>
  </div>
</div>
...

Jo kinne de plugin ek brûke sûnder de akkordeonmarkearring. Meitsje in knop wikselje it útwreidzjen en ynstoarten fan in oar elemint.

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  ienfâldich ynklapber
</knop>
 
<div id = "demo" class = "ynstoarten" > … </div>  

Gebrûk

Fia data attributen

Foegje gewoan data-toggle="collapse"en in data-targetoan elemint ta om automatysk kontrôle fan in ynklapber elemint ta te jaan. It data-targetattribút akseptearret in css-selektor om de ynstoarting oan te passen. Wês wis dat jo de klasse tafoegje collapseoan it ynklapbere elemint. As jo ​​​​wolle dat it standert iepen is, foegje dan de ekstra klasse ta in.

Om akkordeon-like groepbehear ta te foegjen oan in ynklapbere kontrôle, foegje it data-attribút ta data-parent="#selector". Ferwize nei de demo om dit yn aksje te sjen.

Fia JavaScript

Ynskeakelje manuell mei:

$ ( ".collapse" ). ynstoarten ()

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-parent="".

Metoaden

.collapse(opsjes)

Aktivearret jo ynhâld as in ynklapber elemint. Akseptearret in opsjonele opsjes object.

$ ( '#myCollapsible' ). ynstoarten ({
  wikselje : falsk 
})

.collapse('toggle')

Skeakelt in ynklapber elemint nei werjûn of ferburgen.

.collapse('show')

Toant in ynklapber elemint.

.collapse('ferbergje')

Ferberget in ynklapber elemint.

Eveneminten

De ynstoartingsklasse fan Bootstrap bleatstelt in pear eveneminten foar heakjen oan ynstoartingsfunksjonaliteit.

$ ( '#myCollapsible' ). on ( 'ferburgen' , funksje () {   
  // wat dwaan…
})

Foarbyld fan carousel

De diashow hjirûnder lit in generike plugin en komponint sjen foar it fytsen troch eleminten lykas in karrousel.

Earste miniatuerlabel

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.

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 = "myCarousel" class = "carousel slide" >  
  <ol class = "carrousel-yndikatoaren" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "aktyf" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Carousel items -->
  <div class = "carousel-inner" > 
    <div class = "aktyf item" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "foarige"> & lsaquo ; </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "folgjende"> & rsaquo ; </a>   
</div>

Gebrûk

Fia data attributen

Brûk gegevensattributen om de posysje fan 'e karrousel maklik te kontrolearjen. data-slideakseptearret de kaaiwurden prevof next, dy't de slideposysje feroaret relatyf oan syn hjoeddeistige posysje. As alternatyf, brûk data-slide-toom in rûge dia-yndeks troch te jaan oan 'e karrousel data-slide-to="2", dy't de slideposysje springt nei in bepaalde yndeks dy't begjint mei 0.

Fia JavaScript

Rop karrousel manuell mei:

$ ( '.carousel' ). karrousel ()

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScriptz. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-interval="".

Metoaden

.carousel(opsjes)

Inisjalisearret de karrousel mei in opsjonele opsjes objecten begjint te fytsen troch items.

$ ( '.carousel' ). karrousel ({
  ynterval : 2000 
})

.carousel('syklus')

Cycles troch de karrousel items fan links nei rjochts.

.carousel('pauze')

Stopt de karrousel fan it fytsen troch items.

.carousel(nûmer)

Sylt de karrousel nei in bepaald frame (0 basearre, fergelykber mei in array).

.carousel('foarige')

Cycles nei it foarige item.

.carousel('folgjende')

Cycles nei it folgjende item.

Eveneminten

De karrouselklasse fan Bootstrap bleatstelt twa eveneminten foar heakjen oan karrouselfunksjonaliteit.

Foarbyld

In basis, maklik útwreide plugin foar it fluch meitsjen fan elegante typeaheads mei elke foarm fan tekstynfier.

<input type = "text" data-provide = "typeahead" >  

Jo wolle ynstelle autocomplete="off"om foar te kommen dat standert browsermenu's ferskine oer de Bootstrap typeahead dropdown.

Gebrûk

Fia data attributen

Foegje gegevensattributen ta om in elemint te registrearjen mei typeahead-funksjonaliteit lykas werjûn yn it foarbyld hjirboppe.

Fia JavaScript

Rop de typeahead manuell mei:

$ ( '.typeahead' ). typeahead ()

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-source="".

Metoaden

.typeahead(opsjes)

Inisjalisearret in ynfier mei in typeahead.

Foarbyld

De subnavigaasje oan de linkerkant is in live demo fan it affix-plugin.

Gebrûk

Fia data attributen

Om maklik affixgedrach ta te foegjen oan elk elemint, foegje gewoan ta data-spy="affix"oan it elemint wêrop jo wolle bispiede. Brûk dan offsets om te definiearjen wannear't it pinjen fan in elemint oan- en útskeakelje moat.

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

Fia JavaScript

Rop de affix-plugin fia JavaScript:

$ ( '#navbar' ). befestigje ()

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-offset-top="200".