Javascript pentru Bootstrap

Dați viață componentelor Bootstrap — acum cu 12 plugin-uri jQuery personalizate .

Modale

O abordare simplificată, dar flexibilă, a pluginului modal javascript tradițional, cu doar funcționalitatea minimă necesară și valori implicite inteligente.

Mențiuni derulante

Adăugați meniuri drop-down la aproape orice în Bootstrap cu acest plugin simplu. Bootstrap oferă suport complet pentru meniul drop-down în bara de navigare, file și pastile.

Scrollspy

Utilizați scrollspy pentru a actualiza automat linkurile din bara de navigare pentru a afișa linkul activ curent pe baza poziției derulării.

File care pot fi comutate

Utilizați acest plugin pentru a face filele și pastilele mai utile, permițându-le să comute între panourile tabulabile ale conținutului local.

Sfaturi instrumente

O nouă interpretare a pluginului jQuery Tipsy, Tooltips nu se bazează pe imagini - folosesc CSS3 pentru animații și atribute de date pentru stocarea locală a titlurilor.

Popovers *

Adăugați mici suprapuneri de conținut, cum ar fi cele de pe iPad, la orice element pentru a găzdui informații secundare.

* Necesită să fie incluse sfaturi cu instrumente

Mesaje de alertă

Pluginul de alertă este o clasă mică pentru adăugarea unei funcționalități apropiate alertelor.

Butoane

Faceți mai mult cu butoanele. Controlați stările butoanelor sau creați grupuri de butoane pentru mai multe componente, cum ar fi barele de instrumente.

Colaps

Obțineți stiluri de bază și suport flexibil pentru componente pliabile, cum ar fi acordeoanele și navigația.

Carusel

Creați un carusel cu orice conținut pe care doriți să oferiți o prezentare interactivă de conținut.

Tastați înainte

Un plugin de bază, ușor de extins, pentru crearea rapidă a texturilor elegante cu orice introducere de text din formular.

Tranziții *

Pentru efecte de tranziție simple, includeți bootstrap-transition.js o singură dată pentru a introduce modal sau a atenua alertele.

* Necesar pentru animație în pluginuri

Atenție! Toate pluginurile javascript necesită cea mai recentă versiune de jQuery.

Despre modale

O abordare simplificată, dar flexibilă, a pluginului modal javascript tradițional, cu doar funcționalitatea minimă necesară și valori implicite inteligente.

Descărcare fișier

Exemplu static

Mai jos este un modal redat static.

Demo live

Comutați un modal prin javascript făcând clic pe butonul de mai jos. Acesta va aluneca în jos și va dispărea din partea de sus a paginii.

Lansați modelul demonstrativ

Folosind bootstrap-modal

Apelați modal prin javascript:

  1. $ ( '#myModal' ). modal ( opțiuni )

Opțiuni

Nume tip Mod implicit Descriere
fundal boolean Adevărat Include un element modal de fundal. Alternativ, specificați staticpentru un fundal care nu închide modal la clic.
tastatură boolean Adevărat Închide modulul când este apăsată tasta Escape
spectacol boolean Adevărat Afișează modal atunci când este inițializat.

Markup

Puteți activa cu ușurință modalele pe pagina dvs. fără a fi nevoie să scrieți o singură linie de javascript. Doar setați data-toggle="modal"un element de controler cu un data-target="#foo"sau href="#foo"care corespunde unui id de element modal, iar când dați clic, acesta va lansa modulul dvs.

De asemenea, pentru a adăuga opțiuni la instanța dvs. modală, includeți-le ca atribute de date suplimentare fie pe elementul de control, fie pe marcajul modal în sine.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Lansați 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> Antet modal </h3>
  5. </div>
  6. <div class = "corp-modal" >
  7. <p> Un corp fin... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Închidere </a>
  11. <a href = "#" class = "btn btn-primary" > Salvați modificările </a>
  12. </div>
  13. </div>
Atenție! Dacă doriți ca modalul dvs. să se anime în interior și în exterior, trebuie doar să adăugați o .fadeclasă la .modalelement (consultați demonstrația pentru a vedea acest lucru în acțiune) și includeți bootstrap-transition.js.

Metode

.modal(opțiuni)

