JavaScript

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

Individuaalne või koostatud

Pluginaid saab lisada eraldi (kuigi mõnel on vaja sõltuvusi) või kõik korraga. Nii bootstrap.js kui ka bootstrap.min.js sisaldavad kõiki pistikprogramme ühes failis.

Andmete atribuudid

Saate kasutada kõiki Bootstrapi pistikprogramme puhtalt märgistus-API kaudu, kirjutamata ühtegi JavaScripti rida. See on Bootstrapi esmaklassiline API ja see peaks olema pistikprogrammi kasutamisel esimene kaalutlus.

Sellegipoolest võib mõnes olukorras olla soovitav see funktsioon välja lülitada. Seetõttu pakume ka võimalust keelata andmeatribuudi API, tühistades kõik sündmused keha nimeruumis, mille nimiruum on "data-api". See näeb välja selline:

  1. $ ( 'keha' ). välja ( '.data-api' )

Teise võimalusena lisage konkreetse pistikprogrammi sihtimiseks lihtsalt pistikprogrammi nimi nimeruumina koos data-api nimeruumiga, näiteks järgmiselt:

  1. $ ( 'keha' ). välja ( '.alert.data-api' )

Programmaatiline API

Samuti usume, et peaksite saama kasutada kõiki Bootstrapi pistikprogramme ainult JavaScripti API kaudu. Kõik avalikud API-d on üksikud, aheldatavad meetodid ja tagastavad kogu, mille alusel on tegu.

  1. $ ( ".btn.oht" ). nupp ( "lülitus" ). addClass ( "rasv" )

Kõik meetodid peaksid aktsepteerima valikuliste suvandite objekti, stringi, mis sihib konkreetset meetodit, või mitte midagi (mis käivitab vaikekäitumisega pistikprogrammi):

  1. $ ( "#myModal" ). modaal () // lähtestatud vaikeväärtustega
  2. $ ( "#myModal" ). modaalne ({ klaviatuur : false }) // lähtestati ilma klaviatuurita
  3. $ ( "#myModal" ). modal ( 'show' ) // initsialiseerib ja kutsub esile show kohe

Iga pistikprogramm avaldab ka oma töötlemata konstruktori atribuudil "Constructor": $.fn.popover.Constructor. Kui soovite hankida konkreetse pistikprogrammi eksemplari, hankige see otse elemendist: $('[rel=popover]').data('popover').

Konflikti pole

Mõnikord on vaja Bootstrapi pistikprogramme kasutada koos teiste kasutajaliidese raamistikega. Sellistel juhtudel võib aeg-ajalt tekkida nimeruumi kokkupõrkeid. Kui see juhtub, võite helistada .noConflictpistikprogrammile, mille väärtust soovite taastada.

  1. var bootstrapButton = $ . fn . nupp . noConflict () // tagastab nupu $.fn. varem määratud väärtusele
  2. $ . fn . bootstrapBtn = bootstrapButton // annab $().bootstrapBtn alglaadimisfunktsiooni

Sündmused

Bootstrap pakub kohandatud sündmusi enamiku pistikprogrammi unikaalsete toimingute jaoks. Üldjuhul on need infinitiivi ja mineviku osastava vormina – kus infinitiiv (nt show) käivitatakse sündmuse alguses ja selle mineviku osastava vorm (nt shown) vallandub tegevuse lõppedes.

Kõik infinitiivsed sündmused pakuvad preventDefault funktsiooni. See annab võimaluse toimingu sooritamine enne selle algust peatada.

  1. $ ( '#myModal' ). on ( 'show' , function ( e ) {
  2. kui (! andmed ) tagasta e . preventDefault () // peatab modaali näitamise
  3. })

Üleminekute kohta

Lihtsate üleminekuefektide jaoks lisage üks kord teiste JS-failide kõrvale bootstrap-transition.js . Kui kasutate kompileeritud (või minimeeritud) faili bootstrap.js , pole seda vaja lisada – see on juba olemas.

Kasutusjuhtumid

