Pojedinačno ili sastavljeno

Dodaci se mogu uključiti pojedinačno (iako neki imaju potrebne zavisnosti) ili svi odjednom. I bootstrap.js i bootstrap.min.js sadrže sve dodatke u jednoj datoteci.

Atributi podataka

Možete koristiti sve dodatke za Bootstrap isključivo preko API-ja za označavanje bez pisanja nijednog reda JavaScripta. Ovo je Bootstrap-ov prvoklasni API i trebao bi biti vaša prva pažnja kada koristite dodatak.

Međutim, u nekim situacijama može biti poželjno isključiti ovu funkciju. Stoga također pružamo mogućnost onemogućavanja API-ja atributa podataka tako što ćemo poništiti sve događaje na tijelu imenskog prostora s `'data-api'`. ovo izgleda ovako:

$ ( 'tijelo' ). isključeno ( '.data-api' )

Alternativno, da biste ciljali određeni dodatak, samo uključite ime dodatka kao imenski prostor zajedno sa data-api imenskim prostorom ovako:

$ ( 'tijelo' ). isključeno ( '.alert.data-api' )

Programski API

Također vjerujemo da biste trebali moći koristiti sve dodatke za Bootstrap isključivo preko JavaScript API-ja. Svi javni API-ji su jednostruke, lančane metode i vraćaju kolekciju na koju se postupa.

$ ( ".btn.danger" ). dugme ( "isključi" ). addClass ( "fat" )

Sve metode bi trebale prihvatiti opcijski objekt opcija, string koji cilja određenu metodu ili ništa (što pokreće dodatak sa zadanim ponašanjem):

$ ( "#myModal" ). modal () // inicijalizirano sa zadanim vrijednostima                       
$ ( "#myModal" ). modalni ({ keyboard : false }) // inicijaliziran bez tipkovnice     
$ ( "#myModal" ). modal ( 'show' ) // inicijalizira i odmah poziva show                

Svaki dodatak također izlaže svoj sirovi konstruktor na svojstvu `Constructor`: $.fn.popover.Constructor. Ako želite da dobijete određenu instancu dodatka, dohvatite je direktno iz elementa: $('[rel=popover]').data('popover').

Događaji

Bootstrap pruža prilagođene događaje za većinu jedinstvenih radnji dodataka. Općenito, oni dolaze u obliku infinitiva i participa u prošlosti - gdje se infinitiv (npr. show) pokreće na početku događaja, a njegov glagolski oblik prošlosti (npr. shown) se pokreće po završetku radnje.

Svi infinitivni događaji pružaju funkciju preventDefault. Ovo pruža mogućnost zaustavljanja izvršenja akcije prije nego što ona počne.

$ ( '#myModal' ). on ( 'prikaži' , funkcija ( e ) {   
    if (! data ) vrati e . preventDefault () // zaustavlja modalni prikaz   
})

O tranzicijama

Za jednostavne efekte prijelaza, uključite bootstrap-transition.js jednom uz druge JS datoteke. Ako koristite kompajlirani (ili minimizirani) bootstrap.js, nema potrebe da ga uključujete – već je tu.

Slučajevi upotrebe

Nekoliko primjera dodatka za tranziciju:

• Klizanje ili nestajanje u modalitetima
• Fading out tabs
• Fading out alarms
• Klizna karusel okna

Primjeri

Modali su pojednostavljeni, ali fleksibilni, dijaloški upiti s minimalnom potrebnom funkcionalnošću i pametnim zadanim postavkama.

Statički primjer

Renderovani modalni sa zaglavljem, tijelom i skupom radnji u podnožju.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> Modalno zaglavlje </h3>
  </div>
  <div class = "modal-body" > 
    <p> Jedno fino tijelo... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Zatvori </a>  
    <a href = "#" class = "btn btn-primary" > Sačuvaj promjene </a>  
  </div>
</div>

Demo uživo

Prebacite modal putem JavaScripta klikom na dugme ispod. Kliziće nadole i nestajati sa vrha stranice.

<!-- Dugme za aktiviranje modalnog -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Pokreni demo modal </a>    
 
<!-- Modal -->
<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" > Modalno zaglavlje </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Jedno fino tijelo... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Zatvori </button>   
    <button class = "btn btn-primary" > Sačuvaj promjene </button> 
  </div>
</div>

Upotreba

Preko atributa podataka

