Tietoja modaaleista

Virtaviivainen, mutta joustava, perinteinen javascript-modaalilaajennus, jossa on vain vaaditut vähimmäistoiminnot ja älykkäät oletusasetukset.

Staattinen esimerkki

Alla on staattisesti renderöity modaali.

Live-demo

Vaihda modaali javascriptin kautta napsauttamalla alla olevaa painiketta. Se liukuu alas ja häivyttää sivun yläreunasta.

Bootstrap-modalin käyttö

Soita modaalille javascriptin kautta:

$ ( '#myModal' ). modaali ( vaihtoehdot )

Vaihtoehdot

Merkintä

Voit aktivoida modaalit sivullasi helposti ilman, että sinun tarvitsee kirjoittaa yhtään JavaScript-riviä. Aseta data-toggle="modal"vain ohjainelementti, jossa on data-target="#foo"tai href="#foo"joka vastaa modaalielementin tunnusta, ja kun napsautat, se käynnistää modaalisi.

Voit myös lisätä vaihtoehtoja modaaliinstanssiisi lisäämällä ne lisätietomääritteiksi joko ohjauselementtiin tai itse modaalimerkintään.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Käynnistä Modal </a>    

<div class = "modal" id = "myModal" >  
  <div class = "modal-header" > 
    <button class = "sulje" data-dismiss = "modal" > × </button>  
    <h3> Modaalinen otsikko </h3>
  </div>
  <div class = "modal-body" > 
    <p> Yksi hieno ruumis… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Sulje </a>  
    <a href = "#" class = "btn btn-primary" > Tallenna muutokset </a>  
  </div>
</div>

menetelmät

.modal(optiot)

Aktivoi sisältösi modaalina. Hyväksyy valinnaiset vaihtoehdot object.

$ ( '#myModal' ). modaalinen ({
  näppäimistö : false 
})

.modal('toggle')

Vaihtaa modaalin manuaalisesti.

$ ( '#myModal' ). modaalinen ( 'toggle' )

.modal('show')

Avaa modaalin manuaalisesti.

$ ( '#myModal' ). modaalinen ( 'show' )

.modal('piilota')

Piilottaa modaalin manuaalisesti.

$ ( '#myModal' ). modaalinen ( 'piilota' )

Tapahtumat

Bootstrapin modaaliluokka paljastaa muutamia tapahtumia modaalitoimintoihin kytkeytymistä varten.

$ ( '#myModal' ). on ( 'hidden' , function () {   
  // tee jotain…
})

Tietoja pudotusvalikoista

Lisää avattavia valikoita lähes mihin tahansa Bootstrapissa tällä yksinkertaisella laajennuksella. Bootstrap tarjoaa täyden pudotusvalikon tuen navigointipalkissa, välilehdissä ja pillereissä.

Esimerkkejä

Napsauta navigointipalkin avattavia navigointilinkkejä ja alla olevia pillereitä testataksesi avattavia valikoita.

• Säännöllinen linkki
• Pudota alas
  • Action
  • Another action
  • Something else here
  • Separated link
• Pudotusvalikko 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Pudotusvalikko 3
  • Action
  • Another action
  • Something else here
  • Separated link

Bootstrap-dropdown.js:n käyttö

Soita avattaviin valikoihin javascriptin kautta:

$ ( '.dropdown-toggle' ). pudotusvalikko ()

Merkintä

Jos haluat lisätä nopeasti pudotusvalikkotoimintoja mihin tahansa elementtiin, lisää vain, data-toggle="dropdown"ja kaikki kelvolliset käynnistysluettelot aktivoituvat automaattisesti.

