Pojedinačni ili sastavljeni

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

Atributi podataka

Sve Bootstrap dodatke možete koristiti isključivo putem API-ja za označavanje bez pisanja ijednog retka JavaScripta. Ovo je Bootstrapov prvi razred API-ja i trebao bi vam biti na prvom mjestu pri korištenju dodatka.

Ipak, 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 poništavanjem veza svih događaja na tijelu imenskog prostora s `'data-api'`. Ovo izgleda ovako:

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

Alternativno, da ciljate određeni dodatak, samo uključite naziv dodatka kao prostor imena zajedno s prostorom imena data-api ovako:

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

Programski API

Također vjerujemo da biste trebali moći koristiti sve Bootstrap dodatke isključivo putem JavaScript API-ja. Svi javni API-ji su pojedinačne, ulančane metode i vraćaju zbirku na koju se djeluje.

$ ( ".btn.opasnost" ). gumb ( "preklopnik" ). addClass ( "debelo" )

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

$ ( "#myModal" ). modalni () // inicijaliziran sa zadanim vrijednostima                       
$ ( "#myModal" ). modalno ({ tipkovnica : lažno }) // inicijalizirano bez tipkovnice     
$ ( "#myModal" ). modal ( 'show' ) // inicijalizira i odmah poziva show                

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

Nema sukoba

Ponekad je potrebno koristiti Bootstrap dodatke s drugim UI okvirima. U tim okolnostima povremeno može doći do sukoba prostora imena. Ako se to dogodi, možete pozvati .noConflictdodatak kojem želite vratiti vrijednost.

var bootstrapButton = $ . fn . gumb . noConflict () // vraća $.fn.button na prethodno dodijeljenu vrijednost 
$ . fn . bootstrapBtn = bootstrapButton             // daje $().bootstrapBtn funkciju pokretanja

Događaji

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

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

$ ( '#myModal' ). on ( 'show' , function ( e ) {   
    if (! data ) return e . preventDefault () // zaustavlja prikazivanje modala   
})

O prijelazima

Za jednostavne efekte prijelaza, uključite bootstrap-transition.js jednom uz ostale JS datoteke. Ako koristite kompajlirani (ili umanjeni) bootstrap.js , nema potrebe uključivati ​​ovo—već je tu.

Slučajevi upotrebe

Nekoliko primjera dodatka za prijelaz:

• Klizanje ili blijeđenje u modalima
• Izbljeđivanje kartica
• Izbljeđivanje upozorenja
• Klizna vrtuljkasta okna

Primjeri

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

Statički primjer

Prikazani modal 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" > Spremi promjene </a>  
  </div>
</div>

Demo uživo

Uključite modal putem JavaScripta klikom na gumb ispod. Kliznit će prema dolje i izblijedjeti s vrha stranice.

<!-- Gumb za pokretanje modalnog -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Pokreni 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" > 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" > Spremi promjene </button> 
  </div>
</div>

Korištenje

Preko atributa podataka

Aktivirajte modal bez pisanja JavaScripta. Postavite data-toggle="modal"na element kontrolera, poput gumba, zajedno s data-target="#foo"ili href="#foo"za ciljanje određenog modala za prebacivanje.

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

Preko JavaScripta

Pozovite modal s ID -om myModals jednim redom JavaScripta:

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

Mogućnosti

Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. 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 modal. Prihvaća izborne opcije object.

$ ( '#myModal' ). modalni ({
  tipkovnica : lažno 
})

.modal('prebaci')

Ručno mijenja modal.

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

.modal('prikaži')

Ručno otvara modal.

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

.modal('sakrij')

Ručno skriva modal.

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

Događaji

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

$ ( '#myModal' ). on ( 'hidden' , function () {   
  // učini nešto…
})

Primjeri

Dodajte padajuće izbornike gotovo svemu s ovim jednostavnim dodatkom, uključujući navigacijsku traku, kartice i pilule.