Aktivirajte modalni bez pisanja JavaScripta. Postavite data-toggle="modal"na element kontrolera, poput dugmeta, zajedno sa data-target="#foo"ili href="#foo"da biste ciljali određeni modal za prebacivanje.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Pokreni modalni </button>   

Preko JavaScripta

Pozovite modalni s ID myModal-om s jednom linijom JavaScripta:

$ ( '#myModal' ). modalni ( opcije )

Opcije

Opcije se mogu proslijediti putem atributa podataka ili JavaScript-a. Za atribute podataka dodajte naziv opcije u data-, kao u data-backdrop="".

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

Metode

.modal(opcije)

Aktivira vaš sadržaj kao modalni. Prihvata opcione opcije object.

$ ( '#myModal' ). modalni ({
  tastatura : false 
})

.modal('toggle')

Ručno prebacuje modal.

$ ( '#myModal' ). modalni ( 'prebaciti' )

.modal('show')

Ručno otvara modalni.

$ ( '#myModal' ). modalni ( 'prikaži' )

.modal('sakrij')

Ručno skriva modal.

$ ( '#myModal' ). modalni ( 'sakrij' )

Događaji

Bootstrap-ova modalna klasa izlaže nekoliko događaja za spajanje na modalnu funkcionalnost.

$ ( '#myModal' ). on ( 'skriven' , funkcija () {   
  // radi nešto…
})

Primjeri

Dodajte padajuće menije gotovo svemu pomoću ovog jednostavnog dodatka, uključujući navigacijsku traku, kartice i tablete.

Unutar navigacijske trake

U okviru kartica

Upotreba

Preko atributa podataka

Dodajte data-toggle="dropdown"na vezu ili dugme da biste uključili padajući meni.

<div class = "padajući" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Okidač padajućeg menija </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Da bi URL-ovi ostali netaknuti, koristite data-targetatribut umjesto href="#".

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

Preko JavaScripta

Pozovite padajuće menije putem JavaScripta:

$ ( '.dropdown-toggle' ). padajući meni ()

Opcije

Nema

Metode

$().dropdown('toggle')

Programski API za prebacivanje menija za datu traku za navigaciju ili navigaciju sa karticama.

Primjer u navigacijskoj traci

Dodatak ScrollSpy služi za automatsko ažuriranje navigacijskih ciljeva na osnovu položaja pomicanja. Skrolujte područje ispod navigacijske trake i gledajte kako se aktivni razred mijenja. Padajuće podstavke će također biti istaknute.

Upotreba

Preko atributa podataka

Da biste lako dodali ponašanje scrollspy-a vašoj navigaciji na gornjoj traci, samo dodajte data-spy="scroll"elementu koji želite da špijunirate (najčešće bi to bilo tijelo) i data-target=".navbar"da odaberete koju navigaciju ćete koristiti. Želite da koristite scrollspy sa .navkomponentom.

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

Preko JavaScripta

Pozovite scrollspy putem JavaScripta:

$ ( '#navbar' ). scrollspy ()

Metode

.scrollspy('osvježi')

Kada koristite scrollspy u kombinaciji sa dodavanjem ili uklanjanjem elemenata iz DOM-a, morat ćete pozvati metodu osvježavanja na sljedeći način:

$ ( '[data-spy="scroll"]' ). svaki ( funkcija () {  
  var $spy = $ ( ovo ). scrollspy ( 'osvježi' )
});

Opcije

Opcije se mogu proslijediti putem atributa podataka ili JavaScript-a. Za atribute podataka dodajte naziv opcije u data-, kao u data-offset="".

Događaji

Primjeri kartica

Dodajte brzu, dinamičku funkcionalnost kartica za prelaz kroz okna lokalnog sadržaja, čak i putem padajućih menija.

Upotreba

Omogućite kartice koje se mogu tabbirati putem JavaScripta (svaka kartica mora biti aktivirana zasebno):

$ ( '#myTab a' ). kliknite ( funkcija ( e ) {  
  e . preventDefault ();
  $ ( ovo ). tab ( 'prikaži' );
})

Pojedinačne kartice možete aktivirati na nekoliko načina:

