JavaScript

Jepni në jetë komponentët e Bootstrap—tani me 13 shtojca të personalizuara jQuery.

Kokat lart! Këto dokumente janë për v2.3.2, i cili nuk mbështetet më zyrtarisht. Shikoni versionin më të fundit të Bootstrap!

Individuale ose të përpiluara

Shtojcat mund të përfshihen individualisht (megjithëse disa kanë nevojë për varësi), ose të gjitha menjëherë. Të dy bootstrap.js dhe bootstrap.min.js përmbajnë të gjitha shtojcat në një skedar të vetëm.

Atributet e të dhënave

Ju mund të përdorni të gjitha shtojcat e Bootstrap thjesht përmes API-së së shënjimit pa shkruar një rresht të vetëm JavaScript. Ky është API i klasit të parë të Bootstrap dhe duhet të jetë konsiderata juaj e parë kur përdorni një shtojcë.

Thënë kështu, në disa situata mund të jetë e dëshirueshme të çaktivizohet ky funksionalitet. Prandaj, ne ofrojmë gjithashtu mundësinë për të çaktivizuar atributin e të dhënave API duke shkëputur të gjitha ngjarjet në hapësirën e emrave të trupit me "data-api"". Kjo duket si kjo:

  1. $ ( 'trup' ). joaktiv ( '.data-api' )

Përndryshe, për të synuar një shtojcë specifike, thjesht përfshini emrin e shtojcës si një hapësirë ​​emri së bashku me hapësirën e emrave të të dhënave-api si kjo:

  1. $ ( 'trup' ). joaktiv ( '.alert.data-api' )

API programatike

Ne gjithashtu besojmë se duhet të jeni në gjendje të përdorni të gjitha shtojcat e Bootstrap thjesht përmes API-së JavaScript. Të gjitha API-të publike janë metoda të vetme, të lidhura me zinxhirë dhe e kthejnë koleksionin sipas të cilit është vepruar.

  1. $ ( ".btn.danger" ). butoni ( "ndryshoni" ). addClass ( "dhjamë" )

Të gjitha metodat duhet të pranojnë një objekt opsionesh opsionale, një varg që synon një metodë të caktuar ose asgjë (që fillon një shtojcë me sjellje të paracaktuar):

  1. $ ( "#myModal" ). modal () // inicializohet me parazgjedhje
  2. $ ( "#myModal" ). modale ({ tastierë : false }) // e inicializuar pa tastierë
  3. $ ( "#myModal" ). modal ( 'show' ) // inicializon dhe thërret shfaqjen menjëherë

Çdo shtojcë ekspozon gjithashtu konstruktorin e saj të papërpunuar në një pronë të "Constructor": $.fn.popover.Constructor. Nëse dëshironi të merrni një shembull të veçantë të shtojcave, merrni atë drejtpërdrejt nga një element: $('[rel=popover]').data('popover').

Asnjë Konflikt

Ndonjëherë është e nevojshme të përdoren shtojcat Bootstrap me korniza të tjera UI. Në këto rrethana, herë pas here mund të ndodhin përplasje të hapësirës së emrave. Nëse kjo ndodh, mund të telefononi .noConflictshtojcën që dëshironi të ktheni vlerën.

  1. var bootstrapButton = $ . fn . butoni . noConflict () // ktheje $.fn.button në vlerën e caktuar më parë
  2. $ . fn . bootstrapBtn = bootstrapButton // jep $().bootstrapBtn funksionalitetin e bootstrap

Ngjarjet

Bootstrap ofron ngjarje të personalizuara për shumicën e veprimeve unike të shtojcave. Në përgjithësi, këto vijnë në një formë të paskajores dhe të paskajores - ku infinitivi (sh. show) shkaktohet në fillim të një ngjarjeje, dhe forma e tij e paskajores (p.sh. ) nxitet në shownpërfundimin e një veprimi.

Të gjitha ngjarjet infinitive ofrojnë funksionin preventDefault. Kjo siguron mundësinë për të ndaluar ekzekutimin e një veprimi përpara se të fillojë.

  1. $ ( '#myModal' ). on ( 'shfaq' , funksioni ( e ) {
  2. nëse (! të dhëna ) kthejnë e . preventDefault () // ndalon shfaqjen e modalit
  3. })

Rreth tranzicioneve

Për efekte të thjeshta tranzicioni, përfshini bootstrap-transition.js një herë së bashku me skedarët e tjerë JS. Nëse jeni duke përdorur bootstrap.js të përpiluar (ose të minimizuar) , nuk ka nevojë ta përfshini këtë - është tashmë aty.

Raste te perdorimit

Disa shembuj të shtojcës së tranzicionit:

  • Rrëshqitje ose zbehje në modale
  • Zbehet skedat
  • Zbehja e sinjalizimeve
  • Xhama rrëshqitës të karuselit

