Javascript Bootstrapi jaoks

Äratage Bootstrapi komponendid ellu – nüüd koos 12 kohandatud jQuery pistikprogrammiga.

Modaalid

Sujuv, kuid paindlik, kasutab traditsioonilist javascripti modaalset pistikprogrammi, millel on vaid minimaalsed vajalikud funktsioonid ja nutikad vaikeseaded.

Rippmenüüd

Selle lihtsa pistikprogrammi abil saate lisada rippmenüüd peaaegu kõigele Bootstrapis. Bootstrapil on täielik rippmenüü tugi navigeerimisribal, vahelehtedel ja pillidel.

Scrollspy

Kasutage navigeerimisriba linkide automaatseks värskendamiseks scrollspy-d, et kuvada praegune aktiivne link kerimisasendi põhjal.

Vahetatavad vahelehed

Kasutage seda pistikprogrammi, et muuta vahekaardid ja pillid kasulikumaks, võimaldades neil liikuda kohaliku sisu vahekaartide vahel.

Tööriistanõuanded

Uus võte jQuery Tipsy pistikprogrammist, tööriistavihjed ei tugine piltidele – need kasutavad animatsioonide jaoks CSS3 ja kohaliku pealkirja salvestamiseks andmeatribuute.

Popoverid *

Lisage sekundaarse teabe paigutamiseks mis tahes elemendile väikesed sisu ülekatted, nagu iPadis.

* Nõuab tööriistavihjete kaasamist

Hoiatusteated

Hoiatuste pistikprogramm on väike klass hoiatustele tiheda funktsionaalsuse lisamiseks.

Nupud

Tehke nuppudega rohkem. Juhtnupu olekud või nupurühmade loomine rohkemate komponentide, näiteks tööriistaribade jaoks.

Ahenda

Hankige põhistiile ja paindlikku tuge kokkupandavatele komponentidele, nagu akordionid ja navigeerimine.

Karussell

Looge mis tahes sisust karussell, millest soovite interaktiivset slaidiseanssi.

Kirjutage ette

Lihtne ja hõlpsasti laiendatav pistikprogramm elegantsete trükipeade kiireks loomiseks mis tahes vormis tekstisisestusega.

Üleminekud *

Lihtsate üleminekuefektide jaoks lisage üks kord bootstrap-transition.js, et modaale sisse lülitada või hoiatusi tuhmuda.

* Nõutav pistikprogrammide animatsiooni jaoks

Pea püsti! Kõik javascripti pistikprogrammid nõuavad jQuery uusimat versiooni.

Modaalide kohta

Sujuv, kuid paindlik, kasutab traditsioonilist javascripti modaalset pistikprogrammi, millel on vaid minimaalsed vajalikud funktsioonid ja nutikad vaikeseaded.

Laadige fail alla

Staatiline näide

Allpool on staatiliselt renderdatud modaal.

Live demo

Lülitage modaal JavaScripti kaudu sisse, klõpsates alloleval nupul. See libiseb alla ja tuhmub lehe ülaosast sisse.

Käivitage demo modaal

Bootstrap-modal kasutamine

Helista modaalile javascripti kaudu:

  1. $ ( '#myModal' ). modaalne ( valikud )

Valikud

Nimi tüüp vaikimisi kirjeldus
taustaks tõeväärtus tõsi Sisaldab modaalset taustaelementi. Teise võimalusena määrake statictaust, mis ei sulge modaali klõpsamisel.
klaviatuur tõeväärtus tõsi Sulgeb modaali, kui vajutada paoklahvi
näidata tõeväärtus tõsi Initsialiseerimisel kuvatakse modaal.

Märgistus

Saate modaale oma lehel hõlpsalt aktiveerida, ilma et peaksite kirjutama ühtegi JavaScripti rida. Lihtsalt määrake data-toggle="modal"kontrolleri element, millel on data-target="#foo"või href="#foo"mis vastab modaalse elemendi ID-le, ja klõpsamisel käivitatakse teie modaal.