Activează conținutul dvs. ca modal. Acceptă opțiuni opționale object.

  1. $ ( '#myModal' ). modal ({
  2. tastatură : falsă
  3. })

.modal('comutați')

Comută manual un modal.

  1. $ ( '#myModal' ). modal ( „comutați” )

.modal('arată')

Deschide manual un modal.

  1. $ ( '#myModal' ). modal ( 'arată' )

.modal('ascunde')

Ascunde manual un modal.

  1. $ ( '#myModal' ). modal ( „ascunde” )

Evenimente

Clasa modală a Bootstrap expune câteva evenimente pentru conectarea la funcționalitatea modală.

Eveniment Descriere
spectacol Acest eveniment se declanșează imediat când showeste apelată metoda instanței.
afișate Acest eveniment este declanșat atunci când modalul a fost făcut vizibil pentru utilizator (va aștepta finalizarea tranzițiilor CSS).
ascunde Acest eveniment este declanșat imediat când hidemetoda instanței a fost apelată.
ascuns Acest eveniment este declanșat când modalul a terminat de ascuns utilizatorului (va aștepta finalizarea tranzițiilor CSS).
  1. $ ( '#myModal' ). on ( 'ascuns' , function () {
  2. // Fă ceva…
  3. })

Pluginul ScrollSpy este pentru actualizarea automată a țintelor de navigare pe baza poziției derulării.

Descărcare fișier

Exemplu de bară de navigare cu scrollspy

Derulați zona de mai jos și urmăriți actualizarea de navigare. Subelementele derulante vor fi de asemenea evidențiate. Incearca-l!

@gras

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi înainte de a se epuiza. Drepturi la bicicletă Tumblr de la fermă la masă. Anim keffiyeh carles cardigan. cabina foto Velit seitan mcsweeney 3 lupul luna irure. Cosby pulover lomo jean pantaloni scurți, hanoracul williamsburg minim qui probabil nu ai auzit de ele et cardigan trust fund culpa biodiesel wes anderson estetica. Nihil tatuat accusamus, cred ironia biodiesel keffiyeh artizan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Camion de mâncare cu pulover cosby tatuat, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non exercițiu estetic quis gentrify. Brooklyn adipisicing bere artizanală vice keytar deserunt.

unu

Occaecat commodo aliqua delectus. Fap craft bere deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS este adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

Două

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 bag marfa orice delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica clișeu ironie, thundercats probabil nu ați auzit de ele consequat hanorac fără gluten lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt cares cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan bere craft seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Folosind bootstrap-scrollspy.js

Apelați scrollspy prin javascript:

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

Markup

Pentru a adăuga cu ușurință comportamentul scrollspy la navigarea din bara de sus, trebuie doar data-spy="scroll"să adăugați elementul pe care doriți să îl spionați (de obicei acesta ar fi corpul).

  1. <body data-spy = "scroll" > ... </body>
Atenție! Legăturile din bara de navigare trebuie să aibă ținte de ID rezolvabile. De exemplu, un <a href="#home">home</a>must corespunde cu ceva din dom precum <div id="home"></div>.

Metode

.scrollspy('refresh')

Când utilizați scrollspy împreună cu adăugarea sau eliminarea elementelor din DOM, va trebui să apelați metoda de reîmprospătare astfel:

  1. $ ( '[data-spy="scroll"]' ). fiecare ( funcție () {
  2. var $spy = $ ( asta ). scrollspy ( „reîmprospătare” )
  3. });

Opțiuni

Nume tip Mod implicit Descriere
decalaj număr 10 Pixeli de decalat de sus atunci când se calculează poziția derulării.

Evenimente

Eveniment Descriere
Activati Acest eveniment se declanșează ori de câte ori un element nou este activat de scrollspy.

Acest plugin adaugă o filă rapidă, dinamică și funcționalitate de pilule pentru tranziția prin conținutul local.

Descărcare fișier

Exemple de file

Faceți clic pe filele de mai jos pentru a comuta între panourile ascunse, chiar și prin meniurile drop-down.

Denim brut probabil că nu ați auzit de ei pantaloni scurți de blugi Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Pulover Cosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher 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.


Folosind bootstrap-tab.js