$ ( '#myTab a[href="#profile"]' ). tab ( 'prikaži' ); // Odaberite karticu po imenu 
$ ( '#myTab a:prvi' ). tab ( 'prikaži' ); // Odaberite prvu karticu 
$ ( '#myTab a:last' ). tab ( 'prikaži' ); // Odaberite zadnju karticu 
$ ( '#myTab li:eq(2) a' ). tab ( 'prikaži' ); // Odaberite treću karticu (indeksirano 0) 

Markup

Možete aktivirati navigaciju po kartici ili tabletama bez pisanja JavaScripta jednostavnim navođenjem data-toggle="tab"ili data-toggle="pill"na elementu. Dodavanje klasa navi nav-tabsna karticu ulće primijeniti stil kartice Bootstrap.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Početna </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Poruke </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Postavke </a></li>  
</ul>

Metode

$().tab

Aktivira element kartice i kontejner sadržaja. Tab bi trebao imati ili data-targetciljni hrefčvor kontejnera u DOM-u.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Početna </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Poruke </a></li> 
  <li><a href = "#settings" > Postavke </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>
 
<script>
  $ ( funkcija () {  
    $ ( '#myTab a:last' ). tab ( 'prikaži' );
  })
</script>

Događaji

$ ( 'a[data-toggle="tab"]' ). on ( 'prikazano' , funkcija ( e ) {   
  e . cilj // aktivirana kartica
  e . relatedTarget // prethodna kartica
})

Primjeri

Inspirisan odličnim jQuery.tipsy dodatkom koji je napisao Jason Frame; Alati su ažurirana verzija, koja se ne oslanja na slike, koristi CSS3 za animacije i data-atribute za lokalno skladištenje naslova.

Zadržite pokazivač miša preko linkova ispod da vidite opise alata:

Četiri pravca

Upotreba

Aktivirajte opis alata putem JavaScripta:

$ ( '#primjer' ). opis alata ( opcije )

Opcije

Opcije se mogu proslijediti putem atributa podataka ili JavaScript-a. Za atribute podataka dodajte naziv opcije u data-, kao u data-animation="".

Markup

Iz razloga performansi, Tooltip i Popover data-apis su uključeni. Ako želite da ih koristite, samo navedite opciju selektora.

<a href = "#" rel = "tooltip" title = "prvi opis" > zadržite pokazivač iznad mene </a>   

Metode

$().tooltip(opcije)

Prilaže rukovao opisom alata kolekciji elemenata.

.tooltip('show')

Otkriva opis elementa.

$ ( '#element' ). tooltip ( 'prikaži' )

.tooltip('sakrij')

Sakriva opis elementa.

$ ( '#element' ). opis alata ( 'sakrij' )

.tooltip('toggle')

Prebacuje opis elementa.

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

.tooltip('uništiti')

Sakriva i uništava opis elementa.

$ ( '#element' ). tooltip ( 'uništiti' )

Primjeri

Dodajte male slojeve sadržaja, poput onih na iPadu, bilo kojem elementu za smještaj sekundarnih informacija. Zadržite pokazivač miša iznad dugmeta da pokrenete iskačući prozor. Zahtijeva Tooltip da bude uključen.

Statički popover

Dostupne su četiri opcije: gore, desno, dolje i lijevo poravnato.

Nema prikazanih oznaka jer se iskačući oglasi generiraju iz JavaScripta i sadržaja unutar dataatributa.

Demo uživo

Četiri pravca

Upotreba

Omogućite iskačuće prikaze putem JavaScripta:

$ ( '#primjer' ). popover ( opcije )

Opcije

Opcije se mogu proslijediti putem atributa podataka ili JavaScript-a. Za atribute podataka dodajte naziv opcije u data-, kao u data-animation="".

Markup

Iz razloga performansi, Tooltip i Popover data-apis su uključeni. Ako želite da ih koristite, samo navedite opciju selektora.

Metode

$().popover(opcije)

Inicijalizira skočne prozore za kolekciju elemenata.

.popover('show')

Otkriva iskačući element.

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

.popover('sakrij')

Sakriva skočni prozor elemenata.

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

.popover('toggle')

Prebacuje iskačući prozor elemenata.

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

.popover('uništiti')

Sakriva i uništava iskačući prikaz elementa.

$ ( '#element' ). popover ( 'uništiti' )

Primjer upozorenja

Dodajte funkciju odbacivanja svim porukama upozorenja pomoću ovog dodatka.

Upotreba

Omogućite odbacivanje upozorenja putem JavaScripta:

$ ( ".upozorenje" ). upozorenje ()

