JavaScript

Oživite komponente Bootstrapa—sada sa 13 prilagođenih jQuery dodataka.

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:

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

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

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

  1. $ ( "#myModal" ). modal () // inicijalizirano sa zadanim vrijednostima
  2. $ ( "#myModal" ). modalni ({ keyboard : false }) // inicijaliziran bez tipkovnice
  3. $ ( "#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').

Bez sukoba

Ponekad je potrebno koristiti dodatke za Bootstrap sa drugim UI okvirima. U ovim okolnostima povremeno se mogu dogoditi kolizije prostora imena. Ako se to dogodi, možete pozvati .noConflictdodatak kojem želite vratiti vrijednost.

  1. var bootstrapButton = $ . fn . dugme . noConflict () // vraćanje $.fn.button na prethodno dodijeljenu vrijednost
  2. $ . fn . bootstrapBtn = bootstrapButton // daje $().bootstrapBtn funkcionalnost bootstrap-a

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 radnje prije nego što ona počne.

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

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.

  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" > Sačuvaj promjene </a>
  12. </div>
  13. </div>

Demo uživo

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

  1. <!-- Dugme za aktiviranje modalnog -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Pokreni demo modal </a>
  3.  
  4. <!-- Modal -->
  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" > Sačuvaj promjene </button>
  16. </div>
  17. </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.

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

Preko JavaScripta

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

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

Ime tip default opis
pozadina boolean tačno Uključuje element modalne pozadine. Alternativno, navedite staticza pozadinu koja ne zatvara modal na klik.
tastatura boolean tačno Zatvara modal kada se pritisne tipka za izlaz
show boolean tačno Prikazuje modalni kada se inicijalizira.
daljinski put false

Ako je udaljen udaljeni URL, sadržaj će se učitati putem jQuery loadmetode i ubaciti u .modal-body. Ako koristite data api, alternativno možete koristiti hrefoznaku da navedete udaljeni izvor. Primjer ovoga je prikazan u nastavku:

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

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

.modal('toggle')

Ručno prebacuje modal.

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

.modal('show')

Ručno otvara modalni.

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

.modal('sakrij')

Ručno skriva modal.

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

Događaji

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

Događaj Opis
show Ovaj događaj se aktivira odmah kada showse pozove metoda instance.
pokazano Ovaj događaj se pokreće kada modal postane vidljiv korisniku (će pričekati da se css prijelazi dovrše).
sakriti Ovaj događaj se pokreće odmah kada se hidepozove metoda instance.
skriveno Ovaj događaj se pokreće kada modal završi sa sakrivanjem od korisnika (će pričekati da se css tranzicije dovrše).
  1. $ ( '#myModal' ). on ( 'skriven' , funkcija () {
  2. // radi nešto…
  3. })

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.

@debeo

Oglas helanke keytar, brunch id art party dolor labore. Vile yr enim lo-fi prije nego što su rasprodali qui. Tumblr prava na bicikl od farme do stola. Anim keffiyeh carles kardigan. Foto štand Velit seitan mcsweeney 3 wolf moon irure. Cosby džemper lomo jean šorc, Williamsburg hoodie minimalno za koje vjerovatno niste čuli i kardigan trust fond culpa biodiesel wes anderson aesthetic. Nihil tetovirani akuzamus, cred ironija biodizel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa brkovi skateboard, adipisicing fugiat velit pitchfork brada. Freegan brada aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tetovirani cosby džemper kamion za hranu, mcsweeney's quis non freegan vinil. Lo-fi wes anderson +1 sartorial. Carlesova neestetska vježba quis gentrify. Brooklyn adipisicing craft pivo vice keytar deserunt.

jedan

Occaecat commodo aliqua delectus. Fap craft pivo deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore kafa jednog porijekla u magna veniam. High life id vinil, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minimalna 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 acceptnda. Locavore sed helvetica kliše ironija, thundercats za koje vjerovatno niste čuli kao lo-fi fap aliquip s kapuljačom bez glutena. Labore elit placeat prije nego što su se rasprodali, Terry richardson proident brunch nesciunt quis cosby džemper pariatur keffiyeh u helvetica artisan. Kardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


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.

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

Preko JavaScripta

Pozovite scrollspy putem JavaScripta:

  1. $ ( '#navbar' ). scrollspy ()
Glavu gore! Navbar veze moraju imati razlučive ciljeve ID-a. Na primjer, <a href="#home">home</a>mora odgovarati nečemu u domu kao što je <div id="home"></div>.

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:

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

Opcije

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

Ime tip default opis
offset broj 10 Pikseli za pomicanje od vrha prilikom izračunavanja položaja pomicanja.

Događaji

Događaj Opis
aktivirati Ovaj događaj se pokreće svaki put kada se nova stavka aktivira scrollspy.

Primjeri kartica

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

Sirovi teksas za koji vjerovatno niste čuli za džins šorc Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Brkovi kliše tempor, williamsburg carles veganska helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby džemper 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.


Upotreba

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

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

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

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

  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 kontejner sadržaja. Tab bi trebao imati ili data-targetciljni hrefčvor kontejnera 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. <script>
  16. $ ( funkcija () {
  17. $ ( '#myTab a:last' ). tab ( 'prikaži' );
  18. })
  19. </script>

Događaji

Događaj Opis
show Ovaj događaj se pokreće u prikazu kartice, ali prije nego što se nova kartica prikaže. Koristite event.targeti event.relatedTargetza ciljanje aktivne kartice i prethodne aktivne kartice (ako je dostupna).
pokazano Ovaj događaj se pokreće u 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

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.

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

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

Uske pantalone sledećeg nivoa kefije za koje verovatno niste čuli. Foto štand za bradu od sirovog trapera za visoku štampu veganske torbe za glasnike stumptown. Seitan od farme do stola, mcsweeney's fixie održiva 8-bitna američka odjeća od kvinoje ima vinil chambray od terry richardsona. Brada stumptown, kardigani banh mi lomo thundercats. Tofu biodizel williamsburg marfa, četiri loko mcsweeney's cleanse veganski chambray. Zaista ironičan majstor bez obzira na keytar , scenester od farme do stola Banksy Austin twitter obrađuje freegan cred sirovi traper izvorne kave jednog porijekla.

Četiri pravca

Objašnjenja u grupama za unos

Kada koristite opise alata i iskačuće poruke sa ulaznim grupama Bootstrap, morat ćete postaviti opciju container(dokumentirano u nastavku) kako biste izbjegli neželjene nuspojave.


Upotreba

Aktivirajte opis alata putem JavaScripta:

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

Ime tip default opis
animacija boolean tačno primijeniti css fade prijelaz na tooltip
html boolean false Umetnite html u opis alata. Ako je netačno, jqueryjeva textmetoda će se koristiti za umetanje sadržaja u dom. Koristite tekst ako ste zabrinuti zbog XSS napada.
plasman string | funkcija 'vrh' kako pozicionirati tooltip - vrh | dno | lijevo | u pravu
selektor string false Ako je osiguran selektor, objekti opisa alata će biti delegirani navedenim ciljevima.
naslov string | funkcija '' zadana vrijednost naslova ako oznaka `title` nije prisutna
okidač string 'hover fokus' kako se alatka pokreće - kliknite | lebdjeti | fokus | priručnik. Imajte na umu da okidač prolaza višestruko, razmaknuto, tipovi okidača.
kašnjenje broj | objekt 0

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

Ako je naveden broj, kašnjenje se primjenjuje i na sakrivanje/prikaži

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

kontejner string | false false

Dodaje opis alata određenom elementucontainer: 'body'

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

Markup

  1. <a href = "#" data-toggle = "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.

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

.tooltip('sakrij')

Sakriva opis elementa.

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

.tooltip('toggle')

Prebacuje opis elementa.

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

.tooltip('uništiti')

Sakriva i uništava opis elementa.

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

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 bottom

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.

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:

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

Ime tip default opis
animacija boolean tačno primijeniti css fade prijelaz na tooltip
html boolean false Umetnite html u skočni prozor. Ako je netačno, jqueryjeva textmetoda će se koristiti za umetanje sadržaja u dom. Koristite tekst ako ste zabrinuti zbog XSS napada.
plasman string | funkcija 'tačno' kako pozicionirati popover - vrh | dno | lijevo | u pravu
selektor string false ako je osiguran selektor, objekti opisa alata će biti delegirani navedenim ciljevima
okidač string 'klik' kako se popover pokreće - kliknite | lebdjeti | fokus | priručnik
naslov string | funkcija '' zadana vrijednost naslova ako atribut `title` nije prisutan
sadržaj string | funkcija '' zadana vrijednost sadržaja ako atribut `data-content` nije prisutan
kašnjenje broj | objekt 0

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

Ako je naveden broj, kašnjenje se primjenjuje i na sakrivanje/prikaži

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

kontejner string | false false

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

Glavu gore! Opcije za pojedinačne iskačuće stranice mogu se alternativno specificirati korištenjem atributa podataka.

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.

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

.popover('sakrij')

Sakriva skočni prozor elemenata.

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

.popover('toggle')

Prebacuje iskačući prozor elemenata.

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

.popover('uništiti')

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

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

Primjer upozorenja

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

Holy guacamole! Najbolje da se proveri, ne izgledaš baš dobro.

Oh snap! Imate grešku!

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

Preduzmi ovu akciju Ili uradi ovo


Upotreba

Omogućite odbacivanje upozorenja putem JavaScripta:

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

Markup

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

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

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

Događaji

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

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

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="Loading..."za korištenje stanja učitavanja na gumbu.

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

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > Jednostruko prebacivanje </button>

Polje za potvrdu

Dodajte data-toggle="buttons-checkbox"za uključivanje 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" > Srednja </button>
  4. <button type = "button" class = "btn btn-primary" > Desno </button>
  5. </div>

Radio

Dodaj data-toggle="buttons-radio"za uključivanje stila radija 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" > Srednja </button>
  4. <button type = "button" class = "btn btn-primary" > Desno </button>
  5. </div>

Upotreba

Omogućite dugmad putem JavaScripta:

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

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

  1. <button type = "button" class = "btn" data-loading-text = "učitavanje stvari..." > ... </button>
Glavu gore! Firefox održava stanje onemogućeno tijekom učitavanja stranice . Zaobilazno rješenje za ovo je korištenje autocomplete="off".

$().button('reset')

Resetuje stanje dugmeta - menja tekst u originalni tekst.

$().button(string)

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

  1. <button type = "button" class = "btn" data-complete-text = "gotovo!" > ... </button>
  2. <script>
  3. $ ( '.btn' ). dugme ( 'završeno' )
  4. </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:

Anim pariatur cliche reprehenderit, enim eiusmod high life optužbe Terry richardson ad lignje. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Kamion za hranu quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua stavio pticu na to lignje kafa jednog porijekla nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo labore wes anderson cred nesciunt sapiente ea proident. Ad vegan osim mesar vice lomo. Tajice occaecat craft pivo od farme do stola, sirovi traper estetski sintisajzer nesciunt za koje vjerovatno niste čuli Accuzamus Labe sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life optužbe Terry richardson ad lignje. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Kamion za hranu quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua stavio pticu na to lignje kafa jednog porijekla nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo labore wes anderson cred nesciunt sapiente ea proident. Ad vegan osim mesar vice lomo. Tajice occaecat craft pivo od farme do stola, sirovi traper estetski sintisajzer nesciunt za koje vjerovatno niste čuli Accuzamus Labe sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life optužbe Terry richardson ad lignje. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Kamion za hranu quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua stavio pticu na to lignje kafa jednog porijekla nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo labore wes anderson cred nesciunt sapiente ea proident. Ad vegan osim mesar vice lomo. Tajice occaecat craft pivo od farme do stola, sirovi traper estetski sintisajzer nesciunt za koje vjerovatno niste čuli Accuzamus Labe sustainable VHS.
  1. <div class = "harmonika" id = "harmonika2" >
  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 = "urušavanje tijela harmonike" >
  9. <div class = "harmonika-unutrašnja" >
  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 = "kolaps tijela harmonike" >
  21. <div class = "harmonika-unutrašnja" >
  22. Anim pariatur kliše...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Dodatak možete koristiti i bez oznake harmonike. Napravite dugme za prebacivanje proširenja 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>

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:

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

Ime tip default opis
roditelj selektor false Ako je selektor tada će svi sklopivi elementi ispod navedenog roditelja biti zatvoreni kada se prikaže ova sklopiva stavka. (slično tradicionalnom ponašanju harmonike)
preklopiti boolean tačno Uključuje sklopivi element pri pozivanju

Metode

.collapse(opcije)

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

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

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

Događaj Opis
show Ovaj događaj se aktivira odmah kada showse pozove metoda instance.
pokazano Ovaj događaj se pokreće kada se element sažimanja učini vidljivim korisniku (će čekati da se css prijelazi dovrše).
sakriti Ovaj događaj se pokreće odmah kada je hidemetoda pozvana.
skriveno Ovaj događaj se pokreće kada je element sažimanja skriven od korisnika (će čekati da se css prijelazi dovrše).
  1. $ ( '#myCollapsible' ). on ( 'skriven' , funkcija () {
  2. // radi nešto…
  3. })

Primjer

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

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

Želite da podesite autocomplete="off"da sprečite da se podrazumevani meniji pretraživača pojavljuju preko padajućeg menija Bootstrap 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:

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

Ime tip default opis
izvor niz, funkcija [ ] Izvor podataka za 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 sinhrono vraćanjem izvora podataka direktno ili asinhrono putem processjednog argumenta povratnog poziva.
stavke broj 8 Maksimalan broj stavki za prikaz u padajućem izborniku.
minLength broj 1 Minimalna dužina znakova potrebna prije pokretanja prijedloga za automatsko dovršavanje
matcher funkcija neosjetljivo na velika i mala slova Metoda koja se koristi za određivanje da li se upit podudara sa stavkom. Prihvata jedan argument, itemprotiv kojeg se testira upit. Pristupite trenutnom upitu pomoću this.query. Vrati logički trueako se upit podudara.
sorter funkcija potpuno podudaranje,
osjetljivo na velika i
mala slova
Metoda koja se koristi za sortiranje rezultata autodovršavanja. Prihvata jedan argument itemsi ima opseg instance ispred tipa. Referirajte trenutni upit sa this.query.
updater funkcija vraća odabranu stavku Metoda koja se koristi za vraćanje odabrane stavke. Prihvata jedan argument, itemi ima opseg instance ispred tipa.
highlighter funkcija ističe sva zadana podudaranja Metoda koja se koristi za isticanje rezultata autodovršavanja. Prihvata jedan argument itemi ima opseg instance ispred tipa. Trebao bi vratiti html.

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.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Glavu gore! Morate upravljati pozicijom zakačenog elementa i ponašanjem njegovog neposrednog roditelja. Položaj kontroliraju affix, affix-top, i affix-bottom. Ne zaboravite provjeriti postoji li potencijalno srušeni roditelj kada se afiks pokrene jer uklanja sadržaj iz normalnog toka stranice.

Preko JavaScripta

Pozovite dodatak afiksa putem JavaScripta:

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

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

Ime tip default opis
offset broj | funkcija | objekt 10 Pikseli za pomicanje od ekrana prilikom izračunavanja položaja pomicanja. Ako je naveden jedan broj, pomak će se primijeniti u gornjem i lijevom smjeru. Za slušanje jednog smjera ili više jedinstvenih pomaka, samo navedite objekt offset: { x: 10 }. Koristite funkciju kada trebate dinamički osigurati pomak (korisno za neke responsive dizajne).