Activați filele tabulabile prin javascript (fiecare filă trebuie activată individual):

  1. $ ( '#myTab a' ). faceți clic pe ( funcția ( e ) {
  2. e . preventDefault ();
  3. $ ( acesta ). fila ( 'arată' );
  4. })

Puteți activa file individuale în mai multe moduri:

  1. $ ( '#myTab a[href="#profile"]' ). fila ( 'arată' ); // Selectați fila după nume
  2. $ ( '#myTab a:first' ). fila ( 'arată' ); // Selectați prima filă
  3. $ ( '#myTab a:last' ). fila ( 'arată' ); // Selectați ultima filă
  4. $ ( '#myTab li:eq(2) a' ). fila ( 'arată' ); // Selectați a treia filă (indexată 0)

Markup

Puteți activa o filă sau o navigare prin pilule fără a scrie niciun javascript prin simpla specificare data-toggle="tab"sau data-toggle="pill"pe un element. Adăugarea claselor navși la filă va aplica stilul filei bootstrap.nav-tabsul

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Acasă </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Mesaje </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Setări </a></li>
  6. </ul>

Metode

$().tab

Activează un element de filă și un container de conținut. Tab ar trebui să aibă fie un, fie un data-targetnod hrefde container în DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Acasă </a></li>
  3. <li><a href = "#profile" > Profil </a></li>
  4. <li><a href = "#messages" > Mesaje </a></li>
  5. <li><a href = "#settings" > Setări </a></li>
  6. </ul>
  7.  
  8. <div class = "fil-conținut" >
  9. <div class = "tab-pane active" id = "acasă" > ... </div>
  10. <div class = "tab-pane" id = "profil" > ... </div>
  11. <div class = "tab-pane" id = "mesaje" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( funcția () {
  17. $ ( '#myTab a:last' ). fila ( 'arată' );
  18. })
  19. </script>

Evenimente

Eveniment Descriere
spectacol Acest eveniment se declanșează în afișarea filelor, dar înainte ca noua filă să fie afișată. Utilizați event.targetși event.relatedTargetpentru a viza fila activă și, respectiv, fila activă anterioară (dacă este disponibilă).
afișate Acest eveniment se declanșează în afișarea filelor după ce a fost afișată o filă. Utilizați event.targetși event.relatedTargetpentru a viza fila activă și, respectiv, fila activă anterioară (dacă este disponibilă).
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'arată' , funcţia ( e ) {
  2. e . țintă // filă activată
  3. e . relatedTarget // fila anterioară
  4. })

Despre sfaturi cu instrumente

Inspirat de excelentul plugin jQuery.tipsy scris de Jason Frame; Sfaturile cu instrumente sunt o versiune actualizată, care nu se bazează pe imagini, utilizează css3 pentru animații și atribute de date pentru stocarea locală a titlurilor.

Descărcare fișier

Exemplu de utilizare a Tooltips

Treceți cu mouse-ul peste linkurile de mai jos pentru a vedea sfaturi despre instrumente:

Pantaloni strâmți, keffiyeh , probabil că nu ați auzit de ei. Cabina foto barbă din denim brut tipografie geantă vegană stumptown. Seitanul de la fermă la masă, mcsweeney's fixie sustainable quinoa 8-bit american apparel au un terry richardson vinyl chambray. Beard Stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. Un artizan cu adevărat ironic orice keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim cafea de origine unică virală.


Folosind bootstrap-tooltip.js

Declanșați balonul explicativ prin javascript:

  1. $ ( '#exemplu' ). tooltip ( opțiuni )

Opțiuni

Nume tip Mod implicit Descriere
animaţie boolean Adevărat aplicați o tranziție de estompare css la sfatul instrumentului
plasare șir|funcție 'top' cum să poziționați tooltip - sus | jos | stânga | dreapta
selector şir fals Dacă este furnizat un selector, obiectele de tip tooltip vor fi delegate țintelor specificate.
titlu șir | funcţie '' valoarea implicită a titlului dacă eticheta `title` nu este prezentă
declanșatorul şir 'planare' cum este declanșat tooltip - hover | focus | manual
întârziere număr | obiect 0

