Posamezno ali sestavljeno

Vtičnike je mogoče vključiti posamezno (čeprav imajo nekateri zahtevane odvisnosti) ali vse naenkrat. Tako bootstrap.js kot bootstrap.min.js vsebujeta vse vtičnike v eni datoteki.

Atributi podatkov

Vse vtičnike Bootstrap lahko uporabljate izključno prek API-ja za označevanje, ne da bi napisali eno vrstico JavaScripta. To je Bootstrapov API prvega razreda in bi ga morali najprej upoštevati pri uporabi vtičnika.

Kljub temu je v nekaterih situacijah morda zaželeno, da to funkcijo izklopite. Zato nudimo tudi možnost, da onemogočite API podatkovnega atributa tako, da razvežete vse dogodke v imenskem prostoru telesa z `'data-api'`. To izgleda takole:

$ ( 'telo' ). izklopljen ( '.data-api' )

Druga možnost je, da ciljate na določen vtičnik, samo vključite ime vtičnika kot imenski prostor skupaj z imenskim prostorom data-api, kot je ta:

$ ( 'telo' ). izklopljen ( '.alert.data-api' )

Programski API

Prav tako verjamemo, da bi morali imeti možnost uporabljati vse vtičnike Bootstrap zgolj prek JavaScript API-ja. Vsi javni API-ji so enojne metode, ki jih je mogoče verižiti, in vrnejo zbirko, po kateri je ukrepal.

$ ( ".btn.nevarnost" ). gumb ( "preklop" ). addClass ( "debel" )

Vse metode bi morale sprejeti izbirni predmet možnosti, niz, ki cilja na določeno metodo, ali nič (kar sproži vtičnik s privzetim vedenjem):

$ ( "#myModal" ). modal () // inicializiran s privzetimi vrednostmi                       
$ ( "#myModal" ). modal ({ keyboard : false }) // inicializirano brez tipkovnice     
$ ( "#myModal" ). modal ( 'show' ) // inicializira in takoj prikliče show                

Vsak vtičnik izpostavi tudi svoj neobdelani konstruktor v lastnosti `Konstruktor`: $.fn.popover.Constructor. Če želite dobiti določen primerek vtičnika, ga pridobite neposredno iz elementa: $('[rel=popover]').data('popover').

Brez konflikta

Včasih je treba uporabiti vtičnike Bootstrap z drugimi okviri uporabniškega vmesnika. V teh okoliščinah lahko občasno pride do kolizij imenskega prostora. Če se to zgodi, lahko pokličete .noConflictvtičnik, katerega vrednost želite razveljaviti.

var bootstrapButton = $ . fn . gumb . noConflict () // vrne $.fn.button na predhodno dodeljeno vrednost 
$ . fn . bootstrapBtn = bootstrapButton             // da $().bootstrapBtn funkcionalnost zagona

Dogodki

Bootstrap ponuja dogodke po meri za večino edinstvenih dejanj vtičnika. Na splošno so ti v obliki nedoločnika in preteklega deležnika – kjer se nedoločnik (npr. show) sproži na začetku dogodka, njegova oblika preteklega deležnika (npr. shown) pa se sproži ob zaključku dejanja.

Vsi nedoločni dogodki zagotavljajo funkcijo preventDefault. To omogoča, da ustavite izvajanje dejanja, preden se začne.

$ ( '#myModal' ). on ( 'show' , function ( e ) {   
    if (! data ) return e . preventDefault () // ustavi prikaz modalnega   
})

O prehodih

Za preproste učinke prehoda enkrat vključite bootstrap-transition.js skupaj z drugimi datotekami JS. Če uporabljate preveden (ali zmanjšan) bootstrap.js , tega ni treba vključiti – že je tam.

Primeri uporabe

Nekaj ​​primerov vtičnika za prehod:

• Drsenje ali bledenje v modalih
• Izginjanje zavihkov
• Izginjanje opozoril
• Drsna vrtiljaka

Primeri

Modali so poenostavljeni, a prilagodljivi pogovorni pozivi z minimalno zahtevano funkcionalnostjo in pametnimi privzetimi nastavitvami.

Statični primer

Upodobljen modal z glavo, telesom in nizom dejanj v nogi.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> Modalna glava </h3>
  </div>
  <div class = "modal-body" > 
    <p> Eno lepo telo ... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Zapri </a>  
    <a href = "#" class = "btn btn-primary" > Shrani spremembe </a>  
  </div>
