O modalitetima

Pojednostavljen, ali fleksibilan, preuzima tradicionalni javascript modalni dodatak sa samo minimalnom potrebnom funkcionalnošću i pametnim zadanim postavkama.

Statički primjer

Ispod je statički prikazan modalni.

Demo uživo

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

Korištenje bootstrap-modal

Pozovite modalni putem javascripta:

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

Opcije

Markup

Možete jednostavno aktivirati modale na svojoj stranici bez potrebe da pišete ni jedan red javascripta. Samo postavite data-toggle="modal"na element kontrolera sa data-target="#foo"ili href="#foo"koji odgovara ID-u modalnog elementa, a kada se klikne, pokrenut će vaš modalni.

Također, da dodate opcije vašoj modalnoj instanci, samo ih uključite kao dodatne atribute podataka bilo na kontrolnom elementu ili na samu modalnu markaciju.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Pokreni modalni </a>    

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

Metode

.modal(opcije)

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

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

.modal('toggle')

Ručno prebacuje modal.

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

.modal('show')

Ručno otvara modalni.

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

.modal('sakrij')

Ručno skriva modal.

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

Događaji

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

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

O padajućim menijima

Dodajte padajuće menije gotovo svemu u Bootstrapu pomoću ovog jednostavnog dodatka. Bootstrap ima punu podršku za padajući meni na navigacijskoj traci, karticama i tabletama.

Primjeri

Kliknite na padajuće navigacijske veze na navigacijskoj traci i tablete ispod da testirate padajuće menije.

• Redovna veza
• Ispustiti
  • Action
  • Another action
  • Something else here
  • Separated link
• Padajući meni 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Padajući meni 3
  • Action
  • Another action
  • Something else here
  • Separated link

Korištenje bootstrap-dropdown.js

Pozovite padajuće menije putem javascripta:

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

Markup

Da biste brzo dodali funkcionalnost padajućeg izbornika bilo kojem elementu, samo dodajte data-toggle="dropdown"i svaki važeći padajući izbornik za pokretanje automatski će se aktivirati.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Redovna veza </a></li>  
  <li class = "padajući" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Ispustiti
      <b class = "caret" ></b> 
    </a>
    <ul class = "padajući meni" > 
      <li><a href = "#" > Akcija </a></li> 
      <li><a href = "#" > Još jedna radnja </a></li> 
      <li><a href = "#" > Nešto drugo ovdje </a></li> 
      <li class = "razdjelnik" ></li> 
      <li><a href = "#" > Odvojena veza </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-pills" > 
  <li class = "padajući" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Ispustiti
      <b class = "caret" ></b> 
    </a>
    <ul class = "padajući meni" > 
      ...
    </ul>
  </li>
</ul>

Metode

$().dropdown()

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

Dodatak ScrollSpy služi za automatsko ažuriranje navigacijskih ciljeva na osnovu položaja pomicanja.

Primjer navigacijske trake sa scrollspy

Pomičite područje ispod i gledajte ažuriranje navigacije. Padajuće podstavke će također biti istaknute. Probaj!

Korištenje bootstrap-scrollspy.js

Pozovite scrollspy putem javascripta:

$ ( '#navbar' ). scrollspy ()

Markup

Da biste lako dodali ponašanje skrolovanja vašoj navigaciji na gornjoj traci, samo dodajte data-spy="scroll"elementu koji želite da špijunirate (najčešće bi to bilo tijelo).

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

Metode

.scrollspy('osvježi')

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

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

Opcije

Događaji

Ovaj dodatak dodaje brzu, dinamičnu funkcionalnost kartica i tableta za prelazak kroz lokalni sadržaj.

Primjeri kartica

Kliknite na donje kartice za prebacivanje između skrivenih okna, čak i putem padajućih menija.

• Dom
• Profil
• Ispustiti
  • @fat
  • @mdo

Korištenje bootstrap-tab.js

Omogućite tabulatore putem javascripta (svaka kartica se mora aktivirati zasebno):

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

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

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

Markup

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

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

Metode

$().tab

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

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

Događaji

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

O Alatima

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.

Primjer korištenja Tooltipova

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

Korištenje bootstrap-tooltip.js

Pokrenite opis alata putem javascripta:

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

Opcije

Markup

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

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

Metode

$().tooltip(opcije)