întârziere afișarea și ascunderea descrierii explicative (ms) - nu se aplică tipului de declanșare manuală

Dacă este furnizat un număr, se aplică întârziere atât pentru ascunde/afișare

Structura obiectului este:delay: { show: 500, hide: 100 }

Atenție! Opțiunile pentru sfaturi instrumente individuale pot fi specificate alternativ prin utilizarea atributelor de date.

Markup

Din motive de performanță, API-ul de date Tooltip și Popover sunt înscrise. Dacă doriți să le utilizați, trebuie doar să specificați o opțiune de selectare.

  1. <a href = "#" rel = "tooltip" title = "first tooltip" > plasați cursorul peste mine </a>

Metode

$().tooltip(opțiuni)

Atașează un handler tooltip la o colecție de elemente.

.tooltip('arată')

Dezvăluie explicația unui element.

  1. $ ( '#element' ). tooltip ( „arată” )

.tooltip('ascunde')

Ascunde explicația unui element.

  1. $ ( '#element' ). tooltip ( „ascunde” )

.tooltip('comutați')

Comută în lista de informații despre un element.

  1. $ ( '#element' ). balon instrument ( „comutați” )

Despre popovers

Adăugați mici suprapuneri de conținut, cum ar fi cele de pe iPad, la orice element pentru a găzdui informații secundare.

* Necesită includerea balonului explicativ

Descărcare fișier

Exemplu de popover cu cursorul

Treceți cursorul peste buton pentru a declanșa popover-ul.


Folosind bootstrap-popover.js

Activați popover-urile prin javascript:

  1. $ ( '#exemplu' ). popover ( opțiuni )

Opțiuni

Nume tip Mod implicit Descriere
animaţie boolean Adevărat aplicați o tranziție de estompare css la sfatul instrumentului
plasare șir|funcție 'dreapta' cum să poziționați popover-ul - sus | jos | stânga | dreapta
selector şir fals dacă este furnizat un selector, obiectele de tip tooltip vor fi delegate țintelor specificate
declanșatorul şir 'planare' cum este declanșat tooltip - hover | focus | manual
titlu șir | funcţie '' valoarea implicită a titlului dacă atributul `title` nu este prezent
conţinut șir | funcţie '' valoarea implicită de conținut dacă atributul `data-content` nu este prezent
întârziere număr | obiect 0

întârziere afișarea și ascunderea popover-ului (ms) - nu se aplică tipului de declanșare manuală

Dacă este furnizat un număr, se aplică întârziere atât pentru ascunde/afișare

Structura obiectului este:delay: { show: 500, hide: 100 }

Atenție! Opțiunile pentru popover-uri individuale pot fi specificate alternativ prin utilizarea atributelor de date.

Markup

Din motive de performanță, API-ul de date Tooltip și Popover sunt înscrise. Dacă doriți să le utilizați, trebuie doar să specificați o opțiune de selectare.

Metode

$().popover(opțiuni)

Inițializează popover-urile pentru o colecție de elemente.

.popover('arată')

Dezvăluie un popover de elemente.

  1. $ ( '#element' ). popover ( 'arată' )

.popover('ascunde')

Ascunde un popover de elemente.

  1. $ ( '#element' ). popover ( „ascunde” )

.popover('comutați')

Comută un popover de elemente.

  1. $ ( '#element' ). popover ( „comutați” )

Despre alerte

Pluginul de alertă este o clasă mică pentru adăugarea unei funcționalități apropiate alertelor.

Descarca

Exemple de alerte

Pluginul de alerte funcționează pe mesaje de alertă obișnuite și blochează mesajele.

Sfinte guacamole! Cel mai bine verifică-te, nu arăți prea bine.

O, snap! Ai o eroare!

Schimbați asta și asta și încercați din nou. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Luați această acțiune Sau fă asta


Folosind bootstrap-alert.js

Activați respingerea unei alerte prin javascript:

  1. $ ( ".alertă" ). alertă ()

Markup

Doar adăugați data-dismiss="alert"butonul de închidere pentru a oferi automat o funcție de închidere de alertă.

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

Metode

$().alert()

Include toate alertele cu o funcționalitate apropiată. Pentru ca alertele dvs. să fie animate când sunt închise, asigurați-vă că au aplicat deja clasa .fadeși ..in

