JavaScript

Dați viață componentelor Bootstrap – acum cu 13 plugin-uri jQuery personalizate.

Individual sau compilat

Pluginurile pot fi incluse individual (deși unele au dependențe necesare) sau toate odată. Atât bootstrap.js , cât și bootstrap.min.js conțin toate pluginurile într-un singur fișier.

Atributele datelor

Puteți utiliza toate pluginurile Bootstrap doar prin intermediul API-ului de marcare, fără a scrie o singură linie de JavaScript. Acesta este API-ul de primă clasă al Bootstrap și ar trebui să fie prima dvs. considerație atunci când utilizați un plugin.

Acestea fiind spuse, în unele situații poate fi de dorit să dezactivați această funcționalitate. Prin urmare, oferim și posibilitatea de a dezactiva API-ul atributului de date prin dezlegarea tuturor evenimentelor din corpul spațial de nume cu `'data-api'`. Acesta arată astfel:

  1. $ ( „corp” ). off ( '.data-api' )

Alternativ, pentru a viza un anumit plugin, includeți doar numele pluginului ca spațiu de nume împreună cu spațiul de nume data-api, astfel:

  1. $ ( „corp” ). off ( '.alert.data-api' )

API-ul programatic

De asemenea, credem că ar trebui să puteți utiliza toate pluginurile Bootstrap doar prin API-ul JavaScript. Toate API-urile publice sunt metode unice, care pot fi înlănțuite și returnează colecția asupra căreia se acționează.

  1. $ ( ".btn.danger" ). butonul ( "comutați" ). addClass ( „grasă” )

Toate metodele ar trebui să accepte un obiect opțional opțional, un șir care vizează o anumită metodă sau nimic (care inițiază un plugin cu comportament implicit):

  1. $ ( "#myModal" ). modal () // inițializat cu valorile implicite
  2. $ ( "#myModal" ). modal ({ keyboard : false }) // inițializat fără tastatură
  3. $ ( "#myModal" ). modal ( 'show' ) // inițializează și invocă show imediat

Fiecare plugin își expune, de asemenea, constructorul brut pe o proprietate `Constructor`: $.fn.popover.Constructor. Dacă doriți să obțineți o anumită instanță de plugin, preluați-o direct dintr-un element: $('[rel=popover]').data('popover').

Fără conflict

Uneori este necesar să utilizați pluginuri Bootstrap cu alte cadre UI. În aceste circumstanțe, pot apărea ocazional coliziuni ale spațiului de nume. Dacă se întâmplă acest lucru, puteți apela .noConflictla pluginul căruia doriți să reveniți la valoarea.

  1. var bootstrapButton = $ . fn . butonul . noConflict () // returnează $.fn.button la valoarea atribuită anterior
  2. $ . fn . bootstrapBtn = bootstrapButton // oferă $().bootstrapBtn funcționalitatea bootstrap

Evenimente

Bootstrap oferă evenimente personalizate pentru majoritatea acțiunilor unice ale pluginului. În general, acestea vin într-o formă de infinitiv și participiu trecut - unde infinitivul (ex. show) este declanșat la începutul unui eveniment, iar forma sa de participiu trecut (ex. shown) este declanșat la finalizarea unei acțiuni.

Toate evenimentele infinitive oferă funcționalitatea preventDefault. Aceasta oferă posibilitatea de a opri execuția unei acțiuni înainte de a începe.

  1. $ ( '#myModal' ). on ( 'arată' , funcţia ( e ) {
  2. dacă (! date ) returnează e . preventDefault () // oprește afișarea modalului
  3. })

Despre tranziții

Pentru efecte de tranziție simple, includeți bootstrap-transition.js o dată alături de celelalte fișiere JS. Dacă utilizați bootstrap.js compilat (sau minimizat) , nu este nevoie să îl includeți - este deja acolo.

Cazuri de utilizare

Câteva exemple de plugin de tranziție:

  • Alunecare sau decolorare în modal
  • Se estompează filele
  • Distingerea alertelor
  • Geamuri de carusel glisante

Exemple

Modalurile sunt raționalizate, dar flexibile, solicitări de dialog cu funcționalitatea minimă necesară și valori implicite inteligente.

Exemplu static

Un mod redat cu antet, corp și un set de acțiuni în subsol.

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </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" > Închidere </a>
  11. <a href = "#" class = "btn btn-primary" > Salvați modificările </a>
  12. </div>
  13. </div>

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.

  1. <!-- Buton pentru a declanșa modal -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Lansați modelul demonstrativ </a>
  3.  
  4. <!-- Modal -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > Antet modal </h3>
  9. </div>
  10. <div class = "corp-modal" >
  11. <p> Un corp fin... </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Închidere </button>
  15. <button class = "btn btn-primary" > Salvați modificările </button>
  16. </div>
  17. </div>

Utilizare

