Yksittäinen tai koottu

Laajennukset voidaan sisällyttää yksitellen (joskin niistä on vaadittu riippuvuuksia) tai kaikki kerralla. Sekä bootstrap.js että bootstrap.min.js sisältävät kaikki laajennukset yhdessä tiedostossa.

Tietojen attribuutit

Voit käyttää kaikkia Bootstrap-laajennuksia puhtaasti merkintäsovellusliittymän kautta kirjoittamatta yhtään JavaScript-riviä. Tämä on Bootstrapin ensiluokkainen API, ja sen pitäisi olla ensimmäinen huomiosi, kun käytät laajennusta.

Joissain tilanteissa voi kuitenkin olla toivottavaa poistaa tämä toiminto käytöstä. Siksi tarjoamme myös mahdollisuuden poistaa dataattribuutin API käytöstä poistamalla kaikki tapahtumat nimiavaruudesta "data-api". Tämä näyttää tältä:

$ ( 'body' ). pois ( '.data-api' )

Vaihtoehtoisesti voit kohdistaa tiettyyn laajennukseen lisäämällä vain laajennuksen nimen nimiavaruudeksi data-api-nimiavaruuden ohella seuraavasti:

$ ( 'body' ). pois päältä ( '.alert.data-api' )

Ohjelmallinen sovellusliittymä

Uskomme myös, että sinun pitäisi pystyä käyttämään kaikkia Bootstrap-laajennuksia puhtaasti JavaScript-sovellusliittymän kautta. Kaikki julkiset sovellusliittymät ovat yksittäisiä, ketjutettavia menetelmiä, ja ne palauttavat kokoelman toimineen.

$ ( ".btn.vaara" ). -painiketta ( "toggle" ). addClass ( "rasva" )

Kaikkien menetelmien tulee hyväksyä valinnainen optioobjekti, tiettyyn menetelmään kohdistettu merkkijono tai ei mitään (joka käynnistää laajennuksen oletuskäyttäytymisellä):

$ ( "#myModal" ). modaalinen () // alustettu oletusasetuksilla                       
$ ( "#myModal" ). modaalinen ({ näppäimistö : false }) // alustettu ilman näppäimistöä     
$ ( "#myModal" ). modal ( 'show' ) // alustaa ja kutsuu show'n välittömästi                

Jokainen laajennus paljastaa myös raakakonstruktorinsa "Constructor"-ominaisuuteen: $.fn.popover.Constructor. Jos haluat saada tietyn laajennuksen ilmentymän, nouta se suoraan elementistä: $('[rel=popover]').data('popover').

Ei konflikteja

Joskus on tarpeen käyttää Bootstrap-laajennuksia muiden käyttöliittymäkehysten kanssa. Näissä olosuhteissa nimitilan törmäyksiä voi toisinaan tapahtua. Jos näin tapahtuu, voit kutsua .noConflictlaajennusta, jonka arvon haluat palauttaa.

var bootstrapButton = $ . fn . -painiketta . noConflict () // palauttaa $.fn.button aiemmin määritettyyn arvoon 
$ . fn . bootstrapBtn = bootstrapButton             // anna $().bootstrapBtn käynnistystoiminto

Tapahtumat

Bootstrap tarjoaa mukautettuja tapahtumia useimpien laajennusten ainutlaatuisiin toimiin. Yleensä nämä tulevat infinitiivin ja menneen partisiipin muodossa - jossa infinitiivi (esim. show) laukeaa tapahtuman alussa ja sen menneisyyden partisiipin muoto (esim. shown) liipaisee toiminnon päätyttyä.

Kaikki infinitiiviset tapahtumat tarjoavat preventDefault-toiminnon. Tämä tarjoaa mahdollisuuden pysäyttää toiminnon suorittaminen ennen sen alkamista.

$ ( '#myModal' ). on ( 'show' , function ( e ) {   
    if (! data ) return e . preventDefault () // lopettaa modaalin näyttämisen   
})

Tietoja siirtymyksistä

Yksinkertaisia ​​siirtymätehosteita varten sisällytä bootstrap-transition.js kerran muiden JS-tiedostojen rinnalle. Jos käytät käännettyä (tai minimoitua) bootstrap.js -tiedostoa, sitä ei tarvitse sisällyttää - se on jo olemassa.

Käytä koteloita

Muutama esimerkki siirtymälaajennuksesta:

• Liukuminen tai häipyminen modaaleissa
• Välilehtien häivytys
• Häipyvät hälytykset
• Liukuvat karusellilasit

Esimerkkejä

Modaalit ovat virtaviivaisia, mutta joustavia, dialogikehotteita, joissa on vähimmäisvaatimukset ja älykkäät oletusasetukset.

Staattinen esimerkki

Renderöity modaali, jonka alatunnisteessa on otsikko, runko ja toimintosarja.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "sulje" data-dismiss = "modal" aria-hidden = "true" > × </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>