Prilaže rukovao opisom alata kolekciji elemenata.

.tooltip('show')

Otkriva opis elementa.

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

.tooltip('sakrij')

Sakriva opis elementa.

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

.tooltip('toggle')

Prebacuje opis elementa.

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

O popoverima

Dodajte male slojeve sadržaja, poput onih na iPadu, bilo kojem elementu za smještaj sekundarnih informacija.

* Zahtijeva Tooltip da bude uključen

Primjer skočnog skočnog prikaza

Zadržite pokazivač miša iznad dugmeta da pokrenete iskačući prozor.

Korištenje bootstrap-popover.js

Omogućite popovers putem javascripta:

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

Opcije

Markup

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

Metode

$().popover(opcije)

Inicijalizira skočne prozore za kolekciju elemenata.

.popover('show')

Otkriva iskačući element.

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

.popover('sakrij')

Sakriva skočni prozor elemenata.

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

.popover('toggle')

Prebacuje iskačući prozor elemenata.

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

O upozorenjima

Dodatak za upozorenje je mala klasa za dodavanje bliske funkcionalnosti upozorenjima.

Primjer upozorenja

Dodatak za upozorenja radi na redovnim porukama upozorenja i blokiranim porukama.

Korištenje bootstrap-alert.js

Omogućite odbacivanje upozorenja putem javascripta:

$ ( ".upozorenje" ). upozorenje ()

Markup

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

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

Metode

$().alert()

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

.alert('zatvori')

Zatvara upozorenje.

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

Događaji

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

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

O

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

Primjer upotrebe

Koristite dodatak dugmadi za stanja i prekidače.

Korištenje bootstrap-button.js

Omogućite dugmad putem javascripta:

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

Markup

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

<!-- Dodajte data-toggle="button" da aktivirate prebacivanje na jednom dugmetu -->
<button class = "btn" data-toggle = "button" > Jednostruki prekidač </button>  
 
<!-- Dodajte data-toggle="buttons-checkbox" za uključivanje stila potvrdnog okvira na btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Lijevo </button> 
  <button class = "btn" > Srednja </button> 
  <button class = "btn" > Desno </button> 
</div>
 
<!-- Dodaj data-toggle="buttons-radio" za uključivanje stila radija na btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Lijevo </button> 
  <button class = "btn" > Srednja </button> 
  <button class = "btn" > Desno </button> 
</div>

Metode

$().button('toggle')

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

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

$().button('loading')

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

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

$().button('reset')

Resetuje stanje dugmeta - menja tekst u originalni tekst.

$().button(string)

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

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

O

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

* Zahtijeva da se uključi dodatak Transitions.

Primjer harmonike

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

Korištenje bootstrap-collapse.js

Omogući putem javascripta:

$ ( ".kolaps" ). kolaps ()

Opcije

Markup

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.

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

Metode

.collapse(opcije)

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

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

.collapse('toggle')

Prebacuje sklopivi element na prikazan ili skriven.

.collapse('prikaži')

Prikazuje sklopivi element.

.collapse('sakrij')

Sakriva sklopivi element.

Događaji

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

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

O

Generički dodatak za kretanje kroz elemente. Vrteška.

Primjer vrtuljke

Pogledajte slideshow ispod.

Prva sličica

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

Korištenje bootstrap-carousel.js

Pozovite putem javascripta:

$ ( '.vrtuljak' ). vrtuljak ()

Opcije

Markup

Atributi podataka se koriste za prethodnu i sljedeću kontrolu. Pogledajte primjer oznake u nastavku.

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

Metode

.carousel (opcije)

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

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

.carousel('ciklus')

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

.carousel('pauza')

Zaustavlja vrtuljku da se kreće kroz stavke.

.carousel (broj)

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

.carousel('prev')

Prelazi na prethodnu stavku.

.carousel('sljedeći')

Prelazi na sljedeću stavku.

Događaji

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

O

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

Primjer

Počnite da kucate u polje ispod da biste prikazali rezultate unapred.

Korištenje bootstrap-typeahead.js

Pozovite tipka unaprijed putem javascripta:

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

Opcije

Markup

Dodajte atribute podataka za registraciju elementa s funkcijom unaprijed.

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

Metode

.typeahead (opcije)

Inicijalizira unos sa tipom naprijed.