</div>

Demo v živo

Preklopite modal prek JavaScripta s klikom na spodnji gumb. Zdrsel bo navzdol in zbledel z vrha strani.

<!-- Gumb za sprožitev načina -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Zaženi demo modal </a>    
 
<!-- Modalno -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Modalna glava </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Eno lepo telo ... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Zapri </button>   
    <button class = "btn btn-primary" > Shrani spremembe </button> 
  </div>
</div>

Uporaba

Preko podatkovnih atributov

Aktivirajte modal brez pisanja JavaScripta. Nastavite data-toggle="modal"na element krmilnika, kot je gumb, skupaj z data-target="#foo"ali href="#foo"za ciljanje določenega načina za preklop.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Zaženi modal </button>   

Prek JavaScripta

Pokličite modal z ID -jem myModalz eno vrstico JavaScripta:

$ ( '#myModal' ). modalno ( možnosti )

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-backdrop="".

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

Metode

.modal(možnosti)

Aktivira vašo vsebino kot modalno. Sprejema neobvezne možnosti object.

$ ( '#myModal' ). modalno ({
  tipkovnica : false 
})

.modal('preklop')

Ročno preklopi modal.

$ ( '#myModal' ). modalno ( 'preklop' )

.modal('pokaži')

Ročno odpre modal.

$ ( '#myModal' ). modalno ( 'pokaži' )

.modal('skrij')

Ročno skrije modal.

$ ( '#myModal' ). modalno ( 'skrij' )

Dogodki

Modalni razred Bootstrapa izpostavlja nekaj dogodkov za priključitev na modalno funkcionalnost.

$ ( '#myModal' ). on ( 'hidden' , function () {   
  // naredi kaj…
})

Primeri

S tem preprostim vtičnikom dodajte spustne menije skoraj vsemu, vključno z navbarom, zavihki in pilulami.

Znotraj vrstice za krmarjenje

Znotraj zavihkov

Uporaba

Preko podatkovnih atributov

Dodajte data-toggle="dropdown"na povezavo ali gumb, da preklopite spustni meni.

<div class = "dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Sprožilec spustnega menija </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Če želite URL-je ohraniti nedotaknjene, uporabite data-targetatribut namesto href="#".

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

Prek JavaScripta

Prikličite spustne menije prek JavaScripta:

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

Opcije

Noben

Metode

$().dropdown('preklop')

Programski api za preklapljanje med meniji za dano navigacijsko vrstico ali navigacijo z zavihki.

Primer v vrstici za krmarjenje

Vtičnik ScrollSpy je namenjen samodejnemu posodabljanju ciljev navigacije glede na položaj drsenja. Pomaknite se po območju pod vrstico za krmarjenje in opazujte spremembo aktivnega razreda. Označeni bodo tudi spustni podelementi.

Uporaba

Preko podatkovnih atributov

Če želite preprosto dodati vohunsko vedenje v svojo zgornjo vrstico za krmarjenje, preprosto dodajte data-spy="scroll"elementu, za katerim želite vohuniti (najpogosteje je to telo), in data-target=".navbar"izberite, katero navigacijo želite uporabiti. Scrollspy boste želeli uporabiti s .navkomponento.

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

Prek JavaScripta

Pokličite Scrollspy prek JavaScripta:

$ ( '#navbar' ). Scrollspy ()

Metode

.scrollspy('osveži')

Ko uporabljate scrollspy v povezavi z dodajanjem ali odstranjevanjem elementov iz DOM, boste morali poklicati metodo osveževanja takole:

$ ( '[data-spy="scroll"]' ). vsak ( funkcija () {  
  var $spy = $ ( to ). scrollspy ( 'osveži' )
});

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-offset="".

Dogodki

Primeri zavihkov

Dodajte hitro, dinamično funkcijo zavihkov za prehod med podokni lokalne vsebine, tudi prek spustnih menijev.

Uporaba

Omogoči zavihke z možnostjo zavihkov prek JavaScripta (vsak zavihek je treba aktivirati posebej):

$ ( '#myTab a' ). kliknite ( funkcija ( e ) {  
  e . prepreči privzeto ();
  $ ( to ). zavihek ( 'pokaži' );
})

Posamezne zavihke lahko aktivirate na več načinov:

$ ( '#myTab a[href="#profile"]' ). zavihek ( 'pokaži' ); // Izberite zavihek po imenu 
$ ( '#myTab a:first' ). zavihek ( 'pokaži' ); // Izberite prvi zavihek 
$ ( '#myTab a:last' ). zavihek ( 'pokaži' ); // Izberi zadnji zavihek 
$ ( '#myTab li:eq(2) a' ). zavihek ( 'pokaži' ); // Izberite tretji zavihek (indeksirano 0) 

Markup

Navigacijo po zavihku ali tabletki lahko aktivirate, ne da bi pisali JavaScript, tako da preprosto določite data-toggle="tab"ali data-toggle="pill"na elementu. Če na zavihek dodate razrede in, navboste uporabili slog zavihka Bootstrap.nav-tabsul

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Domov </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Sporočila </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Nastavitve </a></li>  
</ul>

Metode

$().tab

Aktivira element zavihka in vsebnik vsebine. Zavihek mora imeti bodisi data-targetali hrefciljno usmerjen na vozlišče vsebnika v DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Domača stran </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Sporočila </a></li> 
  <li><a href = "#settings" > Nastavitve </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<skript>
  $ ( funkcija () {  
    $ ( '#myTab a:last' ). zavihek ( 'pokaži' );
  })
</script>

Dogodki

$ ( 'a[data-toggle="tab"]' ). on ( 'prikazano' , funkcija ( e ) {   
  e . cilj // aktiviran zavihek
  e . relatedTarget // prejšnji zavihek
})

Primeri

Navdih za odličen vtičnik jQuery.tipsy, ki ga je napisal Jason Frame; Namigi orodij so posodobljena različica, ki se ne zanaša na slike, uporablja CSS3 za animacije in podatkovne atribute za lokalno shranjevanje naslovov.

Zaradi zmogljivosti sta namig za orodje in pojavni podatkovni apis omogočena, kar pomeni, da ju morate inicializirati sami .

Premaknite miškin kazalec nad spodnje povezave, da si ogledate opise orodij:

Štiri smeri

Namigi orodij v vnosnih skupinah

Ko uporabljate namige orodij in pojavne elemente z vnosnimi skupinami Bootstrap, boste morali nastaviti možnost container(dokumentirano spodaj), da se izognete neželenim stranskim učinkom.

Uporaba

Sproži opis orodja prek JavaScripta:

$ ( '#primer' ). opis orodja ( možnosti )

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-animation="".

Markup

<a href = "#" data-toggle = "tooltip" title = "first tooltip" > premaknite miško nad mano </a>   

Metode

$().tooltip(možnosti)

Zbirki elementov priloži obravnavo namigov orodij.

.tooltip('show')

Razkrije namig elementa.

$ ( '#element' ). opis orodja ( 'pokaži' )

.tooltip('skrij')

Skrije namig elementa.

$ ( '#element' ). opis orodja ( 'skrij' )

.tooltip('preklop')

Preklopi opis orodja elementa.

$ ( '#element' ). opis orodja ( 'preklop' )

.tooltip('destroy')

Skrije in uniči namig elementa.

$ ( '#element' ). opis orodja ( 'uniči' )

Primeri

Dodajte majhne prekrivne vsebine, kot so tiste na iPadu, kateremu koli elementu za namestitev sekundarnih informacij. Premaknite miškin kazalec nad gumb, da sprožite pojavni pojav. Zahteva , da je vključen opis orodja .

Statični popover

Na voljo so štiri možnosti: zgoraj, desno, spodaj in levo poravnano.

Nobena oznaka ni prikazana, saj so pojavna okna ustvarjena iz JavaScripta in vsebine v dataatributu.

Demo v živo

Štiri smeri

Uporaba

Omogoči pojavna okna prek JavaScripta:

$ ( '#primer' ). popover ( možnosti )

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-animation="".

Markup

Zaradi zmogljivosti sta omogočena vmesnika Tooltip in Popover data-apis. Če ju želite uporabiti, samo določite izbirno možnost.

Metode

$().popover(možnosti)

Inicializira pojavna okna za zbirko elementov.

.popover('pokaži')

Razkrije pojavni element elementov.

$ ( '#element' ). popover ( 'pokaži' )

.popover('skrij')

Skrije pojavni pojav elementov.

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

.popover('preklop')

Preklopi pojavni pojav elementov.

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