Unutar navigacijske trake

Unutar kartica

Korištenje

Preko atributa podataka

Dodajte data-toggle="dropdown"na vezu ili gumb za prebacivanje padajućeg izbornika.

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

Da biste URL-ove zadržali netaknutima, upotrijebite data-targetatribut umjesto href="#".

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

Preko JavaScripta

Pozovite padajuće izbornike putem JavaScripta:

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

Mogućnosti

Nijedan

Metode

$().dropdown('toggle')

Programski API za prebacivanje izbornika za određenu navigacijsku traku ili navigaciju s karticama.

Primjer u navigacijskoj traci

Dodatak ScrollSpy služi za automatsko ažuriranje navigacijskih ciljeva na temelju položaja pomicanja. Pomičite područje ispod navigacijske trake i promatrajte promjenu aktivne klase. Podstavke padajućeg izbornika također će biti istaknute.

Korištenje

Preko atributa podataka

Da biste jednostavno dodali scrollspy ponašanje svojoj navigaciji na gornjoj traci, samo dodajte data-spy="scroll"elementu koji želite špijunirati (najčešće bi to bilo tijelo) i data-target=".navbar"odaberite koju ćete navigaciju koristiti. Htjet ćete koristiti scrollspy s .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 s 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' )
});

Mogućnosti

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

Događaji

Primjeri kartica

Dodajte brzu, dinamičnu funkcionalnost kartica za prijelaz kroz okna lokalnog sadržaja, čak i putem padajućih izbornika.

Korištenje

Omogući tabbable kartice putem JavaScript-a (svaku karticu treba zasebno aktivirati):

$ ( '#myTab a' ). kliknite ( funkcija ( e ) {  
  e . spriječiZadano ();
  $ ( ovo ). kartica ( 'prikaži' );
})

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

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

Markup

Možete aktivirati karticu ili navigaciju pilulom bez pisanja bilo kakvog JavaScripta jednostavnim navođenjem data-toggle="tab"ili data-toggle="pill"na elementu. Dodavanjem klasa navi nav-tabsna karticu ulprimijenit će se 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 spremnik sadržaja. Kartica bi trebala imati data-targetili hrefciljanje čvora spremnika u DOM-u.

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

Događaji

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

Primjeri

Nadahnut izvrsnim dodatkom jQuery.tipsy koji je napisao Jason Frame; Opisi alata su ažurirana verzija, koja se ne oslanja na slike, koristi CSS3 za animacije i atribute podataka za lokalnu pohranu naslova.

Iz razloga izvedbe, tooltip i popover data-apis su uključeni, što znači da ih morate sami inicijalizirati .

Zadržite pokazivač iznad donjih veza da biste vidjeli savjete:

Četiri smjera

Opisi u ulaznim grupama

Kada koristite opise alata i skočne prozore s grupama unosa Bootstrap, morat ćete postaviti opciju container(dokumentirano u nastavku) kako biste izbjegli neželjene nuspojave.

Korištenje

Pokreni opis alata putem JavaScripta:

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

Mogućnosti

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

Markup

<a href = "#" data-toggle = "tooltip" title = "first tooltip" > zadržite pokazivač iznad mene </a>   

Metode

$().tooltip(opcije)

Priključuje rukovatelj opisom alata kolekciji elemenata.

.tooltip('show')

Otkriva opis elementa.

$ ( '#element' ). opis alata ( 'prikaži' )

.tooltip('sakrij')

Skriva opis elementa.

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

.tooltip('toggle')

Prebacuje opis elementa.

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

.tooltip('uništi')

Skriva i uništava opis elementa.

$ ( '#element' ). opis alata ( 'uništi' )

Primjeri

Dodajte male slojeve sadržaja, poput onih na iPadu, bilo kojem elementu za smještaj sekundarnih informacija. Zadržite pokazivač iznad gumba da biste pokrenuli skočni prozor. Zahtijeva uključivanje Tooltip -a.