.alert('închidere')

Închide o alertă.

  1. $ ( ".alertă" ). alertă ( „închidere” )

Evenimente

Clasa de alertă Bootstrap expune câteva evenimente pentru conectarea la funcționalitatea de alertă.

Eveniment Descriere
închide Acest eveniment se declanșează imediat când closeeste apelată metoda instanței.
închis Acest eveniment este declanșat când alerta a fost închisă (va aștepta finalizarea tranzițiilor CSS).
  1. $ ( '#alerta-mea' ). bind ( 'închis' , funcţia () {
  2. // Fă ceva…
  3. })

Despre

Faceți mai mult cu butoanele. Controlați stările butoanelor sau creați grupuri de butoane pentru mai multe componente, cum ar fi barele de instrumente.

Descărcare fișier

Exemple de utilizări

Utilizați pluginul pentru butoane pentru stări și comutări.

Stateful
Comutare unică
Caseta de bifat
Radio

Folosind bootstrap-button.js

Activați butoanele prin javascript:

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

Markup

Atributele datelor sunt parte integrantă a pluginului pentru butoane. Consultați exemplul de cod de mai jos pentru diferitele tipuri de marcare.

  1. <!-- Adăugați data-toggle="button" pentru a activa comutarea pe un singur buton -->
  2. <button class = "btn" data-toggle = "button" > Comutare unică </button>
  3.  
  4. <!-- Adăugați data-toggle="buttons-checkbox" pentru comutarea stilului casetei de selectare pe btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Stânga </button>
  7. <button class = "btn" > Mijloc </button>
  8. <button class = "btn" > Dreapta </button>
  9. </div>
  10.  
  11. <!-- Adăugați data-toggle="buttons-radio" pentru comutarea stilului radio pe btn-group -->
  12. <div class = "btn-group" data-toggle = "butoane-radio" >
  13. <button class = "btn" > Stânga </button>
  14. <button class = "btn" > Mijloc </button>
  15. <button class = "btn" > Dreapta </button>
  16. </div>

Metode

$().button('comutați')

Comută starea push. Oferă butonului aspectul că a fost activat.

Atenție! Puteți activa comutarea automată a unui buton utilizând data-toggleatributul.
  1. <button class = "btn" data-toggle = "button" > </button>

$().button('se incarca')

Setează starea butonului la încărcare - dezactivează butonul și schimbă textul cu textul de încărcare. Încărcarea textului ar trebui să fie definită pe elementul buton folosind atributul data data-loading-text.

  1. <button class = "btn" data-loading-text = "se încarcă lucruri..." > ... </button>
Atenție! Firefox persistă în starea dezactivată în timpul încărcării paginilor . O soluție pentru aceasta este utilizarea autocomplete="off".

$().button('resetare')

Resetează starea butonului - schimbă textul cu textul original.

$().button(șir)

Resetează starea butonului - schimbă textul la orice stare de text definită de date.

  1. <button class = "btn" data-complete-text = "terminat!" > ... </button>
  2. <script>
  3. $ ( '.btn' ). butonul ( 'complet' )
  4. </script>

Despre

Obțineți stiluri de bază și suport flexibil pentru componente pliabile, cum ar fi acordeoanele și navigația.

Descărcare fișier

* Necesită ca pluginul Transitions să fie inclus.

Exemplu de acordeon

Folosind pluginul colaps, am construit un widget simplu în stil acordeon:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 lupul lună tempor, sunt aliqua pune o pasăre pe ea calmar cafea de origine nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur macelar vice lomo. Jambiere occaecat bere artizanală de la fermă la masă, denim crud estetic synth nesciunt probabil că n-ai auzit de ei acuzamus labore sustenabil VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 lupul lună tempor, sunt aliqua pune o pasăre pe ea calmar cafea de origine nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur macelar vice lomo. Jambiere occaecat bere artizanală de la fermă la masă, denim crud estetic synth nesciunt probabil că n-ai auzit de ei acuzamus labore sustenabil VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 lupul lună tempor, sunt aliqua pune o pasăre pe ea calmar cafea de origine nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur macelar vice lomo. Jambiere occaecat bere artizanală de la fermă la masă, denim crud estetic synth nesciunt probabil că n-ai auzit de ei acuzamus labore sustenabil VHS.