Mõned näited üleminekupluginast:

  • Modaalides libisemine või tuhmumine
  • Vahelehtede tuhmumine
  • Hoiatuste kadumine
  • Libistavad karussellipaneelid

Näited

Modaalid on voolujoonelised, kuid paindlikud, minimaalse nõutava funktsionaalsuse ja nutikate vaikeseadetega dialoogiviibad.

Staatiline näide

Renderdatud modaal koos päise, keha ja jaluses olevate toimingute komplektiga.

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "sulge" data-dismiss = "modal" aria-hidden = "true" > × </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" > Sule </a>
  11. <a href = "#" class = "btn btn-primary" > Salvesta muudatused </a>
  12. </div>
  13. </div>

Live demo

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

  1. <!-- Modaali käivitamise nupp -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Käivitage demo modaal </a>
  3.  
  4. <!-- Modaalne -->
  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 = "sulge" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > Modaalne päis </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> Üks hea keha… </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Sule </button>
  15. <button class = "btn btn-primary" > Salvesta muudatused </button>
  16. </div>
  17. </div>

Kasutamine

Andmeatribuutide kaudu

Aktiveerige modaal JavaScripti kirjutamata. Seadistage data-toggle="modal"kontrolleri element, nagu nupp, koos data-target="#foo"või href="#foo", et sihtida ümberlülitamiseks konkreetset modaali.

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

JavaScripti kaudu

Kutsuge modaali ID myModal-ga ühe JavaScripti reaga:

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

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-backdrop="".

Nimi tüüp vaikimisi kirjeldus
taustaks tõeväärtus tõsi Sisaldab modaalse 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.
kaugjuhtimispult tee vale

Kui antakse kaug-URL, laaditakse sisu jQuery loadmeetodi abil ja sisestatakse .modal-body. Kui kasutate andmeapi-d, võite kaugallika määramiseks kasutada ka hrefmärgendit. Selle näide on näidatud allpool:

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

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

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

Näide navigeerimisribal

ScrollSpy pistikprogramm on mõeldud navigeerimissihtmärkide automaatseks värskendamiseks kerimisasendi alusel. Kerige navigeerimisriba all olevat ala ja vaadake aktiivse klassi muutumist. Samuti tõstetakse esile rippmenüü alamüksused.

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


Kasutamine

Andmeatribuutide kaudu

Scrollspy käitumise hõlpsaks lisamiseks oma ülariba navigeerimisele lisage lihtsalt data-spy="scroll"element, mida soovite luurata (tavaliselt on see keha) ja data-target=".navbar"valige, millist navigeerimisseadet kasutada. Sooviksite komponendiga kasutada scrollspy-d .nav.

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

JavaScripti kaudu

Helista scrollspyle JavaScripti kaudu:

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

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-offset="".

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.

Näidisvahekaardid

Lisage kiire ja dünaamilise vahekaardi funktsionaalsus, et liikuda läbi kohaliku sisu paanide, 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.


Kasutamine

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

  1. $ ( '#myTab a' ). klõpsa ( funktsioon ( e ) {
  2. e . preventDefault ();
  3. $ ( see ). tab ( 'näita' );
  4. })

Üksikuid vahekaarte saate aktiveerida mitmel viisil.

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'näita' ); // Valige vahekaart nime järgi
  2. $ ( '#myTab a:first' ). tab ( 'näita' ); // Valige esimene vahekaart
  3. $ ( '#myTab a:last' ). tab ( 'näita' ); // Viimase vahekaardi valimine
  4. $ ( '#myTab li:eq(2) a' ). tab ( '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 vahekaardile data-toggle="pill"lisamine rakendab Bootstrapi vahekaardi stiili.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' ). tab ( '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. })

Näited

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

Toimivuse huvides on tööriistavihje ja hüpikandmete apis lubatud, mis tähendab, et peate need ise lähtestama .

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, Austini Twitteri käepidemega freegan cred toores teksariidest ühe päritoluga kohviviirus.

Neli suunda

Tööriistanäpunäited sisestusrühmades

Kui kasutate tööriistavihjeid ja hüpikaknaid koos Bootstrapi sisendrühmadega, peate containersoovimatute kõrvalmõjude vältimiseks määrama suvandi (dokumenteeritud allpool).


Kasutamine

Käivitage kohtspikker JavaScripti kaudu:

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

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-animation="".

Nimi tüüp vaikimisi kirjeldus
animatsioon tõeväärtus tõsi rakendage tööriistaspikrile css-i tuhmumise üleminek
html tõeväärtus vale Sisestage kohtspikrisse html. Kui see on vale, textkasutatakse dom-i sisu sisestamiseks jquery meetodit. Kui olete XSS-i rünnakute pärast mures, kasutage teksti.
paigutus string | funktsiooni 'ü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 'hover fookus' kuidas tööriistavihje käivitatakse – klõpsake | hõljuda | keskenduda | manuaal. Pange tähele, et mitmekordne suurtähtede jaotuse päästiku tüüp, tühikutega eraldatud päästiku tüübid.
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 }