Statički skok

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

Ne prikazuje se oznaka jer se skočni prozori generiraju iz JavaScripta i sadržaja unutar dataatributa.

Demo uživo

Četiri smjera

Korištenje

Omogući skočne prozore putem JavaScripta:

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

Mogućnosti

Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. 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 ih želite koristiti samo navedite opciju odabira.

Metode

$().popover(opcije)

Inicijalizira skočne prozore za zbirku elemenata.

.popover('prikaži')

Otkriva popover elemenata.

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

.popover('sakrij')

Skriva skočni prozor elemenata.

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

.popover('prebaci')

Isključuje skočni prozor elemenata.

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

.popover('uništi')

Skriva i uništava popover elementa.

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

Primjer upozorenja

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

Korištenje

Omogućite odbacivanje upozorenja putem JavaScripta:

$ ( ". alert" ). upozorenje ()

Markup

Samo dodajte data-dismiss="alert"gumbu za zatvaranje kako biste automatski dali funkciju zatvaranja upozorenja.

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

Metode

$().alert()

Obuhvaća sva upozorenja bliskom funkcionalnošću. Da bi vaša upozorenja bila animirana kada se zatvore, provjerite imaju li već primijenjenu klasu i .fade..in

.alert('close')

Zatvara upozorenje.

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

Događaji

Bootstrapova klasa upozorenja izlaže nekoliko događaja za povezivanje s funkcijom upozorenja.

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

Primjeri upotrebe

Učinite više s gumbima. Stanja gumba za upravljanje ili stvaranje grupa gumba za više komponenti poput alatnih traka.

Državničko

Dodajte data-loading-text="Loading..."za korištenje stanja učitavanja na gumbu.

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

Jednostruki prekidač

Dodaj data-toggle="button"za aktiviranje prebacivanja na jednom gumbu.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Pojedinačni prekidač </button>   

Potvrdni okvir

Dodaj data-toggle="buttons-checkbox"za promjenu stila potvrdnog okvira na btn-grupi.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Lijevo </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 promjenu radijskog stila na btn-grupi.

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

Korištenje

Omogući gumbe putem JavaScripta:

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

Markup

Atributi podataka sastavni su dio dodatka gumba. U nastavku pogledajte primjer koda za različite vrste označavanja.

Mogućnosti

Nijedan

Metode

$().button('toggle')

Prebacuje stanje guranja. Daje gumbu izgled da je aktiviran.

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

$().button('učitavanje')

Postavlja stanje gumba na učitavanje - onemogućuje gumb i mijenja tekst u tekst za učitavanje. Učitavanje teksta treba biti definirano na elementu gumba pomoću atributa podataka data-loading-text.

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

$().button('reset')

Ponovno postavlja stanje gumba - mijenja tekst u izvorni tekst.

$().button(niz)

Poništava stanje gumba - mijenja tekst u bilo koje stanje definirano podacima.

<button type = "button" class = "btn" data-complete-text = "finished!" > ... </button>    
<skripta>
  $ ( '.btn' ). gumb ( 'dovršeno' )
</script>

Oko

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

* Zahtijeva uključivanje dodatka Transitions.

Primjer harmonike

Koristeći dodatak za sažimanje, napravili smo jednostavan widget u stilu 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" >    
        Sklopiva grupna stavka #1
      </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" >    
        Sklopiva grupna stavka #2
      </a>
    </div>
    <div id = "collapseTwo" class = "collapse harmonika-tijelo" >  
      <div class = "accordion-inner" > 
        Anim pariatur kliše...
      </div>
    </div>
  </div>
</div>
...

Također možete koristiti dodatak bez oznake harmonike. Napravite gumb za prebacivanje proširivanja 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>  

Korištenje

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 na koji se primjenjuje sažimanje. Obavezno dodajte klasu collapsesklopivom elementu. Ako želite da se prema zadanim postavkama otvori, dodajte dodatnu klasu in.