Shembuj

Modalet janë të thjeshta, por fleksibël, kërkesat e dialogut me funksionalitetin minimal të kërkuar dhe parazgjedhjet inteligjente.

Shembull statik

Një modal i dhënë me kokë, trup dhe grup veprimesh në fund.

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "e vërtetë" > × </button>
  4. <h3> Kreu modal </h3>
  5. </div>
  6. <div class = "trup modal" >
  7. <p> Një trup i hollë… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > Mbylle </a>
  11. <a href = "#" class = "btn btn-primary" > Ruaj ndryshimet </a>
  12. </div>
  13. </div>

Demoja e drejtpërdrejtë

Ndryshoni një modal nëpërmjet JavaScript duke klikuar butonin më poshtë. Do të rrëshqasë poshtë dhe do të zbehet nga pjesa e sipërme e faqes.

  1. <!-- Butoni për të aktivizuar modal -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Nis modalin demo </a>
  3.  
  4. <!-- Modal -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "e vërtetë" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > Kreu modal </h3>
  9. </div>
  10. <div class = "trup modal" >
  11. <p> Një trup i hollë… </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Mbylle </button>
  15. <button class = "btn btn-primary" > Ruaj ndryshimet </button>
  16. </div>
  17. </div>

Përdorimi

Nëpërmjet atributeve të të dhënave

Aktivizoni një modal pa shkruar JavaScript. Vendoseni data-toggle="modal"në një element kontrollues, si një buton, së bashku me një data-target="#foo"ose href="#foo"për të synuar një modal specifik për ta ndërruar.

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > Nis modalin </button>

Përmes JavaScript

Thirrni një modal me id myModalme një rresht të vetëm JavaScript:

  1. $ ( '#myModal' ). modale ( opsione )

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-backdrop="".

Emri lloji default përshkrim
sfond logjike e vërtetë Përfshin një element të sfondit modal. Përndryshe, specifikoni staticpër një sfond që nuk e mbyll modalin kur klikoni.
tastierë logjike e vërtetë Mbyll modalin kur shtypet tasti i arratisjes
shfaqje logjike e vërtetë Tregon modalin kur inicializohet.
në distancë rrugë i rremë

Nëse ofrohet një url në distancë, përmbajtja do të ngarkohet nëpërmjet loadmetodës së jQuery dhe do të injektohet në .modal-body. Nëse jeni duke përdorur api të të dhënave, mund të përdorni në mënyrë alternative hrefetiketën për të specifikuar burimin në distancë. Një shembull i kësaj tregohet më poshtë:

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

Metodat

.modal(opsione)

Aktivizon përmbajtjen tuaj si modale. Pranon një opsion opsional object.

  1. $ ( '#myModal' ). modale ({
  2. tastierë : false
  3. })

.modal ('ndërrim')

Ndryshon manualisht një modal.

  1. $ ( '#myModal' ). modale ( 'ndërrim' )

.modal('shfaq')

Hap me dorë një modal.

  1. $ ( '#myModal' ). modale ( 'shfaqje' )

.modal ('fsheh')

Fsheh manualisht një modal.

  1. $ ( '#myModal' ). modale ( 'fsheh' )

Ngjarjet

Klasa modale e Bootstrap ekspozon disa ngjarje për t'u lidhur me funksionalitetin modal.

Ngjarje Përshkrim
shfaqje Kjo ngjarje ndizet menjëherë kur showthirret metoda e shembullit.
treguar Kjo ngjarje aktivizohet kur modali është bërë i dukshëm për përdoruesin (do të presë që tranzicionet css të përfundojnë).
fshehin Kjo ngjarje aktivizohet menjëherë kur hidethirret metoda e shembullit.
i fshehur Kjo ngjarje aktivizohet kur modali ka përfunduar duke u fshehur nga përdoruesi (do të presë që tranzicioni i css të përfundojë).
  1. $ ( '#myModal' ). on ( 'fshehur' , funksion () {
  2. // bej dicka…
  3. })

Shembull në navbar

Shtojca ScrollSpy është për përditësimin automatik të objektivave të navigimit bazuar në pozicionin e lëvizjes. Lëvizni zonën poshtë shiritit të navigimit dhe shikoni ndryshimin e klasës aktive. Nën-artikujt në rënie do të theksohen gjithashtu.

@yndyrë

Dollakë reklamash keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi para se të shitën qui. Të drejtat e biçikletave nga ferma në tavolinë Tumblr sido që të jenë. Kardigan anim keffiyeh carles. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Triko Cosby Lomo jean pantallona të shkurtra, hoodie williamsburg minim qui ndoshta nuk keni dëgjuar për to dhe triko fondet e besimit culpa bionaftë Wes anderson estetike. Nihil me tatuazh accusamus, cred ironi bionaftë keffiyeh artisan ullamco consequat.