konteiner string | vale vale

Lisab kohtspikri konkreetsele elemendilecontainer: 'body'

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

Märgistus

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

meetodid

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

Kinnitab tööriistavihje töötleja elementide kogumile.

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

.tooltip('hävita')

Peidab ja hävitab elemendi kohtspikri.

  1. $ ( '#element' ). tööriistavihje ( 'hävitada' )

Näited

Lisage sekundaarse teabe paigutamiseks mis tahes elemendile väikesed sisu ülekatted, nagu iPadis. Hüpikakna käivitamiseks hõljutage kursorit nupu kohal. Nõuab tööriistavihje kaasamist.

Staatiline hüpikakna

Saadaval on neli valikut: ülemine, parem, alumine ja vasakule joondatud.

Popover top

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

Popover õigus

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

Popover põhi

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

Popover lahkus

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

JavaScriptist ja atribuudi sisust ei genereerita hüpikakena kuvatavaid märgistusi data.

Live demo

Neli suunda


Kasutamine

Luba hüpikaknad JavaScripti kaudu:

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

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-animation="".

Nimi tüüp vaikimisi kirjeldus
animatsioon tõeväärtus tõsi rakendage tööriistaspikrile css-i tuhmumise üleminek
html tõeväärtus vale Sisestage hüpikaknasse html. Kui see on vale, textkasutatakse dom-i sisu sisestamiseks jquery meetodit. Kui olete XSS-i rünnakute pärast mures, kasutage teksti.
paigutus string | funktsiooni 'õ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 "klõps" kuidas popover käivitatakse - klõpsake | hõljuda | 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 }

konteiner string | vale vale

Lisab hüpikakna konkreetsele elemendilecontainer: 'body'

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

Näitab 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ülitamine' )

.popover('hävitada')

Peidab ja hävitab elemendi hüpikakna.

  1. $ ( '#element' ). popover ( 'hävitada' )

Näidishoiatused

Lisage selle pistikprogrammiga kõikidele hoiatusteadetele loobumisfunktsioon.

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


Kasutamine

Lubage märguande tühistamine 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. })

Kasutusnäited

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

Riigitu

Lisa data-loading-text="Loading...", et kasutada nupul laadimisolekut.

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

Üks lüliti

Lisa data-toggle="button", et aktiveerida ühe nupu sisselülitamine.

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > Üks lüliti </button>

Märkeruut

Lisa data-toggle="buttons-checkbox"btn-grupi stiilide sisselülitamiseks.

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Vasak </button>
  3. <button type = "button" class = "btn btn-primary" > Keskmine </button>
  4. <button type = "button" class = "btn btn-primary" > Parem </button>
  5. </div>

Raadio

Lisa data-toggle="buttons-radio"raadiostiili ümberlülitamiseks btn-grupis.

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > Vasak </button>
  3. <button type = "button" class = "btn btn-primary" > Keskmine </button>
  4. <button type = "button" class = "btn btn-primary" > Parem </button>
  5. </div>

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.

Valikud

Mitte ühtegi

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 type = "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 type = "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 type = "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.