Prin atribute de date

Activați un mod fără a scrie JavaScript. Setați data-toggle="modal"pe un element de controler, cum ar fi un buton, împreună cu data-target="#foo"sau href="#foo"pentru a viza un anumit mod de comutare.

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > Lansați modal </button>

Prin JavaScript

Apelați un modal cu id myModalcu o singură linie de JavaScript:

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

Opțiuni

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atributele datelor, adăugați numele opțiunii la data-, ca în data-backdrop="".

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.
la distanta cale fals

Dacă este furnizată o adresă URL la distanță, conținutul va fi încărcat prin loadmetoda jQuery și injectat în fișierul .modal-body. Dacă utilizați API-ul de date, puteți utiliza alternativ hrefeticheta pentru a specifica sursa de la distanță. Un exemplu în acest sens este prezentat mai jos:

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

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

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

Exemplu în bara de navigare

Pluginul ScrollSpy este pentru actualizarea automată a țintelor de navigare pe baza poziției derulării. Derulați zona de sub bara de navigare și urmăriți schimbarea clasei active. Subelementele derulante vor fi de asemenea evidențiate.

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


Utilizare

Prin atribute de date

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) și data-target=".navbar"să selectați ce navigație să utilizați. Veți dori să utilizați scrollspy cu o .navcomponentă.

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

Prin JavaScript

Apelați scrollspy prin JavaScript:

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

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atributele datelor, adăugați numele opțiunii la data-, ca în data-offset="".

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.

Exemple de file

Adăugați o funcție rapidă și dinamică a filei pentru a trece prin panourile de conținut local, 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.


Utilizare

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

Exemple

Inspirat de excelentul plugin jQuery.tipsy scris de Jason Frame; Sfaturile 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.

Din motive de performanță, balonul și popover-ul de date sunt înscrise, ceea ce înseamnă că trebuie să le inițializați singur .

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

Patru direcții

Sfaturi instrumente în grupurile de intrare

Când utilizați sfaturi și popover-uri cu grupurile de intrare Bootstrap, va trebui să setați opțiunea container(documentată mai jos) pentru a evita efectele secundare nedorite.


Utilizare

Declanșați balonul cu ajutorul JavaScript:

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

Opțiuni

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atributele datelor, adăugați numele opțiunii la data-, ca în data-animation="".

Nume tip Mod implicit Descriere
animaţie boolean Adevărat aplicați o tranziție de estompare css la sfatul instrumentului
html boolean fals Inserați codul html în sfatul instrumentului. Dacă este fals, textmetoda jquery va fi folosită pentru a insera conținut în dom. Folosiți text dacă vă îngrijorează atacurile XSS.
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 „focalizare” cum este declanșat tooltip - faceți clic pe | hover | focus | manual. Rețineți că treceți mai multe tipuri de declanșare, separate prin spațiu, declanșatoare.
î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 }

recipient șir | fals fals

Adaugă indicația la un anumit elementcontainer: 'body'

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

Markup

  1. <a href = "#" data-toggle = "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” )

.tooltip('distruge')

Ascunde și distruge sfatul instrument al unui element.

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

Exemple

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. Treceți cursorul peste buton pentru a declanșa popover-ul. Necesită includerea balonului explicativ .

Popover static

Sunt disponibile patru opțiuni: aliniat sus, dreapta, jos și stânga.

Popover top

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

Popover dreapta

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

Popover de jos

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

Popover stânga

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

Niciun marcaj afișat deoarece popover-urile sunt generate din JavaScript și conținutul dintr-un dataatribut.

Demo live

Patru direcții


Utilizare

Activați popover-urile prin JavaScript:

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

Opțiuni

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atributele datelor, adăugați numele opțiunii la data-, ca în data-animation="".

Nume tip Mod implicit Descriere
animaţie boolean Adevărat aplicați o tranziție de estompare css la sfatul instrumentului
html boolean fals Introduceți html în popover. Dacă este fals, textmetoda jquery va fi folosită pentru a insera conținut în dom. Folosiți text dacă vă îngrijorează atacurile XSS.
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 'clic' cum se declanșează popoverul - faceți clic pe | 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 }

recipient șir | fals fals

Adaugă popover-ul la un anumit elementcontainer: 'body'

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

.popover('distruge')

Ascunde și distruge popover-ul unui element.

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

Exemple de alerte

Adăugați funcționalitatea de respingere la toate mesajele de alertă cu acest plugin.

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


Utilizare

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

Exemple de utilizări

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.

Stateful

Adăugați data-loading-text="Loading..."pentru a utiliza o stare de încărcare pe un buton.

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Se încarcă..." > Starea de încărcare </button>

Comutare unică

Adăugați data-toggle="button"pentru a activa comutarea pe un singur buton.

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > Comutare unică </button>

Caseta de bifat