Samuti lisage oma modaalsele eksemplarile valikute lisamiseks need täiendavate andmeatribuutidena kas juhtelemendile või modaalsele märgistusele endale.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Käivita Modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "sulge" data-dismiss = "modaalne" > × </button>
  4. <h3> Modaalne päis </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Üks hea keha… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Sule </a>
  11. <a href = "#" class = "btn btn-primary" > Salvesta muudatused </a>
  12. </div>
  13. </div>
Pea püsti! Kui soovite, et teie modaal animeeriks sisse ja välja, lisage elemendile lihtsalt .fadeklass .modal(selle toimimise nägemiseks vaadake demo) ja lisage bootstrap-transition.js.

meetodid

.modal(valikud)

Aktiveerib teie sisu modaalina. Aktsepteerib valikulisi valikuid object.

  1. $ ( '#myModal' ). modaalne ({
  2. klaviatuur : vale
  3. })

.modal('toggle')

Lülitab modaali käsitsi ümber.

  1. $ ( '#myModal' ). modaalne ( 'lülitus' )

.modal('show')

Avab modaali käsitsi.

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

.modal('hide')

Peidab modaali käsitsi.

  1. $ ( '#myModal' ). modaalne ( 'peida' )

Sündmused

Bootstrapi modaalklass paljastab mõned sündmused modaalse funktsionaalsusega ühendamiseks.

Sündmus Kirjeldus
näidata See sündmus käivitub kohe, kui showeksemplari meetod kutsutakse.
näidatud See sündmus käivitatakse, kui modaal on kasutajale nähtavaks tehtud (ootab css-i üleminekut).
peita See sündmus käivitatakse kohe, kui hideeksemplari meetod on välja kutsutud.
peidetud See sündmus käivitatakse, kui modaal on kasutaja eest peitmise lõpetanud (ootab, kuni css-i üleminekud lõppevad).
  1. $ ( '#myModal' ). on ( 'peidetud' , funktsioon () {
  2. // tee midagi…
  3. })

ScrollSpy pistikprogramm on mõeldud navigeerimissihtmärkide automaatseks värskendamiseks kerimisasendi alusel.

Laadige fail alla

Scrollspy navigeerimisriba näide

Kerige allolevat ala ja vaadake navigeerimise värskendust. Samuti tõstetakse esile rippmenüü alamüksused. Proovi seda!

@paks

Kuulutus säärised keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi, enne kui need välja müüdi. Tumblr talust lauani jalgrattaõigused mis iganes. Anim keffiyeh carles kardigan. Velit seitan mcsweeney fotokabiin 3 hunt moon irure. Cosby kampsun lomo jean lühikesed püksid, williamsburgi hoodie minim qui te pole ilmselt neist kuulnud ja kardigan usaldusfond culpa biodiesel wes anderson esteetiline. Nihil tätoveeritud accusamus, cred iroonia biodiisel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa vuntsidega rula, imev fugiat velit pitchfork habe. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat neli loko nisi, ea helvetica nulla carles. Tätoveeritud cosby kampsun food truck, mcsweeney quis non-freegan vinüül. Lo-fi wes anderson +1 sartorial. Carles mitte esteetiline treening quis gentrify. Brooklyni maitsev käsitööõlu vicekeytar deserunt.

üks

Occaecat commodo aliqua delectus. Fap käsitööõlu deserunt rula ea. Lomo jalgrattaõigused adipisicing banh mi, velit ea sunt next level locavore ühe päritoluga kohv magna veniam. High life ID vinüül, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger kott. Cred ex in, jätkusuutlik delectus consectetur fanny pack iphone.

kaks

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 oletatav. Locavore sed helvetica klišee iroonia, äikesekassid, millest te ilmselt pole kuulnudki, consequat kapuutsiga gluteenivaba lo-fi fap aliquip. Labore elit placeat, enne kui need välja müüdi, Terry richardson proident brunch nesciunt quis cosby kampsun pariatur keffiyeh ut helvetica artisan. Cardigan käsitööõlu seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Bootstrap-scrollspy.js kasutamine

Helista scrollspyle JavaScripti kaudu:

  1. $ ( '#navbar' ). scrollspy ()

Märgistus

Scrollspy käitumise hõlpsaks lisamiseks oma ülariba navigeerimisele lisage lihtsalt data-spy="scroll"element, mida soovite luurata (tavaliselt on see keha).

  1. <body data-spy = "kerige" > ... </body>
