O načinih

Poenostavljen, a prilagodljiv pristop k tradicionalnemu modalnemu vtičniku javascript z minimalno zahtevano funkcionalnostjo in pametnimi privzetimi nastavitvami.

Statični primer

Spodaj je statično upodobljen modal.

Demo v živo

Preklopite modal prek javascripta s klikom na spodnji gumb. Zdrsel bo navzdol in zbledel z vrha strani.

Uporaba bootstrap-modal

Pokličite modal prek javascripta:

$ ( '#myModal' ). modalno ( možnosti )

Opcije

Markup

Modale na svoji strani lahko preprosto aktivirate, ne da bi morali napisati eno vrstico javascripta. Preprosto nastavite data-toggle="modal"element krmilnika z data-target="#foo"ali href="#foo", ki ustreza ID-ju modalnega elementa, in ko kliknete, bo zagnal vaš modal.

Če želite svojemu modalnemu primerku dodati možnosti, jih preprosto vključite kot dodatne podatkovne atribute bodisi v kontrolni element bodisi v samo modalno oznako.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Zaženi Modal </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> Modalna glava </h3>
  </div>
  <div class = "modal-body" > 
    <p> Eno lepo telo ... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Zapri </a>   
    <a href = "#" class = "btn btn-primary" > Shrani spremembe </a>  
  </div>
</div>

Metode

.modal(možnosti)

Aktivira vašo vsebino kot modalno. Sprejema neobvezne možnosti object.

$ ( '#myModal' ). modalno ({
  tipkovnica : false 
})

.modal('preklop')

Ročno preklopi modal.

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

.modal('pokaži')

Ročno odpre modal.

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

.modal('skrij')

Ročno skrije modal.

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

Dogodki

Modalni razred Bootstrapa izpostavlja nekaj dogodkov za priključitev na modalno funkcionalnost.

$ ( '#myModal' ). on ( 'hidden' , function () {   
  // naredi kaj…
})

O spustnih menijih

S tem preprostim vtičnikom dodajte spustne menije skoraj vsemu v Bootstrap. Bootstrap ponuja popolno podporo spustnega menija v vrstici za krmarjenje, zavihkih in tabletkah.

Primeri

Kliknite na spustne povezave za navigacijo v vrstici za navigacijo in pilule spodaj, da preizkusite spustne menije.

• Redna povezava
• Spustni meni
  • Action
  • Another action
  • Something else here
  • Separated link
• Spustni meni 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Spustni meni 3
  • Action
  • Another action
  • Something else here
  • Separated link

Uporaba bootstrap-dropdown.js

Prikličite spustne menije prek javascripta:

$ ( '.dropdown-toggle' ). spustni meni ()

Markup

Za hitro dodajanje spustnega menija kateremu koli elementu preprosto dodajte data-toggle="dropdown"in vsak veljaven zagonski spustni meni bo samodejno aktiviran.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Navadna povezava </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Spustni meni
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Dejanje </a></li> 
      <li><a href = "#" > Drugo dejanje </a></li> 
      <li><a href = "#" > Tukaj je še nekaj </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Ločena povezava </a></li> 
    </ul>
  </li>
  ...
</ul>

Če želite URL-je ohraniti nedotaknjene, uporabite data-targetatribut namesto href="#".

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

Metode

$().dropdown()

Programski api za aktiviranje menijev za dano navigacijsko vrstico ali navigacijo z zavihki.

Vtičnik ScrollSpy je namenjen samodejnemu posodabljanju ciljev navigacije glede na položaj drsenja.

Primer vrstice za krmarjenje s scrollspy

Pomaknite se po spodnjem območju in si oglejte posodobitev navigacije. Označeni bodo tudi spustni podelementi. Poskusi!

Uporaba bootstrap-scrollspy.js

Pokličite Scrollspy prek javascripta:

$ ( '#navbar' ). Scrollspy ()

Markup

Če želite enostavno dodati vohunsko vedenje v svojo zgornjo vrstico, preprosto dodajte data-spy="scroll"element, za katerim želite vohuniti (najpogosteje je to telo).

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

Metode

.scrollspy('osveži')

Ko uporabljate scrollspy v povezavi z dodajanjem ali odstranjevanjem elementov iz DOM, boste morali poklicati metodo osveževanja takole:

$ ( '[data-spy="scroll"]' ). vsak ( funkcija () {  
  var $spy = $ ( to ). scrollspy ( 'osveži' )
});

Opcije

Dogodki

Ta vtičnik dodaja hitro, dinamično funkcijo zavihkov in tabletk za prehod med lokalno vsebino.

Primeri zavihkov

Kliknite spodnje zavihke, da preklapljate med skritimi podokni, tudi prek spustnih menijev.

• domov
• Profil
• Spustni meni
  • @fat
  • @mdo

Uporaba bootstrap-tab.js

Omogoči zavihke z možnostjo zavihkov prek javascripta (vsak zavihek je treba aktivirati posebej):

$ ( '#myTab a' ). kliknite ( funkcija ( e ) {  
  e . prepreči privzeto ();
  $ ( to ). zavihek ( 'pokaži' );
})

