Tietoja modaaleista

Virtaviivainen, mutta joustava, perinteinen javascript-modaalilaajennus, jossa on vain vähimmäisvaatimukset 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.

Jos haluat myös lisätä vaihtoehtoja modaaliinstanssiisi, sisällytä ne lisätietomääritteinä joko ohjauselementtiin tai itse modaalimerkintään.

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

<div class = "modaalinen" > 
  <div class = "modal-header" > 
    <a class = "close" data-dismiss = "modal" > × </a>  
    <h3> Modaalinen otsikko </h3>
  </div>
  <div class = "modal-body" > 
    <p> Yksi hieno ruumis… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn btn-primary" > Tallenna muutokset </a>  
    <a href = "#" class = "btn" > Sulje </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
  • Toiminta
  • Toinen toimenpide
  • Jotain muuta tässä
  • Erillinen linkki
• Pudotusvalikko 2
  • Toiminta
  • Toinen toimenpide
  • Jotain muuta tässä
  • Erillinen linkki
• Pudotusvalikko 3
  • Toiminta
  • Toinen toimenpide
  • Jotain muuta tässä
  • Erillinen linkki

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

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>  

Vaihtoehdot

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
  • @rasva
  • @mdo

Bootstrap-tab.js:n käyttö

Ota välilehdet käyttöön javascriptin kautta:

$ ( '#myTab' ). välilehti ( 'näytä' )

Merkintä

Voit aktivoida välilehden tai pillerinavigoinnin kirjoittamatta JavaScriptiä yksinkertaisesti määrittämällä data-toggle="tab"tai data-toggle="pill"elementin päälle.

<ul class = "välilehdet" > 
  <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 = "#ettings" 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 "data-target" tai "href", joka kohdistaa dom:n säilön solmuun.

<ul class = "välilehdet" > 
  <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 () {  
    $ ( '.tabs 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ökaluvihjeet ovat päivitetty versio, joka ei ole riippuvainen kuvista, uss css3:sta animaatioille ja data-attribuuteille paikallista otsikon tallennusta varten.

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.

menetelmät

$().työkaluvinkki(vaihtoehdot)

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

.tooltip('show')

Näyttää elementtien työkaluvinkin.

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

.tooltip('piilota')

Piilottaa elementtien työkaluvinkin.

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

.tooltip('toggle')

Vaihtaa elementtien 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-alerts.js:n käyttö

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

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

$ ( '.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 push-tilan. Antaa btn:lle ilmeen, 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.

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">
  simple collapsible
</button>
 
<div id="demo" class="collapse in"> … </div>

Methods

.collapse(options)

Activates your content as a collapsible element. Accepts an optional options object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Toggles a collapsible element to shown or hidden.

.collapse('show')

Shows a collapsible element.

.collapse('hide')

Hides a collapsible element.

Events

Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

$('#myCollapsible').on('hidden', function () {
  // do something…
})

About

A generic plugin for cycling through elements. A merry-go-round.

Example carousel

Watch the slideshow below.

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

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.

‹ ›

Using bootstrap-carousel.js

Call via javascript:

$('.carousel').carousel()

Options

Markup

Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.

<div class="carousel">
  <!-- Carousel items -->
  <div class="carousel-inner">
    ...
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

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

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

Events

Bootstrap's modal class exposes a few events for hooking into modal functionality.

About

A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.

Example

Start typing in the field below to show the typeahead results.

Using bootstrap-typeahead.js

Call the typeahead via javascript:

$('.typeahead').typeahead()

Options

Markup

Add data attributes to register an element with typeahead functionality.

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

Methods

.typeahead(options)

Initializes an input with a typahead.