Live-demo

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

<!-- Painike modaalin laukaisemiseen -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Käynnistä demomodal </a>    
 
<!-- Modaalinen -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria- labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "sulje" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Modaalinen otsikko </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Yksi hieno ruumis… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Sulje </button>   
    <button class = "btn btn-primary" > Tallenna muutokset </button> 
  </div>
</div>

Käyttö

Tietomääritteiden kautta

Aktivoi modaali kirjoittamatta JavaScriptiä. Aseta data-toggle="modal"ohjainelementille, kuten painikkeelle, yhdessä data-target="#foo"tai href="#foo"kohdistaaksesi tiettyyn modaaliin vaihtaaksesi.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Käynnistä modaali </button>   

JavaScriptin kautta

Kutsu modaali tunnuksella myModalyhdellä JavaScript-rivillä:

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

Vaihtoehdot

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-, kuten kohdassa data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

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

Esimerkkejä

Lisää avattavia valikoita lähes mihin tahansa tällä yksinkertaisella laajennuksella, mukaan lukien navigointipalkki, välilehdet ja pillerit.

Navigointipalkin sisällä

Välilehtien sisällä

Käyttö

Tietomääritteiden kautta

Lisää data-toggle="dropdown"linkkiin tai painikkeeseen avataksesi avattavan valikon.

<div class = "pudotusvalikko" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Pudotusvalikon liipaisin </a>   
  <ul class = "dropdown-menu" role = "menu" aria- labelledby = "dLabel" >   
    ...
  </ul>
</div>

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

<div class = "pudotusvalikko" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Pudota alas
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria- labelledby = "dLabel" >   
    ...
  </ul>
</div>

JavaScriptin kautta

Kutsu avattavat valikot JavaScriptin kautta:

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

Vaihtoehdot

Ei mitään

menetelmät

$().dropdown('toggle')

Ohjelmoitu sovellusliittymä tietyn navigointipalkin tai välilehtien valikoiden vaihtamiseen.

Esimerkki navigointipalkissa

ScrollSpy-laajennus on tarkoitettu navigointikohteiden automaattiseen päivittämiseen vierityksen sijainnin perusteella. Vieritä navigointipalkin alla olevaa aluetta ja seuraa aktiivisen luokan muutosta. Myös pudotusvalikon alakohdat korostetaan.

Käyttö

Tietomääritteiden kautta

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) ja data-target=".navbar"valitsemalla käytettävä navigointi. Haluat käyttää scrollspyä .navkomponentin kanssa.

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

JavaScriptin kautta

Soita scrollspylle JavaScriptin kautta:

$ ( '#navbar' ). scrollspy ()

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

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-, kuten kohdassa data-offset="".

Tapahtumat

Esimerkki välilehdistä

Lisää nopea, dynaaminen välilehtitoiminto siirtyäksesi paikallisen sisällön ruutuihin, jopa pudotusvalikoiden kautta.

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

Esimerkkejä

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

Suorituskykysyistä työkaluvihje ja popover data-apis ovat käytössä, mikä tarkoittaa, että sinun on alustettava ne itse .

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

Neljä suuntaa

Työkaluvinkit syöttöryhmissä

Kun käytät työkaluvihjeitä ja ponnahdusikkunoita Bootstrap-syöttöryhmien kanssa, sinun on asetettava container(dokumentoitu alla) -vaihtoehto ei-toivottujen sivuvaikutusten välttämiseksi.

Käyttö

Käynnistä työkaluvihje JavaScriptin kautta:

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

Vaihtoehdot

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-, kuten kohdassa data-animation="".

Merkintä

<a href = "#" data-toggle = "tooltip" title = "ensimmäinen työkaluvihje" > 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' )

.tooltip('destroy')

Piilottaa ja tuhoaa elementin työkaluvihjeen.

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

Esimerkkejä

Lisää pieniä peittokuvia sisällöstä, kuten iPadissa, mihin tahansa elementtiin toissijaisten tietojen tallentamiseksi. Vie hiiri painikkeen päälle käynnistääksesi ponnahdusikkunan. Edellyttää työkaluvihjeen sisällyttämistä.

Staattinen popover

Käytettävissä on neljä vaihtoehtoa: ylä-, oikea-, ala- ja vasemmalle tasattuna.

dataJavaScriptistä ja attribuutin sisällöstä ei luoda ponnahdusikkunoita näkyviä merkintöjä .

Live-demo

Neljä suuntaa

Käyttö

Ota ponnahdusikkunat käyttöön JavaScriptin kautta:

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

Vaihtoehdot

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-, kuten kohdassa data-animation="".

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

.popover('destroy')

Piilottaa ja tuhoaa elementin ponnahdusikkunan.

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

Esimerkki hälytyksistä

Lisää hylkäystoiminto kaikkiin hälytysviesteihin tällä laajennuksella.

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

Käyttöesimerkkejä

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

valtiollinen