Posamezne zavihke lahko aktivirate na več načinov:

$ ( '#myTab a[href="#profile"]' ). zavihek ( 'pokaži' ); // Izberite zavihek po imenu 
$ ( '#myTab a:first' ). zavihek ( 'pokaži' ); // Izberite prvi zavihek 
$ ( '#myTab a:last' ). zavihek ( 'pokaži' ); // Izberi zadnji zavihek 
$ ( '#myTab li:eq(2) a' ). zavihek ( 'pokaži' ); // Izberite tretji zavihek (indeksirano 0) 

Markup

Navigacijo po zavihku ali tabletki lahko aktivirate brez pisanja javascripta tako, da preprosto določite data-toggle="tab"ali data-toggle="pill"na elementu. Če na zavihek dodate razrede in, navboste uporabili slog zavihka za zagon.nav-tabsul

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Domov </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Sporočila </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Nastavitve </a></li>  
</ul>

Metode

$().tab

Aktivira element zavihka in vsebnik vsebine. Zavihek mora imeti bodisi data-targetali hrefciljno usmerjen na vozlišče vsebnika v DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Domača stran </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Sporočila </a></li> 
  <li><a href = "#settings" > Nastavitve </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>
 
<skript>
  $ ( funkcija () {  
    $ ( '#myTab a:last' ). zavihek ( 'pokaži' );
  })
</script>

Dogodki

$ ( 'a[data-toggle="tab"]' ). on ( 'prikazano' , funkcija ( e ) {   
  e . cilj // aktiviran zavihek
  e . relatedTarget // prejšnji zavihek
})

O opisih orodij

Navdih za odličen vtičnik jQuery.tipsy, ki ga je napisal Jason Frame; Namigi orodij so posodobljena različica, ki se ne zanaša na slike, uporablja css3 za animacije in podatkovne atribute za lokalno shranjevanje naslovov.

Primer uporabe orodnih namigov

Premaknite miškin kazalec nad spodnje povezave, da si ogledate opise orodij:

Uporaba bootstrap-tooltip.js

Sproži opis orodja prek javascripta:

$ ( '#primer' ). opis orodja ( možnosti )

Opcije

Markup

Zaradi zmogljivosti sta omogočena orodja Tooltip in Popover data-apis. Če ju želite uporabiti, samo določite izbirno možnost.

<a href = "#" rel = "tooltip" title = "first tooltip" > premaknite miško nad mano </a>   

Metode

$().tooltip(možnosti)

Zbirki elementov priloži obravnavo namigov orodij.

.tooltip('show')

Razkrije namig elementa.

$ ( '#element' ). opis orodja ( 'pokaži' )

.tooltip('skrij')

Skrije namig elementa.

$ ( '#element' ). opis orodja ( 'skrij' )

.tooltip('preklop')

Preklopi opis orodja elementa.

$ ( '#element' ). opis orodja ( 'preklop' )

O popoverjih

Dodajte majhne prekrivne vsebine, kot so tiste na iPadu, kateremu koli elementu za namestitev sekundarnih informacij.

* Zahteva , da je vključen opis orodja

Primer pojavnega pojavnega kazalca

Premaknite miškin kazalec nad gumb, da sprožite pojavni pojav.

Uporaba bootstrap-popover.js

Omogoči pojavna okna prek javascripta:

$ ( '#primer' ). popover ( možnosti )

Opcije

Markup

Zaradi zmogljivosti sta omogočena orodja Tooltip in Popover data-apis. Če ju želite uporabiti, samo določite izbirno možnost.

Metode

$().popover(možnosti)

Inicializira pojavna okna za zbirko elementov.

.popover('pokaži')

Razkrije pojavni element elementov.

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

.popover('skrij')

Skrije pojavni pojav elementov.

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

.popover('preklop')

Preklopi pojavni pojav elementov.

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

O opozorilih

Vtičnik za opozorila je majhen razred za dodajanje bližnjih funkcij opozorilom.

Primeri opozoril

Vtičnik za opozorila deluje na običajnih opozorilnih sporočilih in blokiranih sporočilih.

Uporaba bootstrap-alert.js

Omogoči opustitev opozorila prek javascripta:

$ ( ".alert" ). opozorilo ()

Markup

Preprosto dodajte data-dismiss="alert"svojemu gumbu za zapiranje, da samodejno omogočite funkcijo zapiranja opozorila.

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

Metode

$().alert()

Zavije vsa opozorila s tesno funkcionalnostjo. Če želite, da se vaša opozorila animirajo, ko so zaprta, se prepričajte, da je zanje že uporabljen razred .fadein ..in

.alert('close')

Zapre opozorilo.

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

Dogodki

Bootstrapov razred opozoril razkrije nekaj dogodkov za vključitev v funkcijo opozorila.

$ ( '#my-alert' ). bind ( 'zaprto' , funkcija () {   
  // naredi kaj…
})

O tem

Naredite več z gumbi. Nadzorni gumb navaja ali ustvari skupine gumbov za več komponent, kot so orodne vrstice.

Primer uporabe

Uporabite vtičnik gumbov za stanja in preklope.

Uporaba bootstrap-button.js