.popover('uniči')

Skrije in uniči popover elementa.

$ ( '#element' ). popover ( 'uniči' )

Primeri opozoril

S tem vtičnikom dodajte funkcijo opustitve vsem opozorilnim sporočilom.

Uporaba

Omogoči opustitev opozorila prek JavaScripta:

$ ( ".alert" ). opozorilo ()

Markup

Preprosto dodajte data-dismiss="alert"svojemu gumbu za zapiranje, da samodejno omogočite funkcijo zapiranja opozorila.

<a class = "close" data-dismiss = "alert" href = "#"    > × </a>

Metode

$().alert()

Zavije vsa opozorila s tesno funkcionalnostjo. Če želite, da se vaša opozorila animirajo, ko so zaprta, se prepričajte, da je zanje že uporabljen razred .fadein ..in

.alert('close')

Zapre opozorilo.

$ ( ".alert" ). opozorilo ( 'blizu' )

Dogodki

Bootstrapov razred opozoril razkrije nekaj dogodkov za vključitev v funkcijo opozorila.

$ ( '#my-alert' ). bind ( 'zaprto' , funkcija () {   
  // naredi kaj…
})

Primer uporabe

Naredite več z gumbi. Nadzorni gumb navaja ali ustvari skupine gumbov za več komponent, kot so orodne vrstice.

Stalni

Dodajte data-loading-text="Loading..."za uporabo stanja nalaganja na gumbu.

<button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > Stanje nalaganja </button>   

Enotni preklop

Dodajte data-toggle="button"za aktiviranje preklapljanja na enem gumbu.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Enotni preklop </button>   

Potrditveno polje

Dodaj data-toggle="buttons-checkbox"za preklop sloga potrditvenega polja v skupini btn.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Levo </button>  
  <button type = "button" class = "btn btn-primary" > Srednji </button>  
  <button type = "button" class = "btn btn-primary" > Desno </button>  
</div>

Radio

Dodaj data-toggle="buttons-radio"za preklop radijskega sloga v skupini btn.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Levo </button>  
  <button type = "button" class = "btn btn-primary" > Srednji </button>  
  <button type = "button" class = "btn btn-primary" > Desno </button>  
</div>

Uporaba

Omogoči gumbe prek JavaScripta:

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

Markup

Podatkovni atributi so sestavni del vtičnika gumbov. Oglejte si spodnji primer kode za različne vrste oznak.

Opcije

Noben

Metode

$().button('preklop')

Preklopi potisno stanje. Gumb daje videz, kot da je bil aktiviran.

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

$().button('nalaganje')

Nastavi stanje gumba na nalaganje - onemogoči gumb in zamenja besedilo z besedilom za nalaganje. Nalaganje besedila mora biti definirano na elementu gumba z uporabo atributa podatkov data-loading-text.

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

$().button('reset')

Ponastavi stanje gumba - besedilo zamenja z izvirnim besedilom.

$().button(niz)

Ponastavi stanje gumba - zamenja besedilo v poljubno podatkovno definirano stanje besedila.

<button type = "button" class = "btn" data-complete-text = "finished!" > ... </button>    
<skript>
  $ ( '.btn' ). gumb ( 'dokončano' )
</script>

O tem

Zagotovite si osnovne sloge in prilagodljivo podporo za zložljive komponente, kot so harmonike in navigacija.

* Zahteva, da je vključen vtičnik Transitions.

Primer harmonike

Z uporabo vtičnika za strnitev smo zgradili preprost pripomoček v slogu harmonike:

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        1. element zložljive skupine
      </a>
    </div>
    <div id = "collapseOne" class = "accordion-body collapse in" >  
      <div class = "accordion-inner" > 
        Anim pariatur kliše...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        2. element zložljive skupine
      </a>
    </div>
    <div id = "collapseTwo" class = "zrušitev telesa harmonike" >  
      <div class = "accordion-inner" > 
        Anim pariatur kliše...
      </div>
    </div>
  </div>
</div>
...

Vtičnik lahko uporabite tudi brez oznake harmonike. Naj gumb preklaplja med razširitvijo in strnitvijo drugega elementa.

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  preprosto zložljivo
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

Uporaba

Preko podatkovnih atributov

