JavaScript

Herätä Bootstrapin komponentit henkiin – nyt 13 mukautetulla jQuery-laajennuksella.

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

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

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

  1. $ ( '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.

  1. $ ( ".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ä):

  1. $ ( "#myModal" ). modaalinen () // alustettu oletusasetuksilla
  2. $ ( "#myModal" ). modaalinen ({ näppäimistö : false }) // alustettu ilman näppäimistöä
  3. $ ( "#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.

  1. var bootstrapButton = $ . fn . -painiketta . noConflict () // palauttaa $.fn.button aiemmin määritettyyn arvoon
  2. $ . 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.

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

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.

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "sulje" data-dismiss = "modal" aria-hidden = "true" > × </button>
  4. <h3> Modaalinen otsikko </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Yksi hieno ruumis… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > Sulje </a>
  11. <a href = "#" class = "btn btn-primary" > Tallenna muutokset </a>
  12. </div>
  13. </div>

Live-demo

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

  1. <!-- Painike modaalin laukaisemiseen -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Käynnistä demomodal </a>
  3.  
  4. <!-- Modaalinen -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria- labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "sulje" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > Modaalinen otsikko </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> Yksi hieno ruumis… </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Sulje </button>
  15. <button class = "btn btn-primary" > Tallenna muutokset </button>
  16. </div>
  17. </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.

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

JavaScriptin kautta

Kutsu modaali tunnuksella myModalyhdellä JavaScript-rivillä:

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

Vaihtoehdot

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

Nimi tyyppi oletuksena kuvaus
taustalla boolean totta Sisältää modaalitaustaelementin. Vaihtoehtoisesti voit määrittää statictaustalle, joka ei sulje modaalia napsautettaessa.
näppäimistö boolean totta Sulkee modaalin, kun Esc-näppäintä painetaan
näytä boolean totta Näyttää modaalin alustuksen yhteydessä.
etä polku väärä

Jos etä-URL-osoite on annettu, sisältö ladataan jQueryn loadmenetelmällä ja lisätään .modal-body. Jos käytät datasovellusliittymää, voit vaihtoehtoisesti hrefmäärittää etälähteen tunnisteen avulla. Esimerkki tästä on esitetty alla:

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

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

.modal('toggle')

Vaihtaa modaalin manuaalisesti.

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

.modal('show')

Avaa modaalin manuaalisesti.

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

.modal('piilota')

Piilottaa modaalin manuaalisesti.

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

Tapahtumat

Bootstrapin modaaliluokka paljastaa muutamia tapahtumia modaalitoimintoihin kytkeytymistä varten.

Tapahtuma Kuvaus
näytä Tämä tapahtuma käynnistyy välittömästi, kun showinstanssimenetelmää kutsutaan.
esitetty Tämä tapahtuma käynnistyy, kun modaali on asetettu käyttäjän näkyväksi (odottaa css-siirtymien valmistumista).
piilottaa Tämä tapahtuma käynnistyy välittömästi, kun hideinstanssimenetelmää on kutsuttu.
piilotettu Tämä tapahtuma käynnistyy, kun modaali on piilotettu käyttäjältä (odottaa css-siirtymien valmistumista).
  1. $ ( '#myModal' ). on ( 'hidden' , function () {
  2. // tee jotain…
  3. })

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.

@rasva

Mainos leggingsit keytar, brunssi id art party dolor labore. Pitchfork yr enim lo-fi ennen kuin ne myytiin loppuun. Tumblr maalta pöytään polkupyörän oikeudet mitä tahansa. Anim keffiyeh carles neuletakki. Velit seitan mcsweeney's Photo Booth 3 wolf moon irure. Cosby villapaita lomo jean shortsit, williamsburg huppari minim qui et luultavasti ole kuullut niistä ja neuletakainen rahasto culpa biodiesel wes anderson esteettinen. Nihil tatuoitu accusamus, cred ironia biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa viikset rullalauta, fugiat velit pitchfork -parta. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat neljä loko nisi, ea helvetica nulla carles. Tatuoitu cosby-villapusero food truck, mcsweeney's quis non freegan vinyyli. Lo-fi wes anderson +1 sartorial. Carles ei esteettinen harjoittelu quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

yksi

Occaecat commodo aliqua delectus. Fap craft beer deserunt rullalauta ea. Lomo polkupyörän oikeudet adipisicing banh mi, velit ea sunt next level locavore yhden alkuperän kahvia magna veniamissa. High life ID -vinyyli, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY mini-mesenger laukku. Cred ex in, kestävä delectus consectetur fanny pack iphone.

kaksi

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blogi, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id oletus. Locavore sed helvetica kliseeironiaa, ukkoskissoja, joista et todennäköisesti ole kuullutkaan consequat huppari gluteeniton lo-fi fap aliquip. Labore elit placeat ennen kuin ne myytiin loppuun, Terry richardson proident brunssi nesciunt quis cosby villapaita pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


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.

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

JavaScriptin kautta

Soita scrollspylle JavaScriptin kautta:

  1. $ ( '#navbar' ). scrollspy ()
Varoitus! Navigointipalkin linkeillä on oltava selvitettävät tunnistekohteet. Esimerkiksi, <a href="#home">home</a>täytyy vastata jotain domissa, kuten <div id="home"></div>.

menetelmät

.scrollspy('refresh')

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

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

Vaihtoehdot

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

Nimi tyyppi oletuksena kuvaus
offset määrä 10 Pikselit siirtymään ylhäältä, kun lasketaan vierityskohtaa.

Tapahtumat

Tapahtuma Kuvaus
aktivoida Tämä tapahtuma käynnistyy aina, kun scrollspy aktivoi uuden kohteen.

Esimerkki välilehdistä

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

Raaka denim et luultavasti ole kuullut niistä farkkushortseja Austin. Nesciunt tofu stumptown aliqua, retro syntetisaattorin puhdistusaine. Viikset klisee tempor, williamsburg carles vegaani helvetica. Reprehenderit butcher retro keffiyeh Dreamcatcher synth. Cosby villapaita eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis neuletakki amerikkalaiset vaatteet, teurastaja voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


Käyttö

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

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

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

  1. $ ( '#myTab a[href="#profile"]' ). välilehti ( 'näytä' ); // Valitse välilehti nimen mukaan
  2. $ ( '#myTab a:first' ). välilehti ( 'näytä' ); // Valitse ensimmäinen välilehti
  3. $ ( '#myTab a:last' ). välilehti ( 'näytä' ); // Valitse viimeinen välilehti
  4. $ ( '#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

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "välilehti" > Etusivu </a></li>
  3. <li><a href = "#profile" data-toggle = "välilehti" > Profiili </a></li>
  4. <li><a href = "#messages" data-toggle = "välilehti" > Viestit </a></li>
  5. <li><a href = "#settings" data-toggle = "välilehti" > Asetukset </a></li>
  6. </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.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "aktiivinen" ><a href = "#home" > Etusivu </a></li>
  3. <li><a href = "#profile" > Profiili </a></li>
  4. <li><a href = "#messages" > Viestit </a></li>
  5. <li><a href = "#settings" > Asetukset </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "koti" > ... </div>
  10. <div class = "tab-pane" id = "profiili" > ... </div>
  11. <div class = "tab-pane" id = "viestit" > ... </div>
  12. <div class = "tab-pane" id = "asetukset" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( funktio () {
  17. $ ( '#myTab a:last' ). välilehti ( 'näytä' );
  18. })
  19. </script>

Tapahtumat

Tapahtuma Kuvaus
näytä Tämä tapahtuma käynnistyy välilehtien näyttämisen yhteydessä, mutta ennen kuin uusi välilehti on näytetty. Käytä event.targetja event.relatedTargetkohdistaaksesi aktiiviseen välilehteen ja edelliseen aktiiviseen välilehteen (jos saatavilla).
esitetty Tämä tapahtuma käynnistyy välilehden näyttämisen yhteydessä, kun välilehti on näytetty. Käytä event.targetja event.relatedTargetkohdistaaksesi aktiiviseen välilehteen ja edelliseen aktiiviseen välilehteen (jos saatavilla).
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'shown' , function ( e ) {
  2. e . kohde // aktivoitu välilehti
  3. e . relatedTarget // edellinen välilehti
  4. })

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:

Tiukat housut seuraavan tason keffiyeh et luultavasti ole kuullut niistä. Photo Booth parta raaka denim kohopaino vegaaninen messenger bag stumptown. Maatilasta pöytään seitan, mcsweeneyn fixie kestävä quinoa 8-bittinen amerikkalainen vaatteet on Terry richardson vinyyli chambray. Beard stumptown, neuletakit banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, neljä loko mcsweeneyn puhdistavaa vegaani chambraya. Todella ironinen käsityöläinen , mitä tahansa keytar , scenester farm-to-table banksy Austin twitter kahva freegan cred raaka denim yksialkuperäinen kahvi virus.

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:

  1. $ ( '#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="".

Nimi tyyppi oletuksena kuvaus
animaatio boolean totta käytä css-häivytystä työkaluvihjeessä
html boolean väärä Lisää html työkaluvihjeeseen. Jos epätosi, jqueryn textmenetelmää käytetään sisällön lisäämiseen dom-alueelle. Käytä tekstiä, jos olet huolissasi XSS-hyökkäyksistä.
sijoitus merkkijono | toiminto 'huippu' työkaluvihjeen sijoittaminen - top | pohja | vasemmalle | oikein
valitsin merkkijono väärä Jos valitsin on käytössä, työkaluvihjeobjektit delegoidaan määritetyille kohteille.
otsikko merkkijono | toiminto '' oletusotsikon arvo, jos "title"-tunnistetta ei ole
laukaista merkkijono 'hover focus' kuinka työkaluvihje käynnistetään - napsauta | leijua | keskittyä | manuaalinen. Huomaa, että välilyöntityyppi on useita, välilyönnillä erotettu.
viive numero | esine 0

työkaluvihjeen näyttämisen ja piilottamisen viive (ms) - ei koske manuaalista liipaisintyyppiä

Jos numero annetaan, viivettä käytetään molempiin piilottamiseen/näyttöön

Objektin rakenne on:delay: { show: 500, hide: 100 }

kontti merkkijono | väärä väärä

Liittää työkaluvihjeen tiettyyn elementtiincontainer: 'body'

Varoitus! Vaihtoehtoisesti yksittäisten työkaluvihjeiden asetukset voidaan määrittää käyttämällä dataattribuutteja.

Merkintä

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

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

.tooltip('piilota')

Piilottaa elementin työkaluvihjeen.

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

.tooltip('toggle')

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

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

.tooltip('destroy')

Piilottaa ja tuhoaa elementin työkaluvihjeen.

  1. $ ( '#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.

Popover toppi

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover oikein

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover pohja

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover lähti

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

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:

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

Vaihtoehdot

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

Nimi tyyppi oletuksena kuvaus
animaatio boolean totta käytä css-häivytystä työkaluvihjeessä
html boolean väärä Lisää ponnahdusikkunaan html. Jos epätosi, jqueryn textmenetelmää käytetään sisällön lisäämiseen dom-alueelle. Käytä tekstiä, jos olet huolissasi XSS-hyökkäyksistä.
sijoitus merkkijono | toiminto 'oikein' miten ponnahdusikkuna sijoitetaan - top | pohja | vasemmalle | oikein
valitsin merkkijono väärä jos valitsin tarjotaan, työkaluvihjeobjektit delegoidaan määritetyille kohteille
laukaista merkkijono 'klikkaus' miten ponnahdusikkuna käynnistyy - napsauta | leijua | keskittyä | manuaalinen
otsikko merkkijono | toiminto '' otsikon oletusarvo, jos attribuutti "title" ei ole olemassa
sisältö merkkijono | toiminto '' oletussisältöarvo, jos data-content-attribuuttia ei ole
viive numero | esine 0

ponnahdusikkunan näyttämisen ja piilottamisen viive (ms) - ei koske manuaalista laukaisutyyppiä

Jos numero annetaan, viivettä käytetään molempiin piilottamiseen/näyttöön

Objektin rakenne on:delay: { show: 500, hide: 100 }

kontti merkkijono | väärä väärä

Liittää ponnahdusikkunan tiettyyn elementtiincontainer: 'body'

Varoitus! Vaihtoehtoisesti yksittäisten ponnahdusikkunoiden asetukset voidaan määrittää käyttämällä dataattribuutteja.

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.

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

.popover('piilota')

Piilottaa elementtien ponnahdusikkunan.

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

.popover('toggle')

Vaihtaa elementtien ponnahdusikkunan.

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

.popover('destroy')

Piilottaa ja tuhoaa elementin ponnahdusikkunan.

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

Esimerkki hälytyksistä

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

Pyhä guacamole! Parasta tarkistaa itsesi, et näytä liian hyvältä.

Voi pahus! Sinulla on virhe!

Vaihda tämä ja se ja yritä uudelleen. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Tee tämä toimenpide Tai tee tämä


Käyttö

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

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

Merkintä

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

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

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

Tapahtumat

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

Tapahtuma Kuvaus
kiinni Tämä tapahtuma käynnistyy välittömästi, kun closeinstanssimenetelmää kutsutaan.
suljettu Tämä tapahtuma käynnistyy, kun hälytys on suljettu (odottaa css-siirtymien valmistumista).
  1. $ ( '#my-hälytys' ). bind ( 'suljettu' , function () {
  2. // tee jotain…
  3. })

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.

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

Yksi kytkin

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

  1. <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ä.

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Vasen </button>
  3. <button type = "button" class = "btn btn-primary" > Keskimmäinen </button>
  4. <button type = "button" class = "btn btn-primary" > Oikea </button>
  5. </div>

Radio

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

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > Vasen </button>
  3. <button type = "button" class = "btn btn-primary" > Keskimmäinen </button>
  4. <button type = "button" class = "btn btn-primary" > Oikea </button>
  5. </div>

Käyttö

Ota painikkeet käyttöön JavaScriptin kautta:

  1. $ ( '.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.

Varoitus! Voit ottaa painikkeen automaattisen vaihtamisen käyttöön data-togglemääritteen avulla.
  1. <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.

  1. <button type = "button" class = "btn" data-loading-text = "ladataan tavaraa..." > ... </button>
Varoitus! Firefox pysyy poissa käytöstä koko sivulatauksen ajan . Kiertotapa tähän on käyttää autocomplete="off".

$().button('reset')

Palauttaa painikkeen tilan - vaihtaa tekstin alkuperäiseksi.

$().painike(merkkijono)

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

  1. <button type = "button" class = "btn" data-complete-text = "valmis!" > ... </button>
  2. <script>
  3. $ ( '.btn' ). painike ( 'valmis' )
  4. </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:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunssi. Food truck quinoa nesciunt laborum eiusmod. Brunssi 3 wolf moon tempor, sunt aliqua laita lintu sen päälle kalmari yksialkuperäinen kahvi nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegaani, paitsi teurastaja varapääjohtaja. Leggingsit occaecat käsityöolut maatilasta pöytään, raaka denim esteettinen syntetisaattori, et luultavasti ole kuullut niistä accusamus labore kestävää VHS:tä.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunssi. Food truck quinoa nesciunt laborum eiusmod. Brunssi 3 wolf moon tempor, sunt aliqua laita lintu sen päälle kalmari yksialkuperäinen kahvi nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegaani, paitsi teurastaja varapääjohtaja. Leggingsit occaecat käsityöolut maatilasta pöytään, raaka denim esteettinen syntetisaattori, et luultavasti ole kuullut niistä accusamus labore kestävää VHS:tä.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunssi. Food truck quinoa nesciunt laborum eiusmod. Brunssi 3 wolf moon tempor, sunt aliqua laita lintu sen päälle kalmari yksialkuperäinen kahvi nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegaani, paitsi teurastaja varapääjohtaja. Leggingsit occaecat käsityöolut maatilasta pöytään, raaka denim esteettinen syntetisaattori, et luultavasti ole kuullut niistä accusamus labore kestävää VHS:tä.
  1. <div class = "harmonika" id = "harmonika2" >
  2. <div class = "haitariryhmä" >
  3. <div class = "harmonikan otsikko" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. Kokoontaitettava ryhmänimike 1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "harmonikan runko romahtaa sisään" >
  9. <div class = "haitari-sisä" >
  10. Anim pariatur klisee...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "haitariryhmä" >
  15. <div class = "harmonikan otsikko" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Kokoontaitettava ryhmänimike 2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "harmonikan rungon romahtaminen" >
  21. <div class = "haitari-sisä" >
  22. Anim pariatur klisee...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

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

  1. <button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. yksinkertainen kokoontaitettava
  3. </button>
  4.  
  5. <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:

  1. $ ( ".collapse" ). romahtaa ()

Vaihtoehdot

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

Nimi tyyppi oletuksena kuvaus
vanhempi valitsin väärä Jos valitsin, kaikki kutistettavat elementit määritetyn ylätason alapuolella suljetaan, kun tämä kokoontaitettava kohde näytetään. (samanlainen kuin perinteinen harmonikka)
vaihtaa boolean totta Vaihtaa kokoontaitettavan elementin kutsun yhteydessä

menetelmät

.collapse(optiot)

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

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

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

Tapahtuma Kuvaus
näytä Tämä tapahtuma käynnistyy välittömästi, kun showinstanssimenetelmää kutsutaan.
esitetty Tämä tapahtuma käynnistyy, kun tiivistyselementti on tehty näkyväksi käyttäjälle (odottaa css-siirtymien valmistumista).
piilottaa Tämä tapahtuma käynnistyy välittömästi, kun hidemenetelmä on kutsuttu.
piilotettu Tämä tapahtuma käynnistyy, kun tiivistyselementti on piilotettu käyttäjältä (odottaa css-siirtymien valmistumista).
  1. $ ( '#myCollapsible' ). on ( 'hidden' , function () {
  2. // tee jotain…
  3. })

Esimerkki

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

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

  1. $ ( '.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="".

Nimi tyyppi oletuksena kuvaus
lähde matriisi, funktio [ ] Tietolähde, jota vastaan ​​haetaan. Voi olla merkkijonojen joukko tai funktio. Funktiolle välitetään kaksi argumenttia, queryarvo syöttökentässä ja processtakaisinsoitto. Funktiota voidaan käyttää synkronisesti palauttamalla tietolähde suoraan tai asynkronisesti processtakaisinkutsun yhden argumentin kautta.
kohteita määrä 8 Avattavassa valikossa näytettävien kohteiden enimmäismäärä.
minPituus määrä 1 Merkkien vähimmäispituus, joka tarvitaan ennen automaattisen täydennyksen ehdotusten käynnistämistä
sovittaja toiminto kirjainkoosta riippumaton Menetelmä, jolla määritetään, vastaako kysely kohdetta. Hyväksyy yhden argumentin, jota itemvastaan ​​kyselyä testataan. Siirry nykyiseen kyselyyn käyttämällä this.query. Palauttaa loogisen arvon true, jos kysely vastaa.
lajittelija toiminto tarkka vastaavuus,
kirjainkoolla on merkitystä,
kirjainkoolla ei merkitystä
Automaattisen täydennyksen tulosten lajittelussa käytetty menetelmä. Hyväksyy yhden argumentin itemsja sillä on typeahead-ilmentymän laajuus. Viittaa nykyiseen kyselyyn käyttämällä this.query.
päivittäjä toiminto palauttaa valitun kohteen Valitun kohteen palauttamiseen käytetty menetelmä. Hyväksyy yhden argumentin, itemja, jolla on typeahead-ilmentymän laajuus.
korostuskynä toiminto korostaa kaikki oletusosumat Automaattisen täydennyksen tulosten korostamiseen käytetty menetelmä. Hyväksyy yhden argumentin itemja sillä on typeahead-ilmentymän laajuus. Pitäisi palauttaa html.

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.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Varoitus! Sinun on hallittava kiinnitetyn elementin sijaintia ja sen välittömän vanhemman käyttäytymistä. Sijaintia ohjataan painikkeilla affix, affix-top, ja affix-bottom . Muista tarkistaa, onko mahdollisesti kutistunut yläosa, kun liite käynnistyy, koska se poistaa sisältöä sivun normaalista kulmasta.

JavaScriptin kautta

Kutsu liitelaajennus JavaScriptin kautta:

  1. $ ( '#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".

Nimi tyyppi oletuksena kuvaus
offset numero | toiminto | esine 10 Pikselit, jotka siirretään näytöstä, kun lasketaan vierityskohtaa. Jos annetaan yksi numero, siirtymää käytetään sekä ylä- että vasemmassa suunnassa. Jos haluat kuunnella yhtä suuntaa tai useita ainutlaatuisia siirtymiä, anna vain objekti offset: { x: 10 }. Käytä funktiota, kun sinun on annettava dynaamisesti siirtymä (hyödyllinen joissakin responsiivisissa malleissa).