@mdo

skateboard me mustaqe Veniam marfa, mjekër fugiat i kulluar me pirun. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat katër loko nisi, ea helvetica nulla carles. Kamion ushqimor me pulovra cosby me tatuazh, vinyl quis non freegan nga Mcsweeney. Lo-fi wes anderson +1 sartorial. Carles ushtrim jo estetik quis gentrify. Brooklyn adipising birrë artizanale zëvendës keytar deserunt.

një

Occaecat commodo aliqua delectus. Fap craft birra deserunt skateboard ea. Lomo të drejtat e biçikletave adipisicing banh mi, velit ea sunt niveli tjetër lokal kafe me origjinë të vetme në magna veniam. Vinyl me identifikim të lartë të jetës, park jehonë që konsiston në quis aliquip banh mi pitchfork. Vero VHS është e pakuptimtë. Konsectetur nisi DIY minim çantë mesazher. Cred ex in, iphone i qëndrueshëm delectus consectetur fanny pack.

dy

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 blog, culpa messenger qese marfa çfarëdo kamion ushqimor delectus. Sapiente synth id supozohet. Locavore sed helvetica klishe ironi, thundercat që ndoshta nuk keni dëgjuar për to, si pasojë e hoodie pa gluten lo-fi fap aliquip. Labore elit placeat para se të shiteshin, terry richardson proident brunch nesciunt quis cosby triko pariatur keffiyeh ut helvetica artisan. Kardigan birrë craft seitan velit gati. VHS chambray laboris tempor veniam. Anim mollit minim commodo ulamco thundercats.


Përdorimi

Nëpërmjet atributeve të të dhënave

Për të shtuar me lehtësi sjelljen e scrollspy në navigimin tuaj të shiritit të sipërm, thjesht shtoni data-spy="scroll"te elementi që dëshironi të spiunoni (më së shpeshti ky do të ishte trupi) dhe data-target=".navbar"për të zgjedhur se cilin nav do të përdorni. Ju do të dëshironi të përdorni scrollspy me një .navkomponent.

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

Përmes JavaScript

Telefononi scrollspy përmes JavaScript:

  1. $ ( '#navbar' ). scrollspy ()
Kokat lart! Lidhjet e shiritit të navigimit duhet të kenë objektiva id të zgjidhshme. Për shembull, një <a href="#home">home</a>duhet të korrespondojë me diçka në dom si <div id="home"></div>.

Metodat

.scrollspy ('refresh')

Kur përdorni scrollspy në lidhje me shtimin ose heqjen e elementeve nga DOM, do t'ju duhet të telefononi metodën e rifreskimit si kjo:

  1. $ ( '[data-spy="scroll"]' ). secili ( funksioni () {
  2. var $spy = $ ( kjo ). scrollspy ( 'refresh' )
  3. });

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-offset="".

Emri lloji default përshkrim
kompensuar numri 10 Piksele për t'u zhvendosur nga lart kur llogaritni pozicionin e rrotullës.

Ngjarjet

Ngjarje Përshkrim
aktivizoni Kjo ngjarje ndizet sa herë që një artikull i ri aktivizohet nga scrollspy.

Shembuj skedash

Shtoni funksionalitetin e shpejtë dhe dinamik të skedës për të kaluar nëpër panelet e përmbajtjes lokale, madje edhe përmes menuve me zbritje.

Xhinset e papërpunuara me siguri nuk keni dëgjuar për to pantallona të shkurtra xhins Austin. Nesciunt tofu stumptown aliqua, pastruese mjeshtërore retro sintetike. Mustaqe klishe tempor, williamsburg carles vegan helvetica. Reprehenderit kasapi retro keffiyeh ëndrra sintetike. Cosby triko eu banh mi, qui irure terry richardson ish kallamar. Ju mund të vendosni për iphone. Seitan aliquip quis cardigan veshje amerikane, kasap 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.


Përdorimi

Aktivizo skedat me skeda përmes JavaScript (secila skedë duhet të aktivizohet individualisht):

  1. $ ( '#myTab a' ). kliko ( funksioni ( e ) {
  2. e . preventDefault ();
  3. $ ( kjo ). tab ( 'shfaq' );
  4. })

Ju mund të aktivizoni skedat individuale në disa mënyra:

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'shfaq' ); // Zgjidhni skedën sipas emrit
  2. $ ( '#myTab a:first' ). tab ( 'shfaq' ); // Zgjidhni skedën e parë
  3. $ ( '#myTab a:last' ). tab ( 'shfaq' ); // Zgjidhni skedën e fundit
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'shfaq' ); // Zgjidhni skedën e tretë (të indeksuar me 0)