Pea püsti! Navigeerimisriba linkidel peavad olema lahendatavad ID sihtmärgid. Näiteks <a href="#home">home</a>peab vastama millelegi domeenis nagu <div id="home"></div>.

meetodid

.scrollspy('refresh')

Kui kasutate scrollspy-d koos DOM-i elementide lisamise või eemaldamisega, peate välja kutsuma värskendusmeetodi järgmiselt:

  1. $ ( '[data-spy="scroll"]' ). iga ( funktsioon () {
  2. var $spy = $ ( see ). scrollspy ( 'värskenda' )
  3. });

Valikud

Nimi tüüp vaikimisi kirjeldus
nihe number 10 Pikslid nihutamiseks ülevalt kerimise asukoha arvutamisel.

Sündmused

Sündmus Kirjeldus
aktiveerida See sündmus käivitub alati, kui scrollspy aktiveerib uue üksuse.

See pistikprogramm lisab kohaliku sisu kaudu liikumiseks kiire, dünaamilise vahekaardi ja pillifunktsiooni.

Laadige fail alla

Näidisvahekaardid

Klõpsake allolevatel vahekaartidel, et liikuda peidetud paanide vahel, isegi rippmenüüde kaudu.

Toores teksapüksid, Austin, te pole neist ilmselt kuulnud. Nesciunt tofu stumptown aliqua, retro süntekameistri puhastus. Vuntside kliše tempor, williamsburg carles vegan helvetica. Rerehenderit butcher retro keffiyeh Dreamcatcher sünt. Cosby kampsun eu banh mi, qui irure terry richardson ex squid. Aliquip placeat Salvia cillum iphone. Seitan aliquip quis kardigan Ameerika rõivad, lihunik 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.


Bootstrap-tab.js kasutamine

Lubage vahekaartide vahekaardid JavaScripti kaudu (iga vahekaart tuleb eraldi aktiveerida):

  1. $ ( '#myTab a' ). kliki ( funktsioon ( e ) {
  2. e . preventDefault ();
  3. $ ( see ). sakk ( 'näita' );
  4. })

Üksikuid vahekaarte saate aktiveerida mitmel viisil.

  1. $ ( '#myTab a[href="#profile"]' ). sakk ( 'näita' ); // Valige vahekaart nime järgi
  2. $ ( '#myTab a:first' ). sakk ( 'näita' ); // Valige esimene vahekaart
  3. $ ( '#myTab a:last' ). sakk ( 'näita' ); // Viimase vahekaardi valimine
  4. $ ( '#myTab li:eq(2) a' ). sakk ( 'näita' ); // Valige kolmas vahekaart (0-indekseeritud)

Märgistus

Saate aktiveerida vahelehe või pilli navigeerimise ilma JavaScripti kirjutamata, lihtsalt elemendi täpsustades data-toggle="tab"või peal. Klasside ja data-toggle="pill"lisamisel vahekaardile rakendatakse alglaadimisriba vahekaardi stiil.navnav-tabsul

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Avaleht </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profiil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Sõnumid </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Seaded </a></li>
  6. </ul>

meetodid

$().tab

Aktiveerib vahekaardi elemendi ja sisu konteineri. Vahekaardil peaks olema DOM-is kas konteineri sõlm data-targetvõi sihtimispunkt.href

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "aktiivne" ><a href = "#home" > Avaleht </a></li>
  3. <li><a href = "#profile" > Profiil </a></li>
  4. <li><a href = "#messages" > Sõnumid </a></li>
  5. <li><a href = "#settings" > Seaded </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "kodu" > ... </div>
  10. <div class = "tab-pane" id = "profiil" > ... </div>
  11. <div class = "tab-pane" id = "sõnumid" > ... </div>
  12. <div class = "tab-pane" id = "seaded" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( funktsioon () {
  17. $ ( '#myTab a:last' ). sakk ( 'näita' );
  18. })
  19. </script>

Sündmused