Preprosto dodajte data-toggle="collapse"in data-targetelementu za samodejno dodelitev nadzora nad zložljivim elementom. Atribut data-targetsprejme izbirnik css za uporabo strnjenja. Ne pozabite dodati razreda collapsezložljivemu elementu. Če želite, da se privzeto odpre, dodajte dodatni razred in.

Če želite zložljivemu nadzoru dodati upravljanje skupine, podobno harmoniki, dodajte atribut podatkov data-parent="#selector". Oglejte si predstavitev, da vidite to v akciji.

Prek JavaScripta

Omogoči ročno z:

$ ( ".collapse" ). strni ()

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-parent="".

Metode

.collapse(možnosti)

Aktivira vašo vsebino kot zložljiv element. Sprejema neobvezne možnosti object.

$ ( '#myCollapsible' ). strni ({
  preklop : napačno 
})

.collapse('preklop')

Preklopi zložljiv element med prikazanim ali skritim.

.collapse('show')

Prikazuje zložljiv element.

.collapse('skrij')

Skrije zložljiv element.

Dogodki

Bootstrapov razred kolapsa razkrije nekaj dogodkov za priključitev na funkcionalnost kolapsa.

$ ( '#myCollapsible' ). on ( 'hidden' , function () {   
  // naredi kaj…
})

Primer vrtiljaka

Spodnja diaprojekcija prikazuje generični vtičnik in komponento za kolesarjenje skozi elemente, kot je vrtiljak.

Prva oznaka sličice

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 = "carousel-indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Predmeti vrtiljaka -->
  <div class = "carousel-inner" > 
    <div class = "active item" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Krmarjenje po vrtiljaku -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Uporaba

Preko podatkovnih atributov

Uporabite atribute podatkov za preprost nadzor položaja vrtiljaka. data-slidesprejme ključne besede prevali next, ki spremenijo položaj diapozitiva glede na trenutni položaj. Druga možnost je, da uporabite data-slide-toza posredovanje neobdelanega indeksa diapozitiva vrtiljaku data-slide-to="2", ki preskoči položaj diapozitiva na določen indeks, ki se začne z 0.

Prek JavaScripta

Ročno pokličite vrtiljak z:

$ ( '.carousel' ). vrtiljak ()

Opcije

Možnosti je mogoče posredovati prek atributov podatkov ali JavaScriptz. Za atribute podatkov pripnite ime možnosti v data-, kot v data-interval="".

Metode

.carousel (možnosti)

Inicializira vrtiljak z izbirnimi možnostmi objectin začne krožiti med elementi.

$ ( '.carousel' ). vrtiljak ({
  interval : 2000 
})

.carousel('cikel')

Kroži skozi elemente vrtiljaka od leve proti desni.

.carousel('pavza')

Prepreči kroženje vrtiljaka med predmeti.

.carousel(število)

Preklopi vrtiljak na določen okvir (na osnovi 0, podobno matriki).

.carousel('prej')

Preklopi na prejšnji element.

.carousel('naslednji')

Preklopi na naslednji element.

Dogodki

Bootstrapov razred vrtiljaka izpostavlja dva dogodka za priključitev na funkcijo vrtiljaka.

Primer

Osnovni vtičnik, ki ga je enostavno razširiti, za hitro ustvarjanje elegantnih predpisov s poljubnim vnosom besedila.

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

Nastavite, autocomplete="off"da preprečite, da bi se privzeti meniji brskalnika prikazovali nad spustnim menijem Bootstrap typeahead.

Uporaba

Preko podatkovnih atributov

Dodajte atribute podatkov, da registrirate element s funkcijo vnaprejšnjega vpisovanja, kot je prikazano v zgornjem primeru.

Prek JavaScripta

Ročno pokličite tipkalo z:

$ ( '.typeahead' ). tipkanje naprej ()

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-source="".

Metode

.typeahead(možnosti)

Inicializira vnos s tipkanjem naprej.

Primer

Podnavigacija na levi je predstavitev vtičnika za pritrditev v živo.

Uporaba

Preko podatkovnih atributov

Če želite preprosto dodati vedenje pritrjevanja kateremu koli elementu, preprosto dodajte data-spy="affix"elementu, za katerim želite vohuniti. Nato uporabite odmike, da določite, kdaj vklopiti in izklopiti pripenjanje elementa.

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

Prek JavaScripta

Pokličite vtičnik za pritrditev prek JavaScripta:

$ ( '#navbar' ). pritrditi ()

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-offset-top="200".