Lisää data-loading-text="Loading...", jos haluat käyttää painikkeen lataustilaa.

<button type = "button" class = "btn btn-primary" data-loading-text = "Ladataan..." > Ladataan tila </button>   

Yksi kytkin

Lisää data-toggle="button"aktivoidaksesi vaihtamisen yhdellä painikkeella.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Yksi vaihtopainike </button>   

Valintaruutu

Lisää data-toggle="buttons-checkbox"valintaruudun tyylin vaihtamiseen btn-ryhmässä.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Vasen </button>  
  <button type = "button" class = "btn btn-primary" > Keskimmäinen </button>  
  <button type = "button" class = "btn btn-primary" > Oikea </button>  
</div>

Radio

Lisää data-toggle="buttons-radio"radiotyylin vaihtamiseksi btn-ryhmässä.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Vasen </button>  
  <button type = "button" class = "btn btn-primary" > Keskimmäinen </button>  
  <button type = "button" class = "btn btn-primary" > Oikea </button>  
</div>

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.

Vaihtoehdot

Ei mitään

menetelmät

$().button('toggle')

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

<button type = "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 type = "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 type = "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:

<div class = "harmonika" id = "harmonika2" >  
  <div class = "haitariryhmä" > 
    <div class = "harmonikan otsikko" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Kokoontaitettava ryhmänimike 1
      </a>
    </div>
    <div id = "collapseOne" class = "harmonikan runko romahtaa sisään" >  
      <div class = "haitari-sisä" > 
        Anim pariatur klisee...
      </div>
    </div>
  </div>
  <div class = "haitariryhmä" > 
    <div class = "harmonikan otsikko" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Kokoontaitettava ryhmänimike 2
      </a>
    </div>
    <div id = "collapseTwo" class = "harmonikan rungon romahtaminen" >  
      <div class = "haitari-sisä" > 
        Anim pariatur klisee...
      </div>
    </div>
  </div>
</div>
...

Voit käyttää laajennusta myös ilman harmonikkamerkintää. Aseta painike vaihtamaan toisen elementin laajentamista ja kutistamista.

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

Käyttö

Tietomääritteiden kautta

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.

Lisää haitarimainen ryhmähallinta kokoontaitettavaan ohjausobjektiin lisäämällä data-attribuutti data-parent="#selector". Katso demo nähdäksesi tämän toiminnassa.

JavaScriptin kautta

Ota käyttöön manuaalisesti:

$ ( ".collapse" ). romahtaa ()

Vaihtoehdot

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-, kuten kohdassa data-parent="".

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

Esimerkki karuselli

Alla oleva diaesitys näyttää yleisen laajennuksen ja komponentin elementtien, kuten karusellin, läpi kiertämiseen.

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.

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

Kolmas miniatyyri

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.

‹ ›

<div id = "myCarousel" class = "karusellidia" >  
  <ol class = "karuselliindikaattorit" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "aktiivinen" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- 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>

Käyttö

Tietomääritteiden kautta

Käytä tietoattribuutteja karusellin sijainnin hallintaan. data-slidehyväksyy avainsanat prevtai next, joka muuttaa dian sijaintia suhteessa sen nykyiseen sijaintiin. Vaihtoehtoisesti data-slide-tovoit siirtää raakadiaindeksin karuselliin data-slide-to="2", joka siirtää dian sijainnin tiettyyn hakemistoon, joka alkaa merkillä 0.

JavaScriptin kautta

Soita karuselliin manuaalisesti:

$ ( '.karuselli' ). karuselli ()

Vaihtoehdot

Vaihtoehdot voidaan välittää dataattribuuttien tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-, kuten kohdassa data-interval="".

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.

Esimerkki

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

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

Haluat asettaa autocomplete="off"estämään oletusselaimen valikoiden näkymisen Bootstrap typeahead -pudotusvalikossa.

Käyttö

Tietomääritteiden kautta

Lisää tietoattribuutteja rekisteröidäksesi elementin, jossa on kirjoitettu etukäteistoiminto yllä olevan esimerkin mukaisesti.

JavaScriptin kautta

Kutsu kirjoitinlehti manuaalisesti:

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

Vaihtoehdot

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-, kuten kohdassa data-source="".

menetelmät

.typeahead(optiot)

Alustaa syötteen etumerkillä.

Esimerkki

Vasemmalla oleva subnavigaatio on affix-laajennuksen live-demo.

Käyttö

Tietomääritteiden kautta

Voit helposti lisätä liitetoimintoa mihin tahansa elementtiin lisäämällä vain data-spy="affix"elementtiin, jota haluat vakoilla. Käytä sitten siirtymiä määrittääksesi, milloin elementin kiinnitys on kytkettävä päälle ja pois.

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

JavaScriptin kautta

Kutsu liitelaajennus JavaScriptin kautta:

$ ( '#navbar' ). liite ()

Vaihtoehdot

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-, kuten kohdassa data-offset-top="200".