<ul class = "nav nav-pills" > 
  <li class = "aktiivinen" ><a href = "#" > Tavallinen linkki </a></li>  
  <li class = "pudotusvalikko" id = "valikko1" >  
    <a class = "dropdown-toggle" data-toggle = "pudotusvalikko" href = "#menu1" >   
      Pudota alas
      <b class = "caret" ></b> 
    </a>
    <ul class = "pudotusvalikko" > 
      <li><a href = "#" > Toimi </a></li> 
      <li><a href = "#" > Toinen toiminto </a></li> 
      <li><a href = "#" > Jotain muuta tässä </a></li> 
      <li class = "jakaja" ></li> 
      <li><a href = "#" > Erillinen linkki </a></li> 
    </ul>
  </li>
  ...
</ul>

Jos haluat pitää URL-osoitteet ennallaan, käytä data-targetattribuuttia href="#".

<ul class = "nav nav-pills" > 
  <li class = "pudotusvalikko" > 
    <a class = "dropdown-toggle" data-toggle = "pudotusvalikko" data-target = "#" href = "polku/sivulle.html" >    
      Pudota alas
      <b class = "caret" ></b> 
    </a>
    <ul class = "pudotusvalikko" > 
      ...
    </ul>
  </li>
</ul>

menetelmät

$().dropdown()

Ohjelmoitu sovellusliittymä valikoiden aktivoimiseen tietylle navigointipalkin tai välilehtinavigoinnin yhteydessä.

ScrollSpy-laajennus on tarkoitettu navigointikohteiden automaattiseen päivittämiseen vierityksen sijainnin perusteella.

Esimerkki navigointipalkin kanssa scrollspy

Vieritä alla olevaa aluetta ja katso navigointipäivitys. Myös pudotusvalikon alakohdat korostetaan. Kokeile!

Bootstrap-scrollspy.js:n käyttö

Soita scrollspylle javascriptin kautta:

$ ( '#navbar' ). scrollspy ()

Merkintä

Voit helposti lisätä scrollspy-käyttäytymistä yläpalkin navigointiin lisäämällä data-spy="scroll"vain elementtiin, jota haluat vakoilla (yleensä tämä on runko).

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

menetelmät

.scrollspy('refresh')

Kun käytät scrollspyä yhdessä elementtien lisäämisen tai poistamisen kanssa DOM:sta, sinun on kutsuttava päivitysmenetelmä seuraavasti:

$ ( '[data-spy="scroll"]' ). jokainen ( funktio () {  
  var $spy = $ ( tämä ). scrollspy ( 'päivitä' )
});

Vaihtoehdot

Tapahtumat

Tämä laajennus lisää nopean, dynaamisen välilehden ja pilleritoiminnon paikallisen sisällön siirtymiseen.

Esimerkki välilehdistä

Napsauta alla olevia välilehtiä vaihtaaksesi piilotettuja ruutuja jopa pudotusvalikoiden kautta.

• Koti
• Profiili
• Pudota alas
  • @fat
  • @mdo

Bootstrap-tab.js:n käyttö

Ota välilehdet käyttöön javascriptin kautta (jokainen välilehti on aktivoitava erikseen):

$ ( '#myTab a' ). napsauta ( toiminto ( e ) {  
  e . estääDefault ();
  $ ( tämä ). välilehti ( 'näytä' );
})

Voit aktivoida yksittäisiä välilehtiä useilla tavoilla:

$ ( '#myTab a[href="#profile"]' ). välilehti ( 'näytä' ); // Valitse välilehti nimen mukaan 
$ ( '#myTab a:first' ). välilehti ( 'näytä' ); // Valitse ensimmäinen välilehti 
$ ( '#myTab a:last' ). välilehti ( 'näytä' ); // Valitse viimeinen välilehti 
$ ( '#myTab li:eq(2) a' ). välilehti ( 'näytä' ); // Valitse kolmas välilehti (0-indeksoitu) 

Merkintä

Voit aktivoida välilehden tai pillerinavigoinnin kirjoittamatta JavaScriptiä yksinkertaisesti määrittämällä data-toggle="tab"tai data-toggle="pill"elementin päälle. Luokkien ja lisääminen välilehdelle navottaa käyttöön bootstrap-välilehden tyylin.nav-tabsul

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "välilehti" > Etusivu </a></li>  
  <li><a href = "#profile" data-toggle = "välilehti" > Profiili </a></li>  
  <li><a href = "#messages" data-toggle = "välilehti" > Viestit </a></li>  
  <li><a href = "#settings" data-toggle = "välilehti" > Asetukset </a></li>  