Markup

Ju mund të aktivizoni navigimin e një skede ose pilule pa shkruar ndonjë JavaScript thjesht duke specifikuar data-toggle="tab"ose data-toggle="pill"mbi një element. Shtimi i klasave navdhe në skedë do të zbatojë stilin e skedës Bootstrap.nav-tabsul

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Faqja kryesore </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profili </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Mesazhet </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Cilësimet </a></li>
  6. </ul>

Metodat

$().tab

Aktivizon një element skede dhe një kontenier përmbajtjeje. Skeda duhet të ketë një data-targetose një hrefnyje kontejneri në DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Faqja kryesore </a></li>
  3. <li><a href = "#profile" > Profili </a></li>
  4. <li><a href = "#messages" > Mesazhet </a></li>
  5. <li><a href = "#settings" > Cilësimet </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane aktiv" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <skript>
  16. $ ( funksioni () {
  17. $ ( '#myTab a:last' ). tab ( 'shfaq' );
  18. })
  19. </script>

Ngjarjet

Ngjarje Përshkrim
shfaqje Kjo ngjarje aktivizohet në shfaqjen e skedave, por përpara se të shfaqet skeda e re. Përdorni event.targetdhe event.relatedTargetpër të synuar përkatësisht skedën aktive dhe skedën e mëparshme aktive (nëse disponohet).
treguar Kjo ngjarje ndizet në shfaqjen e skedave pasi të jetë shfaqur një skedë. Përdorni event.targetdhe event.relatedTargetpër të synuar përkatësisht skedën aktive dhe skedën e mëparshme aktive (nëse disponohet).
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'treguar' , funksioni ( e ) {
  2. e . objektivi // skeda e aktivizuar
  3. e . relatedTarget // skeda e mëparshme
  4. })

Shembuj

Frymëzuar nga shtojca e shkëlqyer jQuery.tipsy e shkruar nga Jason Frame; Këshillat e veglave janë një version i përditësuar, i cili nuk mbështetet në imazhe, përdor CSS3 për animacione dhe atribute të të dhënave për ruajtjen lokale të titujve.

Për arsye të performancës, këshilla e veglave dhe të dhënat popover janë zgjedhur, që do të thotë se duhet t'i inicializoni vetë .

Zhvendosni mbi lidhjet e mëposhtme për të parë këshillat e veglave:

Pantallona të ngushta keffiyeh të nivelit tjetër që ndoshta nuk keni dëgjuar për to. Kabina e fotografive mjekër xhins të papërpunuar me çantë vegane për lajmëtarë stumptown. Veshjet amerikane 8-bitëshe nga ferma në tavolinë, kuinoa e qëndrueshme e mcsweeney's kanë një shambre vinyl terry richardson. Stumptown me mjekër, kardigane banh mi lomo thundercats. Tofu bionaftë williamsburg marfa, katër loko mcsweeney's cleanse chambray vegan. Një artizan me të vërtetë ironik , çfarëdo keytar , skenografi nga ferma në tavolinë banksy Austin twitter handle freegan cred raw xhins kafe me origjinë të vetme.

Katër drejtime

Këshilla për veglat në grupet hyrëse

Kur përdorni këshilla veglash dhe popover me grupet hyrëse të Bootstrap, do t'ju duhet të vendosni containeropsionin (të dokumentuar më poshtë) për të shmangur efektet anësore të padëshiruara.


Përdorimi

Aktivizoni këshillën e veglave përmes JavaScript:

  1. $ ( '#shembull' ). këshillë veglash ( opsione )

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-animation="".

Emri lloji default përshkrim
animacion logjike e vërtetë aplikoni një tranzicion css fade në këshillën e veglave
html logjike i rremë Futni html në këshillën e veglave. Nëse është false, textmetoda e jquery do të përdoret për të futur përmbajtje në dom. Përdorni tekst nëse jeni të shqetësuar për sulmet XSS.
vendosja varg | funksionin 'majë' si të pozicionohet këshilla e veglave - krye | fund | majtas | drejtë
përzgjedhës varg i rremë Nëse ofrohet një përzgjedhës, objektet e këshillës së veglave do t'u delegohen objektivave të specifikuara.
titullin varg | funksionin '' Vlera e paracaktuar e titullit nëse etiketa `title` nuk është e pranishme
shkas varg "Fokusi rri pezull" si aktivizohet këshilla e veglave - kliko | rri pezull | fokus | manual. Vini re se rasti i kalimit të këmbëzës së shumëfishtë, hapësira e ndarë, llojet e këmbëzës.
vonesë numri | Objekt 0

vonesa e shfaqjes dhe fshehjes së këshillës së veglave (ms) - nuk zbatohet për llojin manual të këmbëzës