Folosind bootstrap-collapse.js

Activați prin javascript:

  1. $ ( ".restrângere" ). colaps ()

Opțiuni

Nume tip Mod implicit Descriere
mamă selector fals Dacă selector, atunci toate elementele pliabile de sub părintele specificat vor fi închise atunci când este afișat acest element pliabil. (similar cu comportamentul tradițional la acordeon)
comutare boolean Adevărat Comută elementul pliabil la invocare

Markup

Doar adăugați data-toggle="collapse"și un data-targetelement pentru a atribui automat controlul unui element pliabil. Atributul data-targetacceptă un selector CSS pentru a aplica restrângerea. Asigurați-vă că adăugați clasa collapsela elementul pliabil. Dacă doriți să se deschidă implicit, adăugați clasa suplimentară in.

  1. <button class = "btn btn-danger" data-toggle = "restrângere" data-target = "#demo" >
  2. pliabil simplu
  3. </button>
  4.  
  5. <div id = "demo" class = "colaps in" > </div>
Atenție! Pentru a adăuga un management de grup asemănător unui acordeon la un control pliabil, adăugați atributul de date data-parent="#selector". Consultați demonstrația pentru a vedea acest lucru în acțiune.

Metode

.collapse(opțiuni)

Activează conținutul dvs. ca element pliabil. Acceptă opțiuni opționale object.

  1. $ ( '#myCollapsible' ). colaps ({
  2. comutare : fals
  3. })

.collapse('comutați')

Comută un element pliabil la afișat sau ascuns.

.collapse('arată')

Afișează un element pliabil.

.collapse('ascunde')

Ascunde un element pliabil.

Evenimente

Clasa de colaps a lui Bootstrap expune câteva evenimente pentru conectarea la funcționalitatea de colaps.

Eveniment Descriere
spectacol Acest eveniment se declanșează imediat când showeste apelată metoda instanței.
afișate Acest eveniment este declanșat atunci când un element de restrângere a fost făcut vizibil pentru utilizator (va aștepta finalizarea tranzițiilor CSS).
ascunde Acest eveniment este declanșat imediat când hidemetoda a fost apelată.
ascuns Acest eveniment este declanșat atunci când un element de colaps a fost ascuns utilizatorului (va aștepta finalizarea tranzițiilor CSS).
  1. $ ( '#myCollapsible' ). on ( 'ascuns' , function () {
  2. // Fă ceva…
  3. })

Despre

Un plugin de bază, ușor de extins, pentru crearea rapidă a texturilor elegante cu orice introducere de text din formular.

Descărcare fișier

Exemplu

Începeți să tastați în câmpul de mai jos pentru a afișa rezultatele tipărite înainte.


Folosind bootstrap-typeahead.js

Apelați tipul înainte prin javascript:

  1. $ ( '.typeahead' ). tasteaza inainte ()

Opțiuni

Nume tip Mod implicit Descriere
sursă matrice [ ] Sursa de date pentru care să interogăți.
articole număr 8 Numărul maxim de elemente de afișat în meniul drop-down.
potrivitor funcţie insensibil la majuscule Metoda folosită pentru a determina dacă o interogare se potrivește cu un articol. Acceptă un singur argument, itemîmpotriva căruia se testează interogarea. Accesați interogarea curentă cu this.query. Returnează un boolean truedacă interogarea este o potrivire.
sortator funcţie potrivire exactă, diferențiere între
majuscule și
minuscule
Metodă utilizată pentru sortarea rezultatelor de completare automată. Acceptă un singur argument itemsși are domeniul de aplicare al instanței typeahead. Faceți referire la interogarea curentă cu this.query.
iluminator funcţie evidențiază toate potrivirile implicite Metodă utilizată pentru a evidenția rezultatele autocompletare. Acceptă un singur argument itemși are domeniul de aplicare al instanței typeahead. Ar trebui să returneze html.

Markup

Adăugați atribute de date pentru a înregistra un element cu funcționalitatea typeahead.

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

Metode

.typeahead(opțiuni)

Inițializează o intrare cu un tip înainte.