Sündmus Kirjeldus
näidata See sündmus käivitub vahekaardi kuvamisel, kuid enne uue vahekaardi kuvamist. Kasutage event.targetja event.relatedTarget, et sihtida vastavalt aktiivset vahekaarti ja eelmist aktiivset vahekaarti (kui see on saadaval).
näidatud See sündmus käivitub vahekaardi kuvamisel pärast vahekaardi kuvamist. Kasutage event.targetja event.relatedTarget, et sihtida vastavalt aktiivset vahekaarti ja eelmist aktiivset vahekaarti (kui see on saadaval).
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'näidatud' , funktsioon ( e ) {
  2. e . sihtmärk // aktiveeritud vahekaart
  3. e . relatedTarget // eelmine vahekaart
  4. })

Teave tööriistaspikrite kohta

Inspireeritud suurepärasest jQuery.tipsy pistikprogrammist, mille on kirjutanud Jason Frame; Tööriistanäpunäited on värskendatud versioon, mis ei tugine piltidele, kasutavad animatsioonide jaoks css3 ja kohaliku pealkirja salvestamiseks andmeatribuute.

Laadige fail alla

Tööriistavihjete kasutamise näide

Tööriistanäpunäidete nägemiseks hõljutage kursorit allolevate linkide kohal.

Kitsad püksid järgmise taseme keffiyeh , te pole neist ilmselt kuulnud. Fotokabiini habe toores teksast kõrgtrüki vegan messenger bag stumptown. Farmist lauale seitan, Mcsweeney fixie säästva kinoa 8-bitine Ameerika rõivas on frotee richardsoni vinüül chambray. Beard stumptown, kardiganid banh mi lomo thundercats. Tofu biodiisel williamsburg marfa, neli loko mcsweeney puhast vegan chambray. Tõeliselt irooniline käsitööline , olenemata klaviatuurist , farmist lauale mõeldud Austini Twitteri käepide freegan cred toores teksariidest ühe päritoluga kohviviirus.


Bootstrap-tooltip.js kasutamine

Käivitage kohtspikker javascripti kaudu:

  1. $ ( '#example' ). tööriistavihje ( valikud )

Valikud

Nimi tüüp vaikimisi kirjeldus
animatsioon tõeväärtus tõsi rakendage tööriistaspikrile css-i tuhmumise üleminek
paigutus string|funktsioon 'ülemine' kuidas asetada kohtspikker – top | alumine | vasakule | õige
valija string vale Kui valija on ette nähtud, delegeeritakse tööriistavihje objektid määratud sihtmärkidele.
pealkiri string | funktsiooni '' pealkirja vaikeväärtus, kui märgendit „title” pole
päästik string 'hõljuma' kuidas tööriistavihje käivitatakse – hõljutage | keskenduda | manuaal
viivitus number | objektiks 0

kohtspikri näitamise ja peitmise viivitus (ms) – ei kehti käsitsi käivitamise tüübi puhul

Kui number on esitatud, rakendatakse viivitust mõlemale peitmisele/näitamisele

Objekti struktuur on järgmine:delay: { show: 500, hide: 100 }

Pea püsti! Üksikute tööriistavihjete valikuid saab alternatiivselt määrata andmeatribuutide abil.

Märgistus

Toimivuse huvides on tööriistavihje ja Popoveri andmeapis lubatud. Kui soovite neid kasutada, määrake lihtsalt valija.

  1. <a href = "#" rel = "tooltip" title = "esimene tööriistavihje" > hõljutage kursorit minu kohal </a>

meetodid

$().tööriista vihje(valikud)

Kinnitab elemendikogule tööriistaspikri töötleja.

.tooltip('show')

Näitab elemendi kohtspikri.

  1. $ ( '#element' ). tööriistavihje ( 'näita' )

.tooltip('hide')

Peidab elemendi kohtspikri.

  1. $ ( '#element' ). tööriistavihje ( 'peida' )

.tooltip('toggle')

Lülitab elemendi kohtspikri.

  1. $ ( '#element' ). tööriistavihje ( 'lülitamine' )

Popoverite kohta

Lisage sekundaarse teabe paigutamiseks mis tahes elemendile väikesed sisu ülekatted, nagu iPadis.

* Nõuab tööriistavihje lisamist

Laadige fail alla

Hõljutuse hüpikakna näide

