O načinima

Pojednostavljena, ali fleksibilna verzija tradicionalnog javascript modalnog dodatka sa samo minimalnom potrebnom funkcionalnošću i pametnim zadanim postavkama.

Statički primjer

Ispod je statički prikazan modal.

Demo uživo

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

Korištenje bootstrap-modala

Pozovite modal putem javascripta:

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

Mogućnosti

Markup

Modale na svojoj stranici možete jednostavno aktivirati bez potrebe da napišete i jedan redak javascripta. Samo postavite data-toggle="modal"na element kontrolera s data-target="#foo"ili href="#foo"koji odgovara ID-u modalnog elementa, a kada se klikne, pokrenut će vaš modal.

Također, da biste dodali opcije svojoj modalnoj instanci, jednostavno ih uključite kao dodatne atribute podataka na kontrolnom elementu ili samoj modalnoj oznaci.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Pokreni Modal </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" > Spremi promjene </a>  
  </div>
</div>

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…
})

O padajućim menijima

Dodajte padajuće izbornike gotovo svemu u Bootstrapu pomoću ovog jednostavnog dodatka. Bootstrap ima punu podršku padajućeg izbornika na navigacijskoj traci, karticama i pilulama.

Primjeri

Kliknite na padajuće navigacijske veze u navigacijskoj traci i pilule ispod da testirate padajuće izbornike.

• Obična veza
• Padajući izbornik
  • Action
  • Another action
  • Something else here
  • Separated link
• Padajući izbornik 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Padajući izbornik 3
  • Action
  • Another action
  • Something else here
  • Separated link

Korištenje bootstrap-dropdown.js

Pozovite padajuće izbornike putem javascripta:

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

Markup

Za brzo dodavanje funkcionalnosti padajućeg izbornika bilo kojem elementu samo dodajte data-toggle="dropdown"i svaki važeći padajući izbornik za pokretanje bit će automatski aktiviran.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Redovna veza </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Padajući izbornik
      <b class = "caret" ></b> 
    </a>
    <ul class = "padajući izbornik" > 
      <li><a href = "#" > Akcija </a></li> 
      <li><a href = "#" > Još jedna radnja </a></li> 
      <li><a href = "#" > Ovdje je još nešto </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Odvojena veza </a></li> 
    </ul>
  </li>
  ...
</ul>

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

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

Metode

$().padajući()

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

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

Primjer navigacijske trake sa scrollspyjem

Pomičite područje ispod i gledajte ažuriranje navigacije. Podstavke padajućeg izbornika također će biti istaknute. Probaj!

Korištenje bootstrap-scrollspy.js

Pozovite scrollspy putem javascripta:

$ ( '#navbar' ). Scrollspy ()

Markup

Da biste jednostavno dodali scrollspy ponašanje svojoj navigaciji gornje trake, samo dodajte data-spy="scroll"elementu koji želite špijunirati (najčešće je to tijelo).

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

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

Događaji

Ovaj dodatak dodaje brzu, dinamičnu funkciju kartice i pilule za prijelaz kroz lokalni sadržaj.

Primjeri kartica

Pritisnite donje kartice za prebacivanje između skrivenih okna, čak i putem padajućih izbornika.

• Dom
• Profil
• Padajući izbornik
  • @fat
  • @mdo

Korištenje bootstrap-tab.js

Omogući tabbable kartice putem javascripta (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 javascripta jednostavnim navođenjem data-toggle="tab"ili data-toggle="pill"na elementu. Dodavanjem klasa navi nav-tabsna karticu ulprimijenit će se stil kartice za pokretanje.

<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 = "#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>
 
<skripta>
  $ ( funkcija () {  
    $ ( '#myTab a:last' ). kartica ( 'prikaži' );
  })
</script>

Događaji

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

O opisima alata

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.

Primjer upotrebe Tooltips-a

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

Korištenje bootstrap-tooltip.js

Pokreni opis alata putem javascripta:

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

Mogućnosti

Markup

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

<a href = "#" rel = "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' )

O popoverima

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

* Zahtijeva uključivanje Tooltip -a

Primjer pojavljivanja pokazivača miša

Zadržite pokazivač iznad gumba da biste pokrenuli skočni prozor.

Korištenje bootstrap-popover.js

Omogući skočne prozore putem javascripta:

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

Mogućnosti

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' )

O upozorenjima

Dodatak upozorenja malena je klasa za dodavanje bliske funkcije upozorenjima.

Primjer upozorenja

Dodatak za upozorenja radi na uobičajenim porukama upozorenja i blok porukama.

Korištenje bootstrap-alert.js

Omogući 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…
})

Oko

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

Primjeri upotrebe

Koristite dodatak za gumbe za stanja i prekidače.

Korištenje bootstrap-button.js

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.

<!-- Dodajte data-toggle="button" za aktiviranje prebacivanja na jednom gumbu -->
<button class = "btn" data-toggle = "button" > Pojedinačni prekidač </button>  
 
<!-- Dodajte data-toggle="buttons-checkbox" za promjenu stila potvrdnog okvira na btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Lijevo </button> 
  <button class = "btn" > Srednji </button> 
  <button class = "btn" > Desno </button> 
</div>
 
<!-- Dodajte data-toggle="buttons-radio" za promjenu stila radija na btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Lijevo </button> 
  <button class = "btn" > Srednji </button> 
  <button class = "btn" > Desno </button> 
</div>

Metode

$().button('toggle')

Prebacuje stanje guranja. Daje gumbu izgled da je aktiviran.

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

Korištenje bootstrap-collapse.js

Omogući putem javascripta:

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

Mogućnosti

Markup

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.

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

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…
})

Oko

Generički dodatak za kruženje kroz elemente. Vrtuljak.

Primjer vrtuljak

Pogledajte slideshow u nastavku.

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.

‹ ›

Korištenje bootstrap-carousel.js

Poziv putem javascripta:

$ ( '.vrtuljak' ). vrtuljak ()

Mogućnosti

Markup

Atributi podataka koriste se za prethodne i sljedeće kontrole. Pogledajte primjer označavanja u nastavku.

<div id = "myCarousel" class = "carousel slide" >  
  <!-- 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>

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.

Oko

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

Primjer

Počnite upisivati ​​u donje polje kako biste prikazali rezultate s upisivanjem unaprijed.

Korištenje bootstrap-typeahead.js

Pozovite tipkanje unaprijed putem javascripta:

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

Mogućnosti

Markup

Dodajte atribute podataka za registraciju elementa s funkcijom unaprijed upisivanja.

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

Metode

.typeahead(opcije)

Inicijalizira unos s upisivanjem unaprijed.