</ul>

menetelmät

$().tab

Aktivoi välilehtielementin ja sisältösäiliön. Välilehdellä tulee olla joko a data-targettai hrefkohdistava säilön solmu DOM:ssa.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "aktiivinen" ><a href = "#home" > Etusivu </a></li>  
  <li><a href = "#profile" > Profiili </a></li> 
  <li><a href = "#messages" > Viestit </a></li> 
  <li><a href = "#settings" > Asetukset </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "koti" > ... </div>  
  <div class = "tab-pane" id = "profiili" > ... </div>  
  <div class = "tab-pane" id = "viestit" > ... </div>  
  <div class = "tab-pane" id = "asetukset" > ... </div>  
</div>
 
<script>
  $ ( funktio () {  
    $ ( '#myTab a:last' ). välilehti ( 'näytä' );
  })
</script>

Tapahtumat

$ ( 'a[data-toggle="tab"]' ). on ( 'shown' , function ( e ) {   
  e . kohde // aktivoitu välilehti
  e . relatedTarget // edellinen välilehti
})

Tietoja työkaluvihjeistä

Inspiroitunut erinomaisesta jQuery.tipsy-laajennuksesta, jonka on kirjoittanut Jason Frame; Työkaluvinkit ovat päivitetty versio, joka ei ole riippuvainen kuvista, käyttää css3:a animaatioihin ja data-attribuutteja paikalliseen otsikon tallentamiseen.

Esimerkki työkaluvihjeiden käytöstä

Vie hiiri alla olevien linkkien päälle nähdäksesi työkaluvinkit:

Bootstrap-tooltip.js:n käyttö

Käynnistä työkaluvihje javascriptin kautta:

$ ( '#esimerkki' ). työkaluvinkki ( vaihtoehdot )

Vaihtoehdot

Merkintä

Suorituskykysyistä Tooltip ja Popover data-apis ovat käytössä. Jos haluat käyttää niitä, määritä vain valintavaihtoehto.

<a href = "#" rel = "tooltip" title = "ensimmäinen työkaluvinkki" > vie hiiri päälleni </a>   

menetelmät

$().työkaluvinkki(vaihtoehdot)

Kiinnittää työkaluvihjeiden käsittelijän elementtikokoelmaan.

.tooltip('show')

Näyttää elementin työkaluvihjeen.

$ ( '#elementti' ). työkaluvihje ( 'näytä' )

.tooltip('piilota')

Piilottaa elementin työkaluvihjeen.

$ ( '#elementti' ). työkaluvihje ( 'piilota' )

.tooltip('toggle')

Vaihtaa elementin työkaluvihjeen päälle/pois.

$ ( '#elementti' ). työkaluvihje ( 'toggle' )

Tietoja popovereista

Lisää pieniä peittokuvia sisällöstä, kuten iPadissa, mihin tahansa elementtiin toissijaisten tietojen tallentamiseksi.

* Edellyttää työkaluvihjeen sisällyttämistä

Esimerkki hover popoverista

Vie hiiri painikkeen päälle käynnistääksesi ponnahdusikkunan.

Bootstrap-popover.js:n käyttö

Ota ponnahdusikkunat käyttöön javascriptin kautta:

$ ( '#esimerkki' ). ponnahdusikkuna ( vaihtoehdot )

Vaihtoehdot

Merkintä

Suorituskykysyistä Tooltip ja Popover data-apis ovat käytössä. Jos haluat käyttää niitä, määritä vain valintavaihtoehto.

menetelmät

$().popover(vaihtoehdot)

Alustaa elementtikokoelman ponnahdusikkunat.

.popover('show')