Hüpikakna käivitamiseks hõljutage kursorit nupu kohal.


Bootstrap-popover.js kasutamine

Luba hüpikaknad javascripti kaudu:

  1. $ ( '#example' ). popover ( valikud )

Valikud

Nimi tüüp vaikimisi kirjeldus
animatsioon tõeväärtus tõsi rakendage tööriistaspikrile css-i tuhmumise üleminek
paigutus string|funktsioon 'õige' kuidas positsioneerida hüpikakna - top | alumine | vasakule | õige
valija string vale kui valija on ette nähtud, delegeeritakse tööriistavihje objektid määratud sihtmärkidele
päästik string 'hõljuma' kuidas tööriistavihje käivitatakse – hõljutage | keskenduda | manuaal
pealkiri string | funktsiooni '' pealkirja vaikeväärtus, kui atribuut „title” puudub
sisu string | funktsiooni '' vaikimisi sisu väärtus, kui atribuut „data-content” puudub
viivitus number | objektiks 0

hüpikakna kuvamise ja peitmise viivitus (ms) – ei kehti käsitsi käivitamise tüübi puhul

Kui number on esitatud, rakendatakse viivitust mõlemale peitmisele/näitamisele

Objekti struktuur on järgmine:delay: { show: 500, hide: 100 }

Pea püsti! Üksikute hüpikakende valikuid saab alternatiivselt määrata andmeatribuutide abil.

Märgistus

Toimivuse huvides on tööriistavihje ja Popoveri andmeapis lubatud. Kui soovite neid kasutada, määrake lihtsalt valija.

meetodid

$().popover(valikud)

Initsialiseerib hüpikaknad elemendikogu jaoks.

.popover('show')

Ilmutab elementide hüpikakna.

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

.popover('hide')

Peidab elementide hüpikakna.

  1. $ ( '#element' ). popover ( 'peida' )

.popover('toggle')

Lülitab elementide hüpikakna sisse.

  1. $ ( '#element' ). hüpikakna ( 'lülita' )

Teavituste kohta

Hoiatuste pistikprogramm on väike klass hoiatustele tiheda funktsionaalsuse lisamiseks.

Lae alla

Näidishoiatused

Hoiatuste pistikprogramm töötab tavaliste hoiatusteadete ja blokeerivate sõnumite puhul.

Püha guacamole! Parim on kontrollida ennast, sa ei näe liiga hea välja.

Oh näpust! Teil on viga!

Muutke seda ja teist ning proovige uuesti. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Tehke see toiming Või tehke seda


Bootstrap-alert.js kasutamine

Lubage märguandest loobumine JavaScripti kaudu:

  1. $ ( ".alert" ). hoiatus ()

Märgistus

Lihtsalt lisage data-dismiss="alert"oma sulgemisnupule, et anda automaatselt hoiatuse sulgemise funktsioon.

  1. <a class = "sulge" data-dismiss = "alert" href = "#" > × </a>

meetodid

$().alert()

Pakub kõik hoiatused tiheda funktsionaalsusega. Kui soovite, et teie hoiatused suletuks muutuksid, veenduge, et neile oleks juba rakendatud klass .fadeja ..in

.alert('close')

Sulgeb hoiatuse.

  1. $ ( ".alert" ). hoiatus ( 'sulge' )

Sündmused

Bootstrapi hoiatusklass paljastab mõned sündmused hoiatusfunktsiooniga ühendamiseks.

Sündmus Kirjeldus
Sulge See sündmus käivitub kohe, kui closeeksemplari meetod kutsutakse.
suletud See sündmus käivitatakse, kui hoiatus on suletud (ootab, kuni css-i üleminekud lõppevad).
  1. $ ( '#minu märguanne' ). bind ( 'suletud' , funktsioon () {
  2. // tee midagi…
  3. })

Umbes

Tehke nuppudega rohkem. Juhtnupu olekud või nupurühmade loomine rohkemate komponentide, näiteks tööriistaribade jaoks.

Laadige fail alla

Kasutusnäited

Kasutage olekute ja lülituste jaoks nuppude pistikprogrammi.

Riigitu
Üks lüliti
Märkeruut
Raadio

Bootstrap-button.js kasutamine