Da biste sklopivoj kontroli dodali grupno upravljanje poput harmonike, dodajte atribut podataka data-parent="#selector". Pogledajte demo kako biste vidjeli ovo na djelu.

Preko JavaScripta

Omogućite ručno pomoću:

$ ( ".sažimanje" ). kolaps ()

Mogućnosti

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

Metode

.sažmi(opcije)

Aktivira vaš sadržaj kao sklopivi element. Prihvaća izborne opcije object.

$ ( '#myCollapsible' ). sažimanje ({
  prebacivanje : lažno 
})

.collapse('prebaci')

Prebacuje sklopivi element na prikazan ili skriven.

.collapse('show')

Prikazuje sklopivi element.

.collapse('sakrij')

Skriva sklopivi element.

Događaji

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

$ ( '#myCollapsible' ). on ( 'hidden' , function () {   
  // učini nešto…
})

Primjer vrtuljak

Prikaz slajdova u nastavku prikazuje generički dodatak i komponentu za kruženje kroz elemente poput vrtuljka.

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>
  <!-- Stavke na vrtuljku -->
  <div class = "carousel-inner" > 
    <div class = "active item" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Navigacija vrtuljkom -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Korištenje

Preko atributa podataka

Koristite atribute podataka za jednostavnu kontrolu položaja vrtuljka. data-slideprihvaća ključne riječi previli next, koje mijenjaju položaj slajda u odnosu na trenutni položaj. Alternativno, koristite data-slide-toza prosljeđivanje sirovog indeksa slajda na vrtuljak data-slide-to="2", koji prebacuje položaj slajda na određeni indeks koji počinje s 0.

Preko JavaScripta

Pozovite karusel ručno pomoću:

$ ( '.vrtuljak' ). vrtuljak ()

Mogućnosti

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

Metode

.vrtuljak (opcije)

Inicijalizira vrtuljak s neobaveznim opcijama objecti počinje kružiti kroz stavke.

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

.carousel('ciklus')

Kruži kroz stavke vrtuljka slijeva nadesno.

.carousel('pauza')

Zaustavlja vrtuljak da kruži kroz stavke.

.vrtuljak(broj)

Vrti vrtuljak na određeni okvir (na temelju 0, slično nizu).

.carousel('pret')

Ciklusi na prethodnu stavku.

.carousel('sljedeće')

Prelazak na sljedeću stavku.

Događaji

Bootstrapova klasa vrtuljka izlaže dva događaja za spajanje na funkciju vrtuljka.

Primjer

Osnovni, lako proširivi dodatak za brzo kreiranje elegantnih predznaka s bilo kojim oblikom unosa teksta.

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

Htjet ćete postaviti autocomplete="off"da spriječite pojavljivanje zadanih izbornika preglednika preko padajućeg izbornika Bootstrap typeahead.

Korištenje

Preko atributa podataka

Dodajte atribute podataka za registraciju elementa s funkcijom unaprijed upisivanja kao što je prikazano u gornjem primjeru.

Preko JavaScripta

Ručno pozovite unaprijed upisivanje pomoću:

$ ( '.typeahead' ). ispis unaprijed ()

Mogućnosti

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

Metode

.typeahead(opcije)

Inicijalizira unos s upisivanjem unaprijed.

Primjer

Podnavigacija s lijeve strane je demonstracija dodatka afiksa uživo.

Korištenje

Preko atributa podataka

Da biste jednostavno dodali ponašanje pričvršćivanja bilo kojem elementu, samo dodajte data-spy="affix"elementu koji želite špijunirati. Zatim upotrijebite pomake da definirate kada uključiti i isključiti prikvačivanje elementa.

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

Preko JavaScripta

Pozovite affix dodatak putem JavaScripta:

$ ( '#navbar' ). pričvrstiti ()

Mogućnosti

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