* 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.
  1. <div class = "akordion" id = "akordion2" >
  2. <div class = "akordionirühm" >
  3. <div class = "akordioni pealkiri" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. Kokkupandav rühmaüksus nr 1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "akordioni keha kokkuvarisemine" >
  9. <div class = "akordioni sisemine" >
  10. Anim pariatur klišee...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "akordionirühm" >
  15. <div class = "akordioni pealkiri" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Kokkupandav rühmaüksus nr 2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "akordioni keha kokkuvarisemine" >
  21. <div class = "akordioni sisemine" >
  22. Anim pariatur klišee...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Pluginat saate kasutada ka ilma akordioni märgistuseta. Lülitage nupp teise elemendi laiendamise ja ahendamise vahel.

  1. <button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. lihtne kokkupandav
  3. </button>
  4.  
  5. <div id = "demo" class = "ahendama" > </div>

Kasutamine

Andmeatribuutide kaudu

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.

Akordionilaadse rühmahalduse lisamiseks kokkupandavale juhtelemendile lisage andmete atribuut data-parent="#selector". Selle tegevuse nägemiseks vaadake demo.

JavaScripti kaudu

Luba käsitsi:

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

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-parent="".

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

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

Näide

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

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

Soovite määrata autocomplete="off", et brauseri vaikemenüüd ei kuvataks Bootstrap typeahead rippmenüüs.


Kasutamine

Andmeatribuutide kaudu

Lisage andmeatribuudid, et registreerida element, millel on kirjasõna, nagu on näidatud ülaltoodud näites.

JavaScripti kaudu

Helistage trükisõna käsitsi, kasutades:

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

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-source="".

Nimi tüüp vaikimisi kirjeldus
allikas massiiv, funktsioon [ ] Andmeallikas, mille vastu päring teha. Võib olla stringide massiiv või funktsioon. Funktsioonile edastatakse kaks argumenti, queryväärtus sisestusväljal ja processtagasihelistamine. Funktsiooni saab kasutada sünkroonselt, tagastades andmeallika otse või asünkroonselt processtagasihelistamise ühe argumendi kaudu.
esemed number 8 Rippmenüüs kuvatavate üksuste maksimaalne arv.
minPikkus number 1 Minimaalne tähemärgi pikkus, mis on vajalik enne automaatse täitmise soovituste käivitamist
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.
värskendaja funktsiooni tagastab valitud üksuse Meetod, mida kasutatakse valitud üksuse tagastamiseks. Aktsepteerib ühe argumendi, mille itemja mille ulatus on tüübiesituse eksemplar.
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.

meetodid

.typeahead(options)

Initsialiseerib sisendi eelsõnaga.

Näide

Vasakpoolne alamnavigeerimine on lisandmooduli reaalajas demo.


Kasutamine

Andmeatribuutide kaudu

Mis tahes elemendile afiksi käitumise hõlpsaks lisamiseks lisage lihtsalt data-spy="affix"element, mida soovite luurata. Seejärel kasutage nihkeid, et määrata, millal elemendi kinnitamine sisse ja välja lülitada.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Pea püsti! Peate haldama kinnitatud elemendi asukohta ja selle vahetu vanema käitumist. Positsiooni juhivad affix, affix-topja affix-bottom. Ärge unustage kontrollida potentsiaalselt ahenenud vanemat, kui lisamine rakendub, kuna see eemaldab sisu lehe tavapärasest voolust.

JavaScripti kaudu

Kutsuge afiksi pistikprogrammi JavaScripti kaudu:

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

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-offset-top="200".

Nimi tüüp vaikimisi kirjeldus
nihe number | funktsioon | objektiks 10 Pikslid, mida kerimise asukoha arvutamisel ekraanist nihutada. Kui esitatakse üks number, rakendatakse nihet nii ülemises kui ka vasakpoolses suunas. Ühe suuna või mitme kordumatu nihke kuulamiseks esitage lihtsalt objekt offset: { x: 10 }. Kasutage funktsiooni, kui teil on vaja dünaamiliselt pakkuda nihet (kasulik mõne tundliku kujunduse puhul).