Luba nupud JavaScripti kaudu:

  1. $ ( '.nav-tabs' ). nupp ()

Märgistus

Andmete atribuudid on nupuplugina lahutamatud. Erinevate märgistustüüpide kohta vaadake allolevat näidiskoodi.

  1. <!-- Lisa data-toggle="button", et aktiveerida ühe nupu sisselülitamine -->
  2. <button class = "btn" data-toggle = "button" > Üks lüliti </button>
  3.  
  4. <!-- Lisa data-toggle="buttons-checkbox" märkekasti stiili ümberlülitamiseks btn-groupis -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Vasak </button>
  7. <button class = "btn" > Keskmine </button>
  8. <button class = "btn" > Parem </button>
  9. </div>
  10.  
  11. <!-- Lisa data-toggle="buttons-radio" raadiostiili ümberlülitamiseks btn-groupis -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Vasak </button>
  14. <button class = "btn" > Keskmine </button>
  15. <button class = "btn" > Parem </button>
  16. </div>

meetodid

$().button('toggle')

Lülitab tõukeoleku sisse. Annab nupule välimuse, nagu see oleks aktiveeritud.

Pea püsti! Saate lubada nupu automaatse ümberlülitamise data-toggleatribuudi abil.
  1. <button class = "btn" data-toggle = "button" > </button>

$().button('laadimine')

Määrab nupu oleku laadimiseks – keelab nupu ja vahetab teksti teksti laadimiseks. Laaditav tekst tuleks nupu elemendil määratleda andmete atribuudi abil data-loading-text.

  1. <button class = "btn" data-loading-text = "kraami laadimine..." > ... </button>
Pea püsti! Firefox säilitab keelatud olekut lehe laadimise ajal . Selle probleemi lahendamiseks on kasutada autocomplete="off".

$().button('reset')

Lähtestab nupu oleku – vahetab teksti algteksti vastu.

$().button(string)

Lähtestab nupu oleku – vahetab teksti mis tahes andmetega määratletud teksti olekusse.

  1. <button class = "btn" data-complete-text = "valmis!" > ... </button>
  2. <script>
  3. $ ( '.btn' ). nupp ( 'lõpeta' )
  4. </script>

Umbes

Hankige põhistiile ja paindlikku tuge kokkupandavatele komponentidele, nagu akordionid ja navigeerimine.

Laadige fail alla

* Nõuab üleminekute pistikprogrammi kaasamist.

Akordioni näide

Ahendamise pistikprogrammi abil koostasime lihtsa akordioni stiilis vidina:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat rula dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 hundikuu tempor, sunt aliqua pani linnu peale kalmaar ühe päritoluga kohv nulla eeldanda shoreditch et. Nihil anim keffiyeh helvetica, käsitööõlu labore wes anderson cred nesciunt sapiente ea proident. Ad vegan, välja arvatud lihunik vice lomo. Retuusid occaecat käsitööõlu talust lauale, toores teksariidest esteetiline sünteetiline nesciunt te pole ilmselt kuulnud neist accusamus labore jätkusuutlik VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat rula dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 hundikuu tempor, sunt aliqua pani linnu peale kalmaar ühe päritoluga kohv nulla eeldanda shoreditch et. Nihil anim keffiyeh helvetica, käsitööõlu labore wes anderson cred nesciunt sapiente ea proident. Ad vegan, välja arvatud lihunik vice lomo. Retuusid occaecat käsitööõlu talust lauale, toores teksariidest esteetiline sünteetiline nesciunt te pole ilmselt kuulnud neist accusamus labore jätkusuutlik VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat rula dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 hundikuu tempor, sunt aliqua pani linnu peale kalmaar ühe päritoluga kohv nulla eeldanda shoreditch et. Nihil anim keffiyeh helvetica, käsitööõlu labore wes anderson cred nesciunt sapiente ea proident. Ad vegan, välja arvatud lihunik vice lomo. Retuusid occaecat käsitööõlu talust lauale, toores teksariidest esteetiline sünteetiline nesciunt te pole ilmselt kuulnud neist accusamus labore jätkusuutlik VHS.

Bootstrap-collapse.js kasutamine