Paljastaa elementtien popoverin.

$ ( '#elementti' ). popover ( 'show' )

.popover('piilota')

Piilottaa elementtien ponnahdusikkunan.

$ ( '#elementti' ). popover ( 'piilota' )

.popover('toggle')

Vaihtaa elementtien ponnahdusikkunan.

$ ( '#elementti' ). ponnahdusikkuna ( 'toggle' )

Tietoja hälytyksistä

Alert-laajennus on pieni luokka, joka lisää läheisiä toimintoja hälytyksiin.

Esimerkki hälytyksistä

Hälytyslaajennus toimii tavallisissa hälytysviesteissä ja estoviesteissä.

Bootstrap-alert.js:n käyttö

Ota hälytyksen hylkääminen käyttöön javascriptin kautta:

$ ( ".alert" ). hälytys ()

Merkintä

Lisää data-dismiss="alert"vain sulkemispainike, niin saat automaattisesti hälytyssulkemistoiminnon.

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

menetelmät

$().alert()

Kääri kaikki hälytykset läheisiin toimintoihin. Jos haluat, että hälytykset näkyvät suljettuina, varmista, että niihin on jo sovellettu - .fadeja -luokka..in

.alert('close')

Sulkee hälytyksen.

$ ( ".alert" ). hälytys ( 'sulje' )

Tapahtumat

Bootstrapin hälytysluokka paljastaa muutamia tapahtumia hälytystoimintoihin kytkeytymistä varten.

$ ( '#my-hälytys' ). bind ( 'suljettu' , function () {   
  // tee jotain…
})

Noin

Tee enemmän painikkeilla. Ohjaa painikkeen tiloja tai luo painikeryhmiä muita osia, kuten työkalurivejä, varten.

Käyttöesimerkkejä

Käytä painikelaajennusta tiloihin ja vaihtoihin.

Bootstrap-button.js:n käyttö

Ota painikkeet käyttöön javascriptin kautta:

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

Merkintä

Dataattribuutit ovat olennainen osa painikelaajennusta. Katso alla oleva esimerkkikoodi eri merkintätyypeille.

<!-- Lisää data-toggle="button" aktivoidaksesi yhden painikkeen vaihtamisen -->
<button class = "btn" data-toggle = "button" > Yksittäinen vaihtopainike </button>  
 
<!-- Lisää data-toggle="buttons-checkbox" valintaruudun tyylin vaihtamiseen btn-groupissa -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Vasen </button> 
  <button class = "btn" > Keskimmäinen </button> 
  <button class = "btn" > Oikea </button> 
</div>
 
<!-- Lisää data-toggle="buttons-radio" radiotyylin vaihtamiseksi btn-groupissa -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Vasen </button> 
  <button class = "btn" > Keskimmäinen </button> 
  <button class = "btn" > Oikea </button> 
</div>

menetelmät

$().button('toggle')

Vaihtaa työntötilan. Antaa painikkeelle vaikutelman, että se on aktivoitu.

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

$().button('lataus')

Asettaa painikkeen tilan lataustilaan - poistaa painikkeen käytöstä ja vaihtaa tekstin lataustekstiin. Ladattava teksti tulee määrittää painikeelementissä data-attribuutin avulla data-loading-text.

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

$().button('reset')

Palauttaa painikkeen tilan - vaihtaa tekstin alkuperäiseksi.

$().painike(merkkijono)

Nollaa painikkeen tilan - vaihtaa tekstin mihin tahansa datamääritelmään tekstitilaan.

<button class = "btn" data-complete-text = "valmis!" > ... </button>   
<script>
  $ ( '.btn' ). painike ( 'valmis' )
</script>

Noin

Hanki perustyylejä ja joustava tuki kokoontaitetuille komponenteille, kuten haitarille ja navigoinnille.

* Edellyttää Transitions-laajennuksen sisällyttämistä.

Esimerkki harmonikka