Nëse jepet një numër, vonesa zbatohet për të dy fshehjen/shfaqjen

Struktura e objektit është:delay: { show: 500, hide: 100 }

enë varg | i rremë i rremë

Shton këshillën e veglave në një element specifikcontainer: 'body'

Kokat lart! Opsionet për këshilla të veglave individuale mund të specifikohen në mënyrë alternative nëpërmjet përdorimit të atributeve të të dhënave.

Markup

  1. <a href = "#" data-toggle = "tooltip" title = "fast tooltip" > rri pezull mbi mua </a>

Metodat

$().tooltip(opsionet)

Bashkangjit një mbajtës udhëzues në një koleksion elementesh.

.tooltip ('shfaq')

Zbulon udhëzuesin e një elementi.

  1. $ ( '#element' ). këshillë mjeti ( 'shfaq' )

.tooltip ('fsheh')

Fsheh udhëzuesin e një elementi.

  1. $ ( '#element' ). këshillë mjeti ( 'fsheh' )

.tooltip ('ndërroj')

Ndryshon udhëzuesin e një elementi.

  1. $ ( '#element' ). këshillë mjeti ( 'ndërrim' )

.tooltip ('shkatërroj')

Fsheh dhe shkatërron udhëzuesin e një elementi.

  1. $ ( '#element' ). këshillë mjeti ( 'shkatërroj' )

Shembuj

Shtoni mbivendosje të vogla të përmbajtjes, si ato në iPad, në çdo element për strehimin e informacionit dytësor. Zhvendosni pezull mbi butonin për të aktivizuar popover-in. Kërkon që të përfshihet këshilla e veglave .

Popover statike

Katër opsione janë të disponueshme: lart, djathtas, poshtë dhe majtas rreshtuar.

Top popover

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

Popover drejtë

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

Fund popover

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

Popover u largua

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

Asnjë shënjim i shfaqur pasi popover-et krijohen nga JavaScript dhe përmbajtja brenda një dataatributi.

Demoja e drejtpërdrejtë

Katër drejtime


Përdorimi

Aktivizo popover-et përmes JavaScript:

  1. $ ( '#shembull' ). popover ( opsione )

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-animation="".

Emri lloji default përshkrim
animacion logjike e vërtetë aplikoni një tranzicion css fade në këshillën e veglave
html logjike i rremë Fut html në popover. Nëse është false, textmetoda e jquery do të përdoret për të futur përmbajtje në dom. Përdorni tekst nëse jeni të shqetësuar për sulmet XSS.
vendosja varg | funksionin 'e drejt' si të pozicionohet popover - top | fund | majtas | drejtë
përzgjedhës varg i rremë nëse ofrohet një përzgjedhës, objektet e këshillës së veglave do t'u delegohen objektivave të specifikuara
shkas varg 'kliko' si shkaktohet popover - kliko | rri pezull | fokus | manual
titullin varg | funksionin '' vlera e paracaktuar e titullit nëse atributi `title` nuk është i pranishëm
përmbajtjen varg | funksionin '' vlera e paracaktuar e përmbajtjes nëse atributi 'data-content' nuk është i pranishëm
vonesë numri | Objekt 0

vonesa e shfaqjes dhe fshehjes së popover-it (ms) - nuk zbatohet për llojin manual të këmbëzës

Nëse jepet një numër, vonesa zbatohet për të dy fshehjen/shfaqjen

Struktura e objektit është:delay: { show: 500, hide: 100 }

enë varg | i rremë i rremë

Shton popover-in në një element specifikcontainer: 'body'

Kokat lart! Opsionet për popover-et individuale mund të specifikohen në mënyrë alternative përmes përdorimit të atributeve të të dhënave.

Markup

Për arsye të performancës, Tooltip dhe Popover data-apis janë zgjedhur. Nëse dëshironi t'i përdorni ato, thjesht specifikoni një opsion përzgjedhës.

Metodat

$().popover(opsione)

Inicializon popover-et për një koleksion elementesh.

.popover ('shfaqje')

Zbulon një popover elementesh.

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

.popover ('fsheh')

Fsheh një popover elementesh.

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

.popover ('ndërrim')

Aktivizon një popover të elementeve.

  1. $ ( '#element' ). popover ( 'ndërrim' )

.popover ('shkatërroj')

Fsheh dhe shkatërron popoverin e një elementi.

  1. $ ( '#element' ). popover ( "shkatërroj" )

Shembuj sinjalizimesh

Shto funksionin e heqjes dorë në të gjitha mesazhet e alarmit me këtë shtesë.

Guacamole e shenjtë! Kontrolloni më mirë veten, nuk po dukeni shumë mirë.

Dreqin! Keni një gabim!

Ndrysho këtë dhe atë dhe provo përsëri. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Merrni këtë veprim Ose bëje këtë