Omogoči gumbe prek javascripta:

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

Markup

Podatkovni atributi so sestavni del vtičnika gumbov. Oglejte si spodnji primer kode za različne vrste oznak.

<!-- Dodajte data-toggle="button" za aktiviranje preklopa na enem gumbu -->
<button class = "btn" data-toggle = "button" > Enotni preklop </button>  
 
<!-- Dodajte data-toggle="buttons-checkbox" za preklop sloga potrditvenega polja v skupini btn -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Levo </button> 
  <button class = "btn" > Srednji </button> 
  <button class = "btn" > Desno </button> 
</div>
 
<!-- Dodajte data-toggle="buttons-radio" za preklapljanje radijskih slogov v skupini btn -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Levo </button> 
  <button class = "btn" > Srednji </button> 
  <button class = "btn" > Desno </button> 
</div>

Metode

$().button('preklop')

Preklopi potisno stanje. Gumb daje videz, kot da je bil aktiviran.

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

$().button('nalaganje')

Nastavi stanje gumba na nalaganje - onemogoči gumb in zamenja besedilo z besedilom za nalaganje. Nalaganje besedila mora biti definirano na elementu gumba z uporabo atributa podatkov data-loading-text.

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

$().button('reset')

Ponastavi stanje gumba - besedilo zamenja z izvirnim besedilom.

$().button(niz)

Ponastavi stanje gumba - zamenja besedilo v poljubno podatkovno definirano stanje besedila.

<button class = "btn" data-complete-text = "finished!" > ... </button>   
<skript>
  $ ( '.btn' ). gumb ( 'dokončano' )
</script>

O tem

Zagotovite si osnovne sloge in prilagodljivo podporo za zložljive komponente, kot so harmonike in navigacija.

* Zahteva, da je vključen vtičnik Transitions.

Primer harmonike

Z uporabo vtičnika za strnitev smo zgradili preprost pripomoček v slogu harmonike:

Uporaba bootstrap-collapse.js

Omogoči prek javascripta:

$ ( ".collapse" ). strni ()

Opcije

Markup

Preprosto dodajte data-toggle="collapse"in data-targetelementu za samodejno dodelitev nadzora nad zložljivim elementom. Atribut data-targetsprejme izbirnik css za uporabo strnjenja. Ne pozabite dodati razreda collapsezložljivemu elementu. Če želite, da se privzeto odpre, dodajte dodatni razred in.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  preprosto zložljivo
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

Metode

.collapse(možnosti)

Aktivira vašo vsebino kot zložljiv element. Sprejema neobvezne možnosti object.

$ ( '#myCollapsible' ). strni ({
  preklop : napačno 
})

.collapse('preklop')

Preklopi zložljiv element med prikazanim ali skritim.

.collapse('show')

Prikazuje zložljiv element.

.collapse('skrij')

Skrije zložljiv element.

Dogodki

Bootstrapov razred kolapsa razkrije nekaj dogodkov za priključitev na funkcionalnost kolapsa.

$ ( '#myCollapsible' ). on ( 'hidden' , function () {   
  // naredi kaj…
})

O tem

Generičen vtičnik za kroženje po elementih. Vrtiljak.

Primer vrtiljaka

Oglejte si diaprojekcijo spodaj.

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.

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

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

‹ ›

Uporaba bootstrap-carousel.js

Pokličite preko javascripta:

$ ( '.carousel' ). vrtiljak ()

Opcije

Markup

Podatkovni atributi se uporabljajo za prejšnji in naslednji kontrolnik. Oglejte si spodnji primer oznake.

<div id = "myCarousel" class = "carousel slide" >  
  <!-- Predmeti vrtiljaka -->
  <div class = "carousel-inner" > 
    <div class = "active item" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Krmarjenje po vrtiljaku -->
  <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 (možnosti)

Inicializira vrtiljak z izbirnimi možnostmi objectin začne krožiti med elementi.

$ ( '.carousel' ). vrtiljak ({
  interval : 2000 
})

.carousel('cikel')

Kroži skozi elemente vrtiljaka od leve proti desni.

.carousel('pavza')

Prepreči kroženje vrtiljaka med predmeti.

.carousel(število)

Preklopi vrtiljak na določen okvir (na osnovi 0, podobno matriki).

.carousel('prej')

Preklopi na prejšnji element.

.carousel('naslednji')

Preklopi na naslednji element.

Dogodki

Bootstrapov razred vrtiljaka izpostavlja dva dogodka za priključitev na funkcijo vrtiljaka.

O tem

Osnovni vtičnik, ki ga je enostavno razširiti, za hitro ustvarjanje elegantnih predpisov s poljubnim vnosom besedila.

Primer

Začnite tipkati v spodnje polje, da se prikažejo rezultati vnaprejšnjega vnašanja.

Uporaba bootstrap-typeahead.js

Pokličite tipkanje naprej prek javascripta:

$ ( '.typeahead' ). tipkanje naprej ()

Opcije

Markup

Dodajte atribute podatkov, da registrirate element s funkcijo vnaprejšnjega vpisovanja.

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

Metode

.typeahead(možnosti)

Inicializira vnos s tipkanjem naprej.