Markup

Samo dodajte data-dismiss="alert"dugme za zatvaranje da biste automatski dali funkciju upozorenja za zatvaranje.

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

Metode

$().alert()

Omotava sva upozorenja sa bliskom funkcionalnošću. Da bi se vaša upozorenja animirala kada su zatvorena, provjerite jesu li na njih već primijenjena klasa i .fade..in

.alert('zatvori')

Zatvara upozorenje.

$ ( ".upozorenje" ). upozorenje ( 'zatvori' )

Događaji

Bootstrapova klasa upozorenja izlaže nekoliko događaja za spajanje na funkcionalnost upozorenja.

$ ( '#my-alert' ). bind ( 'zatvoreno' , funkcija () {   
  // radi nešto…
})

Primjer upotrebe

Uradite više sa dugmadima. Kontrolirajte stanja dugmadi ili kreirajte grupe dugmadi za više komponenti kao što su trake sa alatkama.

Stateful

Dodajte data-loading-text="Učitavanje..." da biste koristili stanje učitavanja na dugmetu.

<button type = "button" class = "btn btn-primary" data-loading-text = "Učitavam..." > Stanje učitavanja </button>   

Pojedinačni prekidač

Dodajte data-toggle="button" da aktivirate prebacivanje na jednom dugmetu.

<button type = "button" class = "btn" data-toggle = "button" > Jednostruki prekidač </button>   

Polje za potvrdu

Dodajte data-toggle="buttons-checkbox" za uključivanje stila potvrdnog okvira na btn-grupi.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn" > Lijevo </button>  
  <button type = "button" class = "btn" > Srednja </button>  
  <button type = "button" class = "btn" > Desno </button>  
</div>

Radio

Dodajte data-toggle="buttons-radio" za uključivanje stila radija na btn-grupu.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn" > Lijevo </button>  
  <button type = "button" class = "btn" > Srednja </button>  
  <button type = "button" class = "btn" > Desno </button>  
</div>

Upotreba

Omogućite dugmad putem JavaScripta:

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

Markup

Atributi podataka su sastavni dio dodatka gumba. Pogledajte primjer koda u nastavku za različite tipove označavanja.

Opcije

Nema

Metode

$().button('toggle')

Uključuje push stanje. Daje dugmetu izgled da je aktivirano.

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

$().button('loading')

Postavlja stanje dugmeta na učitavanje - onemogućava dugme i menja tekst u tekst za učitavanje. Tekst za učitavanje treba definirati na elementu gumba pomoću atributa podataka data-loading-text.

<button type = "button" class = "btn" data-loading-text = "učitavanje stvari..." > ... </button>    

$().button('reset')

Resetuje stanje dugmeta - menja tekst u originalni tekst.

$().button(string)

Resetuje stanje dugmeta - menja tekst u bilo koje stanje teksta definisano podacima.

<button type = "button" class = "btn" data-complete-text = "gotovo!" > ... </button>    
<script>
  $ ( '.btn' ). dugme ( 'završeno' )
</script>

O

Nabavite osnovne stilove i fleksibilnu podršku za sklopive komponente kao što su harmonike i navigacija.

* Zahtijeva da se uključi dodatak Transitions.

Primjer harmonike

Koristeći dodatak za kolaps, napravili smo jednostavan widget u stilu harmonike:

<div class = "harmonika" id = "harmonika2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Sklopiva grupna stavka #1
      </a>
    </div>
    <div id = "collapseOne" class = "urušavanje tijela harmonike" >  
      <div class = "harmonika-unutrašnja" > 
        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" >    
        Sklopiva grupna stavka #2
      </a>
    </div>
    <div id = "collapseTwo" class = "kolaps tijela harmonike" >  
      <div class = "harmonika-unutrašnja" > 
        Anim pariatur kliše...
      </div>
    </div>
  </div>
</div>
...

Dodatak možete koristiti i bez oznake harmonike. Napravite dugme za prebacivanje proširenja i sažimanja drugog elementa.

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  jednostavno sklopivo
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

Upotreba

Preko atributa podataka

Samo dodajte data-toggle="collapse"i data-targetelementu da biste automatski dodijelili kontrolu nad sklopivim elementom. Atribut data-targetprihvaća css selektor za primjenu kolapsa na. Obavezno dodajte klasu collapsesklopivom elementu. Ako želite da se zadano otvori, dodajte dodatnu klasu in.