Përdorimi

Aktivizo heqjen e një sinjalizimi nëpërmjet JavaScript:

  1. $ ( ".alert" ). alarm ()

Markup

Thjesht shtoni data-dismiss="alert"në butonin tuaj të mbylljes për të dhënë automatikisht një funksion të mbylljes së alarmit.

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

Metodat

$().alert()

Mbështjell të gjitha sinjalizimet me funksionalitet të ngushtë. Për t'i animuar sinjalizimet tuaja kur mbyllen, sigurohuni që të kenë aplikuar tashmë klasën .fadedhe .inpër to.

.alert ('mbyll')

Mbyll një alarm.

  1. $ ( ".alert" ). alarmi ( 'mbyll' )

Ngjarjet

Klasa e alarmit të Bootstrap ekspozon disa ngjarje për t'u lidhur me funksionalitetin e alarmit.

Ngjarje Përshkrim
mbyll Kjo ngjarje ndizet menjëherë kur closethirret metoda e shembullit.
mbyllur Kjo ngjarje aktivizohet kur sinjalizimi është mbyllur (do të presë që të përfundojnë tranzicionet css).
  1. $ ( '#my-alert' ). bind ( 'mbyllur' , funksioni () {
  2. // bej dicka…
  3. })

Shembuj të përdorimeve

Bëni më shumë me butona. Kontrolloni gjendjet e butonit ose krijoni grupe butonash për më shumë komponentë si shiritat e veglave.

Shtetërore

Shto data-loading-text="Loading..."për të përdorur një gjendje ngarkimi në një buton.

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Po ngarkohet..." > Gjendja e ngarkimit </button>

Ndërrim i vetëm

Shto data-toggle="button"për të aktivizuar ndërrimin në një buton të vetëm.

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > Ndërrimi i vetëm </button>

Kutia e zgjedhjes

Shto data-toggle="buttons-checkbox"për ndryshimin e stilit të kutisë së kontrollit në btn-group.

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Majtas </button>
  3. <button type = "button" class = "btn btn-primary" > Mesme </button>
  4. <button type = "button" class = "btn btn-primary" > Djathtas </button>
  5. </div>

Radio

Shto data-toggle="buttons-radio"për ndryshimin e stilit të radios në btn-group.

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > Majtas </button>
  3. <button type = "button" class = "btn btn-primary" > Mesme </button>
  4. <button type = "button" class = "btn btn-primary" > Djathtas </button>
  5. </div>

Përdorimi

Aktivizo butonat përmes JavaScript:

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

Markup

Atributet e të dhënave janë integrale në shtojcën e butonit. Shikoni shembullin e kodit më poshtë për llojet e ndryshme të shënjimit.

Opsione

Asnje

Metodat

$().button('toggle')

Aktivizon gjendjen e shtytjes. I jep butonit pamjen se është aktivizuar.

Kokat lart! Mund të aktivizoni ndërrimin automatik të një butoni duke përdorur data-toggleatributin.
  1. <button type = "button" class = "btn" data-toggle = "button" > </button>

$().button('po ngarkohet')

Vendos gjendjen e butonit në ngarkim - çaktivizon butonin dhe ndërron tekstin me tekstin e ngarkimit. Teksti i ngarkimit duhet të përcaktohet në elementin e butonit duke përdorur atributin e të dhënave data-loading-text.

  1. <button type = "button" class = "btn" data-loading-text = "duke ngarkuar gjëra..." > ... </button>
Kokat lart! Firefox vazhdon të jetë i çaktivizuar gjatë ngarkimit të faqeve . Një zgjidhje për këtë është përdorimi autocomplete="off".

$().button('rivendosje')

Rivendos gjendjen e butonit - ndërron tekstin në tekstin origjinal.

$().button(string)

Rivendos gjendjen e butonit - ndërron tekstin në çdo gjendje teksti të përcaktuar nga të dhënat.

  1. <button type = "button" class = "btn" data-complete-text = "mbaruar!" > ... </button>
  2. <skript>
  3. $ ( '.btn' ). butoni ( "i plotë" )
  4. </script>

Rreth

Merrni stile bazë dhe mbështetje fleksibël për komponentët e palosshëm si fizarmonikët dhe navigimi.

* Kërkon që të përfshihet shtojca Transitions.

Shembull fizarmonikë

Duke përdorur shtojcën e kolapsit, ne ndërtuam një miniaplikacion të thjeshtë të stilit fizarmonikë:

Anim pariatur klishe reprehenderit, për të eiusmod jetën e lartë akuzuar Terry richardson dhe kallamar. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Kamion ushqimor quinoa nesciunt laborum eiusmod. Mëngjes i mëngjesit 3 ujku hënë tempor, sunt aliqua vënë një zog mbi të kallamar me origjinë të vetme kafe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, birrë artizanale labore wes anderson cred nesciunt sapiente ea proident. Ad vegan përveçseur kasap vice lomo. Këllakë occaecat birrë artizanale nga ferma në tavolinë, xhins të papërpunuara estetike sintetike, ndoshta nuk keni dëgjuar për to accusamus labore të qëndrueshme VHS.
Anim pariatur klishe reprehenderit, për të eiusmod jetën e lartë akuzuar Terry richardson dhe kallamar. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Kamion ushqimor quinoa nesciunt laborum eiusmod. Mëngjes i mëngjesit 3 ujku hënë tempor, sunt aliqua vënë një zog mbi të kallamar me origjinë të vetme kafe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, birrë artizanale labore wes anderson cred nesciunt sapiente ea proident. Ad vegan përveçseur kasap vice lomo. Këllakë occaecat birrë artizanale nga ferma në tavolinë, xhins të papërpunuara estetike sintetike, ndoshta nuk keni dëgjuar për to accusamus labore të qëndrueshme VHS.
Anim pariatur klishe reprehenderit, për të eiusmod jetën e lartë akuzuar Terry richardson dhe kallamar. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Kamion ushqimor quinoa nesciunt laborum eiusmod. Mëngjes i mëngjesit 3 ujku hënë tempor, sunt aliqua vënë një zog mbi të kallamar me origjinë të vetme kafe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, birrë artizanale labore wes anderson cred nesciunt sapiente ea proident. Ad vegan përveçseur kasap vice lomo. Këllakë occaecat birrë artizanale nga ferma në tavolinë, xhins të papërpunuara estetike sintetike, ndoshta nuk keni dëgjuar për to accusamus labore të qëndrueshme VHS.
  1. <div class = "fizarmonikë" id = "fizarmonikë2" >
  2. <div class = "fizarmonikë-grup" >
  3. <div class = "kreu fizarmonikë" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. Artikulli i palosshëm i grupit #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "kolapsi i trupit të fizarmonikës në" >
  9. <div class = "fizarmonikë e brendshme" >
  10. Anim pariatur klishe...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "fizarmonikë-grup" >
  15. <div class = "kreu fizarmonikë" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Artikulli i palosshëm i grupit #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "kolapsi i trupit të fizarmonikës" >
  21. <div class = "fizarmonikë e brendshme" >
  22. Anim pariatur klishe...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Mund ta përdorni gjithashtu shtojcën pa shënjimin e fizarmonikës. Bëni një buton që ndryshon zgjerimin dhe kolapsin e një elementi tjetër.

  1. <button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. e thjeshtë e palosshme
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>

Përdorimi

Nëpërmjet atributeve të të dhënave

Thjesht shtoni data-toggle="collapse"dhe një data-targetelement për të caktuar automatikisht kontrollin e një elementi të palosshëm. Atributi data-targetpranon një përzgjedhës css për të aplikuar kolapsin. Sigurohuni që të shtoni klasën collapsenë elementin e palosshëm. Nëse dëshironi që të hapet si parazgjedhje, shtoni klasën shtesë in.

Për të shtuar menaxhimin e grupit të ngjashëm me fizarmonikën në një kontroll të palosshëm, shtoni atributin e të dhënave data-parent="#selector". Referojuni demonstrimit për ta parë këtë në veprim.

Përmes JavaScript

Aktivizo manualisht me:

  1. $ ( ".collapse" ). kolaps ()

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-parent="".

Emri lloji default përshkrim
prind përzgjedhës i rremë Nëse zgjedhësi, atëherë të gjithë elementët e palosshëm nën prindin e specifikuar do të mbyllen kur të shfaqet ky artikull i palosshëm. (e ngjashme me sjelljen tradicionale të fizarmonikës)
ndërroj logjike e vërtetë Aktivizon elementin e palosshëm në thirrje

Metodat

.collapse(opsione)

Aktivizon përmbajtjen tuaj si një element i palosshëm. Pranon një opsion opsional object.

  1. $ ( '#myCollapsible' ). kolaps ({
  2. ndërroj : i rremë
  3. })

.collapse ('ndërroj')

Ndryshon një element të palosshëm në të shfaqur ose të fshehur.

.collapse ('shfaq')

Tregon një element të palosshëm.

.collapse ('fsheh')

Fsheh një element të palosshëm.

Ngjarjet

Klasa e kolapsit të Bootstrap ekspozon disa ngjarje për t'u lidhur me funksionalitetin e kolapsit.

