JavaScript

Oživite Bootstrapove komponente—sada s 13 prilagođenih jQuery dodataka.

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:

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

  1. $ ( '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 metode koje se mogu ulančati i vraćaju zbirku na koju se djeluje.

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

  1. $ ( "#myModal" ). modalni () // inicijaliziran sa zadanim vrijednostima
  2. $ ( "#myModal" ). modalno ({ tipkovnica : lažno }) // inicijalizirano bez tipkovnice
  3. $ ( "#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.

  1. var bootstrapButton = $ . fn . gumb . noConflict () // vraća $.fn.button na prethodno dodijeljenu vrijednost
  2. $ . 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.

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

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.

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  4. <h3> Modalno zaglavlje </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Jedno fino tijelo... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > Zatvori </a>
  11. <a href = "#" class = "btn btn-primary" > Spremi promjene </a>
  12. </div>
  13. </div>

Demo uživo

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

  1. <!-- Gumb za pokretanje modalnog -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Pokreni demo modal </a>
  3.  
  4. <!-- Modalno -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria- labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > Modalno zaglavlje </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> Jedno fino tijelo... </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Zatvori </button>
  15. <button class = "btn btn-primary" > Spremi promjene </button>
  16. </div>
  17. </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.

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

Preko JavaScripta

Pozovite modal s ID -om myModals jednim redom JavaScripta:

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

Ime tip zadano opis
pozadina Booleov pravi Uključuje element modalne pozadine. Alternativno, navedite staticza pozadinu koja ne zatvara modal na klik.
tipkovnica Booleov pravi Zatvara modal kada se pritisne tipka za izlaz
pokazati Booleov pravi Prikazuje modal kada se inicijalizira.
daljinski staza lažno

Ako je naveden udaljeni url, sadržaj će se učitati putem jQuery loadmetode i umetnuti u .modal-body. Ako koristite podatkovni API, alternativno možete koristiti hrefoznaku za navođenje udaljenog izvora. Primjer ovoga prikazan je u nastavku:

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

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

.modal('prebaci')

Ručno mijenja modal.

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

.modal('prikaži')

Ručno otvara modal.

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

.modal('sakrij')

Ručno skriva modal.

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

Događaji

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

Događaj Opis
pokazati Ovaj događaj aktivira se odmah kada showse pozove metoda instance.
prikazano Ovaj se događaj pokreće kada je modal vidljiv korisniku (pričekat će se da se css prijelazi završe).
sakriti Ovaj događaj se aktivira odmah nakon hidepozivanja metode instance.
skriven Ovaj se događaj pokreće kada se modal više ne skriva od korisnika (pričekat će se dovršetak css prijelaza).
  1. $ ( '#myModal' ). on ( 'hidden' , function () {
  2. // učini nešto…
  3. })

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.

@mast

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi prije nego što su rasprodali qui. Tumblr prava za bicikle od farme do stola. Anim keffiyeh carles kardigan. Velit seitan mcsweeney's photo booth 3 vuk mjesec irure. Cosby pulover lomo jean kratke hlače, williamsburg hoodie minim qui vjerojatno niste čuli za njih i kardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tetovirani akuzamus, cred ironija biodizel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa brkovi skateboard, adipisicing fugiat velit vile brada. Freeganova brada aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tetovirani cosby pulover s hranom, mcsweeneyjev quis non freegan vinil. Lo-fi wes anderson +1 krojački. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

jedan

Occaecat commodo aliqua delectus. Fap craft pivo deserunt skateboard ea. Lomo biciklistička prava adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinil, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minimalna kurirska torba. Cred ex in, održivi delectus consectetur fanny pack iphone.

dva

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id pretpostavlja se. Locavore sed helvetica kliše ironija, thundercats vjerojatno niste čuli za njih consequat hoodie bez glutena lo-fi fap aliquip. Labore elit placeat prije nego što su rasprodani, terry richardson proident brunch nesciunt quis cosby džemper pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan gotovi velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


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.

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

Preko JavaScripta

Pozovite scrollspy putem JavaScripta:

  1. $ ( '#navbar' ). Scrollspy ()
Glavu gore! Veze na navigacijskoj traci moraju imati razrješive ID ciljeve. Na primjer, <a href="#home">home</a>mora odgovarati nečemu u domu poput <div id="home"></div>.

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:

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

Mogućnosti

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

Ime tip zadano opis
pomaknuti broj 10 Pikseli za pomak od vrha pri izračunavanju položaja pomicanja.

Događaji

Događaj Opis
aktivirati Ovaj događaj se aktivira kad god se nova stavka aktivira od strane ScrollSpy.

Primjeri kartica

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

Sirovi traper za koji vjerojatno niste čuli za jeans kratke hlače Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Moustache cliche tempor, williamsburg carles veganska helvetica. Reprehenderit mesar retro keffiyeh dreamcatcher synth. Cosby pulover eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis kardigan američka odjeća, mesar voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


Korištenje

Omogućite tabbable kartice putem JavaScripta (svaku karticu potrebno je zasebno aktivirati):

  1. $ ( '#myTab a' ). klik ( funkcija ( e ) {
  2. e . spriječiZadano ();
  3. $ ( ovo ). kartica ( 'prikaži' );
  4. })

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

  1. $ ( '#myTab a[href="#profile"]' ). kartica ( 'prikaži' ); // Odaberite karticu po imenu
  2. $ ( '#myTab a:first' ). kartica ( 'prikaži' ); // Odaberite prvu karticu
  3. $ ( '#myTab a:last' ). kartica ( 'prikaži' ); // Odaberite posljednju karticu
  4. $ ( '#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.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Početna </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Poruke </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Postavke </a></li>
  6. </ul>

Metode

$().tab

Aktivira element kartice i spremnik sadržaja. Kartica bi trebala imati data-targetili hrefciljanje čvora spremnika u DOM-u.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Početna </a></li>
  3. <li><a href = "#profile" > Profil </a></li>
  4. <li><a href = "#messages" > Poruke </a></li>
  5. <li><a href = "#settings" > Postavke </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <skripta>
  16. $ ( funkcija () {
  17. $ ( '#myTab a:last' ). kartica ( 'prikaži' );
  18. })
  19. </script>

Događaji

Događaj Opis
pokazati Ovaj se događaj aktivira prilikom prikaza kartice, ali prije nego što se prikaže nova kartica. Koristite event.targeti event.relatedTargetza ciljanje aktivne kartice i prethodne aktivne kartice (ako je dostupna).
prikazano Ovaj se događaj pokreće na prikazu kartice nakon što je kartica prikazana. Koristite event.targeti event.relatedTargetza ciljanje aktivne kartice i prethodne aktivne kartice (ako je dostupna).
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'prikazano' , funkcija ( e ) {
  2. e . cilj // aktivirana kartica
  3. e . relatedTarget // prethodna kartica
  4. })

Primjeri

Nadahnut izvrsnim dodatkom jQuery.tipsy koji je napisao Jason Frame; Opisi alata ažurirana su 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:

Uske hlače sljedeće razine keffiyeh za koje vjerojatno niste čuli. Photo booth beard raw denim letterpress veganska kurirska torba stumptown. Seitan od farme do stola, mcsweeneyjeva fiksna održiva quinoa 8-bitna američka odjeća ima frotir richardson vinil chambray. Beard stumptown, kardigani banh mi lomo thundercats. Tofu biodizel williamsburg marfa, four loko mcsweeney's cleanse veganski chambray. A stvarno ironic artisan whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

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

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

Ime tip zadano opis
animacija Booleov pravi primijenite css fade prijelaz na tooltip
html Booleov lažno Umetnite html u opis alata. Ako je lažno, jqueryjeva textmetoda koristit će se za umetanje sadržaja u dom. Upotrijebite tekst ako ste zabrinuti zbog XSS napada.
plasman niz | funkcija 'vrh' kako postaviti opis alata - vrh | dno | lijevo | pravo
selektor niz lažno Ako je selektor naveden, objekti opisa alata bit će delegirani navedenim ciljevima.
titula niz | funkcija '' zadana vrijednost naslova ako oznaka `title` nije prisutna
okidač niz 'hover focus' kako se aktivira opis alata - kliknite | lebdjeti | fokus | priručnik. Imajte na umu da propuštate višestruke okidače, odvojene razmakom, vrste okidača.
odgoditi broj | objekt 0

odgoda prikazivanja i skrivanja opisa alata (ms) - ne odnosi se na vrstu ručnog okidača

Ako je naveden broj, odgoda se primjenjuje na skrivanje/prikazivanje

Struktura objekta je:delay: { show: 500, hide: 100 }

spremnik niz | lažno lažno

Dodaje opis alata određenom elementucontainer: 'body'

Glavu gore! Opcije za pojedinačne opise alata mogu se alternativno odrediti korištenjem atributa podataka.

Markup

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

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

.tooltip('sakrij')

Skriva opis elementa.

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

.tooltip('toggle')

Prebacuje opis elementa.

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

.tooltip('uništi')

Skriva i uništava opis elementa.

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

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover desno

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover dno

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover lijevo

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

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:

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

Ime tip zadano opis
animacija Booleov pravi primijenite css fade prijelaz na tooltip
html Booleov lažno Umetnite html u skočni prozor. Ako je lažno, jqueryjeva textmetoda koristit će se za umetanje sadržaja u dom. Upotrijebite tekst ako ste zabrinuti zbog XSS napada.
plasman niz | funkcija 'pravo' kako postaviti popover - top | dno | lijevo | pravo
selektor niz lažno ako je osiguran selektor, objekti opisa alata bit će delegirani navedenim ciljevima
okidač niz 'klik' kako se pokreće popover - kliknite | lebdjeti | fokus | priručnik
titula niz | funkcija '' zadana vrijednost naslova ako atribut `title` nije prisutan
sadržaj niz | funkcija '' zadana vrijednost sadržaja ako atribut `data-content` nije prisutan
odgoditi broj | objekt 0

odgoda prikazivanja i skrivanja popover-a (ms) - ne odnosi se na ručni tip okidača

Ako je naveden broj, odgoda se primjenjuje na skrivanje/prikazivanje

Struktura objekta je:delay: { show: 500, hide: 100 }

spremnik niz | lažno lažno

Dodaje skočni prozor određenom elementucontainer: 'body'

Glavu gore! Opcije za pojedinačne skočne prozore mogu se alternativno specificirati upotrebom atributa podataka.

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.

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

.popover('sakrij')

Skriva skočni prozor elemenata.

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

.popover('prebaci')

Isključuje skočni prozor elemenata.

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

.popover('uništi')

Skriva i uništava popover elementa.

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

Primjer upozorenja

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

Sveti guacamole! Najbolje provjeri, ne izgledaš baš dobro.

Oh, pukni! Imate grešku!

Promijenite ovo i ono i pokušajte ponovno. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Poduzmite ovu akciju Ili učini ovo


Korištenje

Omogućite odbacivanje upozorenja putem JavaScripta:

  1. $ ( ". alert" ). upozorenje ()

Markup

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

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

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

Događaji

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

Događaj Opis
Zatvoriti Ovaj događaj aktivira se odmah kada closese pozove metoda instance.
zatvoreno Ovaj se događaj pokreće kada se upozorenje zatvori (pričekat će se da se dovrše css prijelazi).
  1. $ ( '#my-alert' ). bind ( 'zatvoreno' , funkcija () {
  2. // učini nešto…
  3. })

Primjeri upotrebe

Učinite više s gumbima. Stanja gumba za kontrolu 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.

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

Jednostruki prekidač

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

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

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Lijevo </button>
  3. <button type = "button" class = "btn btn-primary" > Srednji </button>
  4. <button type = "button" class = "btn btn-primary" > Desno </button>
  5. </div>

Radio

Dodaj data-toggle="buttons-radio"za promjenu radijskog stila na btn-grupi.

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > Lijevo </button>
  3. <button type = "button" class = "btn btn-primary" > Srednji </button>
  4. <button type = "button" class = "btn btn-primary" > Desno </button>
  5. </div>

Korištenje

Omogući gumbe putem JavaScripta:

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

Glavu gore! Možete omogućiti automatsko prebacivanje gumba pomoću data-toggleatributa.
  1. <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.

  1. <button type = "button" class = "btn" data-loading-text = "loading stuff..." > ... </button>
Glavu gore! Firefox ostaje u onemogućenom stanju tijekom učitavanja stranica . Zaobilazno rješenje za ovo je korištenje autocomplete="off".

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

  1. < vrsta gumba = "button" class = "btn" data-complete-text = "finished!" > ... </button>
  2. <skripta>
  3. $ ( '.btn' ). gumb ( 'dovršeno' )
  4. </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:

Anim pariatur cliche reprehenderit, nim eiusmod high life optužbe terry richardson ad squid. 3 Wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it lignje single-origin kava nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad veganski osim mesar vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt vjerojatno niste čuli za njih acusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, nim eiusmod high life optužbe terry richardson ad squid. 3 Wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it lignje single-origin kava nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad veganski osim mesar vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt vjerojatno niste čuli za njih acusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, nim eiusmod high life optužbe terry richardson ad squid. 3 Wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it lignje single-origin kava nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad veganski osim mesar vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt vjerojatno niste čuli za njih acusamus labore sustainable VHS.
  1. <div class = "accordion" id = "accordion2" >
  2. <div class = "accordion-group" >
  3. <div class = "accordion-heading" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. Sklopiva grupna stavka #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "accordion-body collapse in" >
  9. <div class = "accordion-inner" >
  10. Anim pariatur kliše...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "accordion-group" >
  15. <div class = "accordion-heading" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Sklopiva grupna stavka #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "collapse harmonika-tijelo" >
  21. <div class = "accordion-inner" >
  22. Anim pariatur kliše...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Također možete koristiti dodatak bez oznake harmonike. Učinite gumb za prebacivanje proširivanja i sažimanja drugog elementa.

  1. <button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. jednostavno sklopivo
  3. </button>
  4.  
  5. <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 klasuin .

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:

  1. $ ( ". kolaps" ). kolaps ()

Mogućnosti

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

Ime tip zadano opis
roditelj selektor lažno Birač If then svi sklopivi elementi pod navedenim roditeljem bit će zatvoreni kada se prikaže ova sklopiva stavka. (slično tradicionalnom ponašanju harmonike)
prebaciti Booleov pravi Prebacuje sklopivi element na poziv

Metode

.sažmi(opcije)

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

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

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

Događaj Opis
pokazati Ovaj događaj aktivira se odmah kada showse pozove metoda instance.
prikazano Ovaj se događaj pokreće kada je element sažimanja učinjen vidljivim korisniku (pričekat će da se css prijelazi završe).
sakriti Ovaj događaj se pokreće odmah nakon hidepoziva metode.
skriven Ovaj se događaj pokreće kada je element sažimanja skriven od korisnika (pričekat će da se css prijelazi završe).
  1. $ ( '#myCollapsible' ). on ( 'hidden' , function () {
  2. // učini nešto…
  3. })

Primjer

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

  1. <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 s:

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

Ime tip zadano opis
izvor niz, funkcija [ ] Izvor podataka prema kojem se postavlja upit. Može biti niz nizova ili funkcija. Funkciji se prosljeđuju dva argumenta, queryvrijednost u polju za unos i processpovratni poziv. Funkcija se može koristiti sinkrono vraćanjem izvora podataka izravno ili asinkrono putem processjednog argumenta povratnog poziva.
stavke broj 8 Najveći broj stavki za prikaz u padajućem izborniku.
minLength broj 1 Minimalna duljina znakova potrebna prije pokretanja prijedloga za automatsko dovršavanje
šibica funkcija neosjetljivo na velika i mala slova Metoda koja se koristi za utvrđivanje podudara li se upit sa stavkom. Prihvaća jedan argument itemprema kojem se ispituje upit. Pristupite trenutnom upitu pomoću this.query. Vrati booleov trueako se upit podudara.
razvrstivač funkcija točno podudaranje,
osjetljivo na velika i mala slova,
neosjetljivo na velika i mala slova
Metoda koja se koristi za sortiranje rezultata automatskog dovršavanja. Prihvaća jedan argument itemsi ima opseg instance upisa unaprijed. Navedite trenutni upit pomoću this.query.
ažurirač funkcija vraća odabranu stavku Metoda korištena za vraćanje odabrane stavke. Prihvaća jedan argument, itemi ima opseg instance typeahead.
highlighter funkcija ističe sva zadana podudaranja Metoda koja se koristi za isticanje rezultata automatskog dovršavanja. Prihvaća jedan argument itemi ima opseg instance upisa unaprijed. Treba vratiti html.

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.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Glavu gore! Morate upravljati položajem prikvačenog elementa i ponašanjem njegovog neposrednog roditelja. Pozicijom upravljaju affix, affix-top, i affix-bottom. Ne zaboravite provjeriti potencijalno sažeti nadređeni element kada se afiks aktivira jer uklanja sadržaj iz normalnog tijeka stranice.

Preko JavaScripta

Pozovite affix dodatak putem JavaScripta:

  1. $ ( '#navbar' ). dodati ()

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

Ime tip zadano opis
pomaknuti broj | funkcija | objekt 10 Pikseli za odmak od zaslona pri izračunavanju položaja pomicanja. Ako je naveden jedan broj, pomak će se primijeniti i u gornjem i u lijevom smjeru. Da biste slušali jedan smjer ili više jedinstvenih pomaka, samo navedite objekt offset: { x: 10 }. Koristite funkciju kada trebate dinamički dati pomak (korisno za neke responzivne dizajne).