Rakensimme yksinkertaisen haitarityylisen widgetin tiivistyslaajennuksen avulla:

Bootstrap-collapse.js:n käyttö

Ota käyttöön javascriptin kautta:

$ ( ".collapse" ). romahtaa ()

Vaihtoehdot

Merkintä

Lisää vain elementtiin data-toggle="collapse"ja a data-target, jos haluat määrittää automaattisesti kokoontaitettavan elementin hallinnan. Attribuutti data-targethyväksyy css-valitsimen, johon tiivistys sovelletaan. Muista lisätä luokka collapsekokoontaitettavaan elementtiin. Jos haluat sen avautuvan oletusarvoisesti, lisää ylimääräinen luokka in.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  yksinkertainen kokoontaitettava
</button>
 
<div id = "demo" class = "kutista sisään" > … </div>  

menetelmät

.collapse(optiot)

Aktivoi sisältösi kokoontaitettavana elementtinä. Hyväksyy valinnaiset vaihtoehdot object.

$ ( '#myCollapsible' ). tiivistää ({
  vaihtaa : false 
})

.collapse('toggle')

Vaihtaa kokoontaitettavan elementin näytettäväksi tai piilotetuksi.

.collapse('show')

Näyttää kokoontaitettavan elementin.

.collapse('piilota')

Piilottaa kokoontaitettavan elementin.

Tapahtumat

Bootstrapin tiivistysluokka paljastaa muutamia tapahtumia, jotka liittyvät tiivistystoimintoon.

$ ( '#myCollapsible' ). on ( 'hidden' , function () {   
  // tee jotain…
})

Noin

Yleinen laajennus elementtien läpi pyöräilyyn. Karuselli.

Esimerkki karuselli

Katso diaesitys alta.

Ensimmäinen pikkukuvatarra

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.

‹ ›

Bootstrap-carousel.js:n käyttö

Soita javascriptin kautta:

$ ( '.karuselli' ). karuselli ()

Vaihtoehdot

Merkintä

Dataattribuutteja käytetään edellisessä ja seuraavassa ohjauksessa. Katso alla oleva esimerkkimerkintä.

<div id = "myCarousel" class = "karuselli" >  
  <!-- Karusellituotteet -->
  <div class = "carousel-inner" > 
    <div class = "aktiivinen kohde" > … </div> 
    <div class = "tuote" > … </div> 
    <div class = "tuote" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "edellinen" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "seuraava" > › </a>   
</div>

menetelmät

.carousel(optiot)

Alustaa karusellin valinnaisilla vaihtoehdoilla objectja alkaa selata kohteita.

$ ( '.karuselli' ). karuselli ({
  väli : 2000 
})

.carousel('cycle')

Kiertelee karusellikohteita vasemmalta oikealle.

.carousel('pause')

Estää karusellia pyöräilemästä esineiden läpi.

.carousel(number)

Kierrättää karusellin tiettyyn kehykseen (0-pohjainen, samanlainen kuin taulukko).

.carousel('edellinen')

Siirtyy edelliseen kohtaan.

.carousel('seuraava')

Siirtyy seuraavaan kohteeseen.

Tapahtumat

Bootstrapin karuselliluokka paljastaa kaksi tapahtumaa, jotka liittyvät karusellitoimintoihin.

Noin

Helppokäyttöinen peruslaajennus, jolla voit luoda nopeasti tyylikkäitä kirjasintyyppejä minkä tahansa muodon tekstinsyötöllä.

Esimerkki

Aloita kirjoittaminen alla olevaan kenttään nähdäksesi etukirjoitustulokset.

Bootstrap-typeahead.js:n käyttö

Soita typeahead javascriptin kautta:

$ ( '.typeahead' ). kirjoittamalla eteenpäin ()

Vaihtoehdot

Merkintä

Lisää tietoattribuutteja rekisteröidäksesi elementin, jossa on etukirjoitustoiminto.

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

menetelmät

.typeahead(optiot)

Alustaa syötteen etumerkillä.