Luba JavaScripti kaudu:

  1. $ ( ".collapse" ). kokku kukkuma ()

Valikud

Nimi tüüp vaikimisi kirjeldus
lapsevanem valija vale Kui valija, suletakse selle kokkupandava üksuse kuvamisel kõik määratud vanema all olevad kokkupandavad elemendid. (sarnane traditsioonilise akordioni käitumisega)
lüliti tõeväärtus tõsi Lülitab kutsumisel kokkupandava elemendi sisse

Märgistus

Lihtsalt lisage element data-toggle="collapse"ja a data-target, et määrata kokkupandava elemendi juhtimine automaatselt. Atribuut data-targetaktsepteerib ahendamise rakendamiseks css-valijat. Kindlasti lisage klass collapsekokkupandavale elemendile. Kui soovite, et see oleks vaikimisi avatud, lisage täiendav klass in.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. lihtne kokkupandav
  3. </button>
  4.  
  5. <div id = "demo" class = "ahendama" > </div>
Pea püsti! Akordionilaadse rühmahalduse lisamiseks kokkupandavale juhtelemendile lisage andmete atribuut data-parent="#selector". Selle tegevuse nägemiseks vaadake demo.

meetodid

.collapse(valikud)

Aktiveerib teie sisu kokkupandava elemendina. Aktsepteerib valikulisi valikuid object.

  1. $ ( '#myCollapsible' ). kollaps ({
  2. lülita : vale
  3. })

.collapse('toggle')

Lülitab kokkupandava elemendi kuvatud või peidetud olekuks.

.collapse('show')

Näitab kokkupandavat elementi.

.collapse('hide')

Peidab kokkupandava elemendi.

Sündmused

Bootstrapi ahendamisklass paljastab mõned sündmused, mis on seotud ahendamise funktsiooniga.

Sündmus Kirjeldus
näidata See sündmus käivitub kohe, kui showeksemplari meetod kutsutakse.
näidatud See sündmus käivitatakse, kui ahendamise element on kasutajale nähtavaks tehtud (ootab, kuni css-i üleminekud lõpetatakse).
peita See sündmus käivitatakse kohe, kui hidemeetod on välja kutsutud.
peidetud See sündmus käivitatakse, kui ahendamise element on kasutaja eest peidetud (ootab, kuni css-i üleminekud lõpetatakse).
  1. $ ( '#myCollapsible' ). on ( 'peidetud' , funktsioon () {
  2. // tee midagi…
  3. })

Umbes

Lihtne ja hõlpsasti laiendatav pistikprogramm elegantsete trükipeade kiireks loomiseks mis tahes vormis tekstisisestusega.

Laadige fail alla

Näide

Esialgsete tulemuste kuvamiseks alustage allolevale väljale tippimist.


Bootstrap-typeahead.js kasutamine

Helistage esitekstile JavaScripti kaudu:

  1. $ ( '.typeahead' ). kirjuta ette ()

Valikud

Nimi tüüp vaikimisi kirjeldus
allikas massiivi [ ] Andmeallikas, mille vastu päring teha.
esemed number 8 Rippmenüüs kuvatavate üksuste maksimaalne arv.
sobitaja funktsiooni tõstutundetu Meetod, mida kasutatakse päringu üksuse vastavuse määramiseks. Aktsepteerib ühe argumendi, mille itemvastu päringut testida. Juurdepääs praegusele päringule, kasutades this.query. Tagastab tõeväärtuse, truekui päring vastab.
sorteerija funktsiooni täpne vaste,
tõstutundlik,
tõstutundlik
Automaatse täitmise tulemuste sortimiseks kasutatav meetod. Aktsepteerib ühe argumendi itemsja sellel on tüübiesitava eksemplari ulatus. Viidake praegusele päringule this.query.
marker funktsiooni tõstab esile kõik vaikimisi vasted Automaatse täitmise tulemuste esiletõstmiseks kasutatav meetod. Aktsepteerib ühe argumendi itemja sellel on tüübiesitava eksemplari ulatus. Peaks tagastama html.

Märgistus

Lisage andmeatribuudid, et registreerida element, millel on kirjasõna.

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

meetodid

.typeahead(options)

Initsialiseerib sisendi esikirjaga.