Ngjarje Përshkrim
shfaqje Kjo ngjarje ndizet menjëherë kur showthirret metoda e shembullit.
treguar Kjo ngjarje aktivizohet kur një element kolapsi është bërë i dukshëm për përdoruesin (do të presë që tranzicionet css të përfundojnë).
fshehin Kjo ngjarje aktivizohet menjëherë kur hidemetoda është thirrur.
i fshehur Kjo ngjarje aktivizohet kur një element kolapsi është fshehur nga përdoruesi (do të presë që tranzicioni i css të përfundojë).
  1. $ ( '#myCollapsible' ). on ( 'fshehur' , funksion () {
  2. // bej dicka…
  3. })

Shembull

Një shtojcë bazë, e zgjeruar lehtësisht për krijimin e shpejtë të kokave elegante të shkrimit me çdo futje teksti në formë.

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

Ju do të dëshironi të vendosni autocomplete="off"që të parandaloni shfaqjen e menuve të parazgjedhur të shfletuesit në listën rënëse të tipit Bootstrap.


Përdorimi

Nëpërmjet atributeve të të dhënave

Shtoni atributet e të dhënave për të regjistruar një element me funksionalitetin e tipit, siç tregohet në shembullin e mësipërm.

Përmes JavaScript

Thirrni kokën e shkrimit me dorë me:

  1. $ ( '.typeahead' ). shtypshkronjë ()

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-source="".

Emri lloji default përshkrim
burimi grup, funksion [ ] Burimi i të dhënave për të kërkuar. Mund të jetë një grup vargjesh ose një funksion. Funksionit i kalojnë dy argumente, queryvlera në fushën e hyrjes dhe kthimi i processthirrjes. Funksioni mund të përdoret në mënyrë sinkronike duke e kthyer burimin e të dhënave drejtpërdrejt ose në mënyrë asinkrone nëpërmjet processargumentit të vetëm të kthimit të thirrjes.
artikujt numri 8 Numri maksimal i artikujve për t'u shfaqur në dropdown.
MinGjatësia numri 1 Gjatësia minimale e karaktereve që nevojitet përpara se të aktivizohen sugjerimet e plotësimit automatik
përputhëse funksionin rast i pandjeshëm Metoda e përdorur për të përcaktuar nëse një pyetje përputhet me një artikull. Pranon një argument të vetëm, itemkundër të cilit testohet pyetja. Hyni në pyetjen aktuale me this.query. Ktheni një boolean truenëse kërkesa përputhet.
ndarës funksionin përputhje e saktë,
rast i ndjeshëm, i
pandjeshëm rasti
Metoda e përdorur për të renditur rezultatet e plotësimit automatik. Pranon një argument të vetëm itemsdhe ka shtrirjen e shembullit të shtypjes. Referojuni pyetjes aktuale me this.query.
përditësues funksionin kthen artikullin e zgjedhur Metoda e përdorur për të kthyer artikullin e zgjedhur. Pranon një argument të vetëm, itemdhe ka shtrirjen e shembullit të shtypjes.
theksues funksionin thekson të gjitha ndeshjet e paracaktuara Metoda e përdorur për të nënvizuar rezultatet e plotësimit automatik. Pranon një argument të vetëm itemdhe ka shtrirjen e shembullit të shtypjes. Duhet të kthejë html.

Metodat

.typeahead(opsionet)

Inicializon një hyrje me një shtypje.

Shembull

Nënnavigimi në të majtë është një demonstrim i drejtpërdrejtë i shtojcës affix.


Përdorimi

Nëpërmjet atributeve të të dhënave

Për të shtuar lehtësisht sjelljen e ngjitjes në çdo element, thjesht shtoni data-spy="affix"elementin që dëshironi të spiunoni. Më pas përdorni zhvendosjet për të përcaktuar se kur të aktivizoni dhe çaktivizoni fiksimin e një elementi.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Kokat lart! Ju duhet të menaxhoni pozicionin e një elementi të fiksuar dhe sjelljen e prindit të tij të menjëhershëm. Pozicioni kontrollohet nga affix, affix-top, dhe affix-bottom. Mos harroni të kontrolloni për një prind potencialisht të shembur kur shtesa fillon pasi po heq përmbajtjen nga rrjedha normale e faqes.

Përmes JavaScript

Thirrni shtojcën e shtojcës përmes JavaScript:

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

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-offset-top="200".

Emri lloji default përshkrim
kompensuar numri | funksioni | Objekt 10 Piksele për t'u zhvendosur nga ekrani kur llogaritni pozicionin e rrotullës. Nëse jepet një numër i vetëm, kompensimi do të zbatohet në të dy drejtimet lart dhe majtas. Për të dëgjuar për një drejtim të vetëm, ose zhvendosje të shumta unike, thjesht jepni një objekt offset: { x: 10 }. Përdorni një funksion kur duhet të siguroni në mënyrë dinamike një kompensim (i dobishëm për disa dizajne të përgjegjshme).