Javascript për Bootstrap

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

Modalet

Një shtojcë e thjeshtë, por fleksibël, modale tradicionale javascript me vetëm funksionalitetin minimal të kërkuar dhe parazgjedhjet inteligjente.

Dropdowns

Shtoni menutë me zbritje në pothuajse çdo gjë në Bootstrap me këtë shtojcë të thjeshtë. Bootstrap përmban mbështetje të plotë të menusë rënëse në shiritin e navigimit, skedat dhe pilulat.

Scrollspy

Përdorni scrollspy për të përditësuar automatikisht lidhjet në shiritin tuaj navigues për të shfaqur lidhjen aktuale aktive bazuar në pozicionin e lëvizjes.

Skedat e ndërrueshme

Përdoreni këtë shtesë për t'i bërë skedat dhe pilulat më të dobishme duke i lejuar ato të kalojnë nëpër panelet e tabelave të përmbajtjes lokale.

Këshilla për veglat

Një qëndrim i ri për shtojcën jQuery Tipsy, Këshillat e veglave nuk mbështeten në imazhe—ato përdorin CSS3 për animacione dhe atribute të të dhënave për ruajtjen e titujve lokalë.

Popovers *

Shtoni mbivendosje të vogla të përmbajtjes, si ato në iPad, në çdo element për strehimin e informacionit dytësor.

* Kërkon që të përfshihen këshilla të veglave

Mesazhe alarmi

Shtojca e alarmit është një klasë e vogël për shtimin e funksionalitetit të afërt të sinjalizimeve.

Butonat

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

Kolapsi

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

Karuseli

Krijoni një përmbledhje të çdo përmbajtjeje që dëshironi të ofroni një shfaqje interaktive të përmbajtjes.

Përpara tipit

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

Tranzicionet *

Për efekte të thjeshta tranzicioni, përfshini bootstrap-transition.js një herë për të rrëshqitur në modalet ose për të zbehur sinjalizimet.

* Kërkohet për animacion në shtojca

Kokat lart! Të gjitha shtojcat javascript kërkojnë versionin më të fundit të jQuery.

Rreth modaleve

Një shtojcë e thjeshtë, por fleksibël, modale tradicionale javascript me vetëm funksionalitetin minimal të kërkuar dhe parazgjedhjet inteligjente.

Shkarko skedarin

Shembull statik

Më poshtë është një modal i dhënë në mënyrë statike.

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.

Nis modalin demo

Duke përdorur bootstrap-modal

Thirrni modalin përmes javascript:

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

Opsione

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.

Markup

Ju mund të aktivizoni modalet në faqen tuaj lehtësisht pa pasur nevojë të shkruani një rresht të vetëm Javascript. Thjesht vendosni data-toggle="modal"në një element kontrollues me një data-target="#foo"osehref="#foo" që korrespondon me një id të elementit modal dhe kur të klikohet, ai do të nisë modalin tuaj.

Gjithashtu, për të shtuar opsione në shembullin tuaj modal, thjesht përfshini ato si atribute shtesë të të dhënave ose në elementin e kontrollit ose në vetë shënimin modal.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Nis modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </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" data-dismiss = "modal" > Mbylle </a>
  11. <a href = "#" class = "btn btn-primary" > Ruaj ndryshimet </a>
  12. </div>
  13. </div>
Kokat lart! Nëse dëshironi që modali juaj të animojë brenda dhe jashtë, thjesht shtoni një .fadeklasë në .modalelement (referojuni demonstrimit për ta parë këtë në veprim) dhe përfshini bootstrap-transition.js.

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

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

Shtojca ScrollSpy është për përditësimin automatik të objektivave të navigimit bazuar në pozicionin e lëvizjes.

Shkarko skedarin

Shembull i shiritit navigues me scrollspy

Lëvizni zonën më poshtë dhe shikoni përditësimin e navigimit. Nën-artikujt në rënie do të theksohen gjithashtu. Provoje!

@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, pantallona të shkurtra xhinse, me kapuçë Wiliamsburg, të cilat ndoshta nuk keni dëgjuar për to dhe fondet e besimit të trikove 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.


Duke përdorur bootstrap-scrollspy.js

Telefononi scrollspy përmes javascript:

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