Adăugați data-toggle="buttons-checkbox"pentru comutarea stilului casetei de selectare pe btn-group.

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Stânga </button>
  3. <button type = "button" class = "btn btn-primary" > Mijloc </button>
  4. <button type = "button" class = "btn btn-primary" > Dreapta </button>
  5. </div>

Radio

Adăugați data-toggle="buttons-radio"pentru comutarea stilului radio pe btn-group.

  1. <div class = "btn-group" data-toggle = "butoane-radio" >
  2. <button type = "button" class = "btn btn-primary" > Stânga </button>
  3. <button type = "button" class = "btn btn-primary" > Mijloc </button>
  4. <button type = "button" class = "btn btn-primary" > Dreapta </button>
  5. </div>

Utilizare

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.

Opțiuni

Nici unul

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 type = "button" class = "btn" data-toggle = "button" > </button>

$().button('se încarcă')

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

* 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.
  1. <div class = "acordeon" id = "acordeon2" >
  2. <div class = "acordeon-group" >
  3. <div class = "acordion-heading" >
  4. <a class = "accordion-toggle" data-toggle = "colapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. Elementul de grup pliabil #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "colapsul corpului acordeonului în" >
  9. <div class = "acordeon-interior" >
  10. Anim pariatur clișeu...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "acordeon-group" >
  15. <div class = "acordion-heading" >
  16. <a class = "accordion-toggle" data-toggle = "colapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Elementul de grup pliabil #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "prăbușire corp acordeon" >
  21. <div class = "acordeon-interior" >
  22. Anim pariatur clișeu...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

De asemenea, puteți utiliza pluginul fără marcajul acordeonului. Faceți ca un buton să comute extinderea și restrângerea unui alt element.

  1. <button type = "button" class = "btn btn-danger" data-toggle = "colapse" data-target = "#demo" >
  2. pliabil simplu
  3. </button>
  4.  
  5. <div id = "demo" class = "colaps in" > </div>

Utilizare

Prin atribute de date

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.

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.

Prin JavaScript

Activați manual cu:

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

Opțiuni

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atributele datelor, adăugați numele opțiunii la data-, ca în data-parent="".

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

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

Exemplu

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

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

Veți dori să setați autocomplete="off"să împiedicați apariția meniurilor implicite ale browserului peste meniul derulant Bootstrap typeahead.


Utilizare

Prin atribute de date

Adăugați atribute de date pentru a înregistra un element cu funcționalitatea typeahead, așa cum se arată în exemplul de mai sus.

Prin JavaScript

Apelați manual tipul înainte cu:

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

Opțiuni

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atributele datelor, adăugați numele opțiunii la data-, ca în data-source="".

Nume tip Mod implicit Descriere
sursă matrice, funcție [ ] Sursa de date pentru care să interogăți. Poate fi o matrice de șiruri de caractere sau o funcție. Funcției primesc două argumente, queryvaloarea din câmpul de intrare și processapelul invers. Funcția poate fi utilizată sincron prin returnarea sursei de date direct sau asincron prin processargumentul unic al callback-ului.
articole număr 8 Numărul maxim de elemente de afișat în meniul drop-down.
minLungime număr 1 Lungimea minimă a caracterelor necesară înainte de a declanșa sugestiile de completare automată
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.
actualizator funcţie returnează articolul selectat Metoda folosită pentru returnarea articolului selectat. Acceptă un singur argument, itemși are domeniul de aplicare al instanței typeahead.
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.

Metode

.typeahead(opțiuni)

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

Exemplu

Subnavigația din stânga este o demonstrație live a pluginului afix.


Utilizare

Prin atribute de date

Pentru a adăuga cu ușurință un comportament de afixare oricărui element, trebuie doar să adăugați data-spy="affix"la elementul pe care doriți să îl spionați. Apoi utilizați decalaje pentru a defini când să activați și să dezactivați fixarea unui element.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Atenție! Trebuie să gestionați poziția unui element fixat și comportamentul părintelui său imediat. Poziția este controlată de affix, affix-topși affix-bottom. Nu uitați să verificați dacă există un părinte potențial restrâns atunci când afixul se activează, deoarece elimină conținut din fluxul normal al paginii.

Prin JavaScript

Apelați pluginul afix prin JavaScript:

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

Opțiuni

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atributele datelor, adăugați numele opțiunii la data-, ca în data-offset-top="200".

Nume tip Mod implicit Descriere
decalaj număr | funcția | obiect 10 Pixeli de compensat față de ecran la calcularea poziției derulării. Dacă este furnizat un singur număr, decalajul va fi aplicat atât în ​​direcția de sus, cât și în cea din stânga. Pentru a asculta o singură direcție sau mai multe decalaje unice, trebuie doar să furnizați un obiect offset: { x: 10 }. Utilizați o funcție atunci când trebuie să oferiți dinamic un offset (util pentru unele modele receptive).