Da biste sklopivoj kontroli dodali upravljanje grupom nalik harmonici, dodajte atribut podataka data-parent="#selector". Pogledajte demo da vidite ovo na djelu.

Preko JavaScripta

Omogućite ručno pomoću:

$ ( ".kolaps" ). kolaps ()

Opcije

Opcije se mogu proslijediti putem atributa podataka ili JavaScript-a. Za atribute podataka dodajte naziv opcije u data-, kao u data-parent="".

Metode

.collapse(opcije)

Aktivira vaš sadržaj kao sklopivi element. Prihvata opcione opcije object.

$ ( '#myCollapsible' ). kolaps ({
  prekidač : lažno 
})

.collapse('toggle')

Prebacuje sklopivi element na prikazan ili skriven.

.collapse('prikaži')

Prikazuje sklopivi element.

.collapse('sakrij')

Sakriva sklopivi element.

Događaji

Bootstrapova klasa kolapsa izlaže nekoliko događaja za spajanje na funkcionalnost kolapsa.

$ ( '#myCollapsible' ). on ( 'skriven' , funkcija () {   
  // radi nešto…
})

Primjer vrtuljke

Slideshow ispod prikazuje generički dodatak i komponentu za kretanje kroz elemente poput vrtuljka.

Prva sličica

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 slajd" >  
  <!-- Stavke vrteške -->
  <div class = "carousel-inner" > 
    <div class = "aktivna stavka" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel navigacija -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Upotreba

Preko atributa podataka

...

Preko JavaScripta

Ručno pozovite vrtuljak pomoću:

$ ( '.vrtuljak' ). vrtuljak ()

Opcije

Opcije se mogu proslijediti putem atributa podataka ili JavaScript-a. Za atribute podataka dodajte naziv opcije u data-, kao u data-interval="".

Metode

.carousel (opcije)

Inicijalizira vrtuljak s opcijskim opcijama objecti počinje se kretati kroz stavke.

$ ( '.vrtuljak' ). vrtuljak ({
  interval : 2000 
})

.carousel('ciklus')

Kruži kroz stavke vrteške s lijeva na desno.

.carousel('pauza')

Zaustavlja vrtuljku da se kreće kroz stavke.

.carousel (broj)

Kruži vrtuljak do određenog okvira (na bazi 0, slično nizu).

.carousel('prev')

Prelazi na prethodnu stavku.

.carousel('sljedeći')

Prelazi na sljedeću stavku.

Događaji

Bootstrapova carousel klasa izlaže dva događaja za spajanje na funkcionalnost vrteške.

Primjer

Osnovni, lako prošireni dodatak za brzo kreiranje elegantnih ispisa s bilo kojim unosom teksta.

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

Upotreba

Preko atributa podataka

Dodajte atribute podataka da biste registrirali element s funkcijom unaprijed kao što je prikazano u gornjem primjeru.

Preko JavaScripta

Ručno pozovite unaprijed tipku pomoću:

$ ( '.typeahead' ). ukucaj naprijed ()

Opcije

Opcije se mogu proslijediti putem atributa podataka ili JavaScript-a. Za atribute podataka dodajte naziv opcije u data-, kao u data-source="".

Metode

.typeahead (opcije)

Inicijalizira unos sa tipom naprijed.

Primjer

Podnavigacija na lijevoj strani je demo afiks dodatka uživo.

Upotreba

Preko atributa podataka

Da biste lako dodali ponašanje afiksa bilo kojem elementu, samo dodajte data-spy="affix"elementu koji želite da špijunirate. Zatim upotrijebite pomake da definirate kada treba uključiti ili isključiti pričvršćivanje elementa.

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

Preko JavaScripta

Pozovite dodatak afiksa putem JavaScripta:

$ ( '#navbar' ). afiks ()

Metode

.affix('osvježi')

Kada koristite afiks zajedno sa dodavanjem ili uklanjanjem elemenata iz DOM-a, poželjet ćete pozvati metodu osvježavanja:

$ ( '[data-spy="affix"]' ). svaki ( funkcija () {  
  $ ( ovo ). afiks ( 'osvježi' )
});

Opcije

Opcije se mogu proslijediti putem atributa podataka ili JavaScript-a. Za atribute podataka dodajte naziv opcije u data-, kao u data-offset-top="200".