Markup

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

  1. <body data-spy = "scroll" > ... </body>
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 ( funksion () {
  2. var $spy = $ ( kjo ). scrollspy ( 'refresh' )
  3. });

Opsione

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

Ngjarjet

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

Kjo shtojcë shton funksionalitet të shpejtë, dinamik të skedave dhe pilulave për kalimin përmes përmbajtjes lokale.

Shkarko skedarin

Shembuj skedash

Klikoni skedat më poshtë për të kaluar midis paneleve të fshehura, madje edhe përmes menuve rënëse.

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.


Duke përdorur bootstrap-tab.js

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 navdhe nav-tabsklasave në skedë uldo të zbatojë stilin e skedës së bootstrap.

  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

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

Rreth Këshillave të Veglave

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ë dhënash për ruajtjen lokale të titujve.

Shkarko skedarin

Shembull i përdorimit të Këshillave të Veglave

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.


Duke përdorur bootstrap-tooltip.js

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

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

Opsione

Emri lloji default përshkrim
animacion logjike e vërtetë aplikoni një tranzicion css fade në këshillën e veglave
vendosja varg|funksion '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 'rri rri pezull' si aktivizohet këshilla e veglave - rri pezull | fokus | manual
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 }

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

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.

  1. <a href = "#" rel = "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' )

Rreth popovers

Shtoni mbivendosje të vogla të përmbajtjes, si ato në iPad, në çdo element për strehimin e informacionit dytësor.

* Kërkon që këshilla e veglave të përfshihet

Shkarko skedarin

Shembull hover popover

Zhvendosni pezull mbi butonin për të aktivizuar popover-in.


Duke përdorur bootstrap-popover.js

Aktivizo popover-et përmes javascript:

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

Opsione

Emri lloji default përshkrim
animacion logjike e vërtetë aplikoni një tranzicion css fade në këshillën e veglave
vendosja varg|funksion '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 'rri rri pezull' si aktivizohet këshilla e veglave - 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 }

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

Rreth alarmeve

Shtojca e alarmit është një klasë e vogël për shtimin e funksionalitetit të afërt të sinjalizimeve.

Shkarko

Shembuj sinjalizimesh

Shtojca e alarmeve funksionon në mesazhe të rregullta alarmi dhe bllokon mesazhet.

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ë


Duke përdorur bootstrap-alert.js

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.

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

Rreth

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

Shkarko skedarin

Shembuj të përdorimeve

Përdorni shtojcën e butonave për gjendjet dhe ndërrimet.

Shtetërore
Ndërrim i vetëm
Kutia e zgjedhjes
Radio

Duke përdorur bootstrap-button.js

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.

  1. <!-- Shto data-toggle="button" për të aktivizuar ndërrimin në një buton të vetëm -->
  2. <button class = "btn" data-toggle = "button" > Ndërrimi i vetëm </button>
  3.  
  4. <!-- Shto data-toggle="buttons-checkbox" për ndryshimin e stilit të kutisë së kontrollit në btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Majtas </button>
  7. <button class = "btn" > Mesme </button>
  8. <button class = "btn" > Djathtas </button>
  9. </div>
  10.  
  11. <!-- Shto data-toggle="buttons-radio" për ndryshimin e stilit të radios në btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Majtas </button>
  14. <button class = "btn" > Mesme </button>
  15. <button class = "btn" > Djathtas </button>
  16. </div>

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

Shkarko skedarin

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

Duke përdorur bootstrap-collapse.js

Aktivizo përmes javascript:

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

Opsione

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

Markup

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.

  1. <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>
Kokat lart! 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.

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

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.

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

Rreth

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

Shkarko skedarin

Shembull

Filloni të shkruani në fushën më poshtë për të shfaqur rezultatet e shtypjes.


Duke përdorur bootstrap-typeahead.js

Thirrni kokën e shkrimit përmes javascript:

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

Opsione

Emri lloji default përshkrim
burimi varg [ ] Burimi i të dhënave për të kërkuar.
artikujt numri 8 Numri maksimal i artikujve për t'u shfaqur në dropdown.
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.
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.

Markup

Shto atribute të dhënash për të regjistruar një element me funksionalitetin e shtypjes.

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

Metodat

.typeahead(opsionet)

Inicializon një hyrje me një shtypje.