Despre modale

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

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.

Folosind bootstrap-modal

Apelați modal prin javascript:

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

Opțiuni

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.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Lansați modal </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> Antet modal </h3>
  </div>
  <div class = "corp-modal" > 
    <p> Un corp fin... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Închidere </a>   
    <a href = "#" class = "btn btn-primary" > Salvați modificările </a>  
  </div>
</div>

Metode

.modal(opțiuni)

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

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

.modal('comutați')

Comută manual un modal.

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

.modal('arată')

Deschide manual un modal.

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

.modal('ascunde')

Ascunde manual un modal.

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

Evenimente

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

$ ( '#myModal' ). on ( 'ascuns' , function () {   
  // Fă ceva…
})

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

Exemple

Faceți clic pe linkurile de navigare din meniul derulant din bara de navigare și pe pastilele de mai jos pentru a testa meniurile derulante.

• Link obișnuit
• Scapă jos
  • Action
  • Another action
  • Something else here
  • Separated link
• Meniu derulant 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Meniu derulant 3
  • Action
  • Another action
  • Something else here
  • Separated link

Folosind bootstrap-dropdown.js

Apelați meniurile derulante prin javascript:

$ ( '.dropdown-toggle' ). meniu derulant ()

Markup

Pentru a adăuga rapid funcționalitatea drop-down la orice element, trebuie doar să adăugați data-toggle="dropdown"și orice meniu derulant de bootstrap valid va fi activat automat.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Link obișnuit </a></li>  
  <li class = "dropdown" id = "meniu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Scapă jos
      <b class = „caret” ></b> 
    </a>
    <ul class = "meniu derulant" > 
      <li><a href = "#" > Acțiune </a></li> 
      <li><a href = "#" > O altă acțiune </a></li> 
      <li><a href = "#" > Altceva aici </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Link separat </a></li> 
    </ul>
  </li>
  ...
</ul>

Pentru a păstra adresele URL intacte, utilizați data-targetatributul în loc de href="#".

<ul class = "nav nav-pills" > 
  <li class = „downdown” > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Scapă jos
      <b class = „caret” ></b> 
    </a>
    <ul class = "meniu derulant" > 
      ...
    </ul>
  </li>
</ul>

Metode

$().dropdown()

O API programatică pentru activarea meniurilor pentru o anumită bară de navigare sau navigare cu file.

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

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!

Folosind bootstrap-scrollspy.js

Apelați scrollspy prin javascript:

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

<body data-spy = "scroll" > ... </body>  

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:

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

Opțiuni

Evenimente

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

Exemple de file

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

• Acasă
• Profil
• Scapă jos
  • @fat
  • @mdo

Folosind bootstrap-tab.js

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

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

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

$ ( '#myTab a[href="#profile"]' ). fila ( 'arată' ); // Selectați fila după nume 
$ ( '#myTab a:first' ). fila ( 'arată' ); // Selectați prima filă 
$ ( '#myTab a:last' ). fila ( 'arată' ); // Selectați ultima filă 
$ ( '#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

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Acasă </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Mesaje </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Setări </a></li>  
</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.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Acasă </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Mesaje </a></li> 
  <li><a href = "#settings" > Setări </a></li> 
</ul>
 
<div class = "fil-conținut" > 
  <div class = "tab-pane active" id = "acasă" > ... </div>  
  <div class = "tab-pane" id = "profil" > ... </div>  
  <div class = "tab-pane" id = "mesaje" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( funcția () {  
    $ ( '#myTab a:last' ). fila ( 'arată' );
  })
</script>

Evenimente

$ ( 'a[data-toggle="tab"]' ). on ( 'arată' , funcţia ( e ) {   
  e . țintă // filă activată
  e . relatedTarget // fila anterioară
})

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.

Exemplu de utilizare a Tooltips

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

Folosind bootstrap-tooltip.js

Declanșați balonul explicativ prin javascript:

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

Opțiuni

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.

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

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

.tooltip('ascunde')

Ascunde explicația unui element.

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

.tooltip('comutați')

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

$ ( '#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

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:

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

Opțiuni

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.

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

.popover('ascunde')

Ascunde un popover de elemente.

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

.popover('comutați')

Comută un popover de elemente.

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

Despre alerte

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

Exemple de alerte

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

Folosind bootstrap-alert.js

Activați respingerea unei alerte prin javascript:

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

Markup

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

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

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

Evenimente

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

$ ( '#alerta-mea' ). bind ( 'închis' , funcţia () {   
  // Fă ceva…
})

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.

Exemple de utilizări

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

Folosind bootstrap-button.js

Activați butoanele prin javascript:

$ ( '.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.

<!-- Adăugați data-toggle="button" pentru a activa comutarea pe un singur buton -->
<button class = "btn" data-toggle = "button" > Comutare unică </button>  
 
<!-- Adăugați data-toggle="buttons-checkbox" pentru comutarea stilului casetei de selectare pe btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Stânga </button> 
  <button class = "btn" > Mijloc </button> 
  <button class = "btn" > Dreapta </button> 
</div>
 
<!-- Adăugați data-toggle="buttons-radio" pentru comutarea stilului radio pe btn-group -->
<div class = "btn-group" data-toggle = "butoane-radio" >  
  <button class = "btn" > Stânga </button> 
  <button class = "btn" > Mijloc </button> 
  <button class = "btn" > Dreapta </button> 
</div>

Metode

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

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

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

<button class = "btn" data-loading-text = "se încarcă lucruri..." > ... </button>   

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

<button class = "btn" data-complete-text = "terminat!" > ... </button>   
<script>
  $ ( '.btn' ). butonul ( 'complet' )
</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:

Folosind bootstrap-collapse.js

Activați prin javascript:

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

Opțiuni

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.

<button class = "btn btn-danger" data-toggle = "restrângere" data-target = "#demo" >   
  pliabil simplu
</button>
 
<div id = "demo" class = "colaps in" > … </div>  

Metode

.collapse(opțiuni)

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

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

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

$ ( '#myCollapsible' ). on ( 'ascuns' , function () {   
  // Fă ceva…
})

Despre

Un plugin generic pentru parcurgerea elementelor. Un carusel.

Exemplu de carusel

Urmărește prezentarea de mai jos.

Prima etichetă de miniatură

Cras justo odio, dapibus ac facilitis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

Folosind bootstrap-carousel.js

Apelați prin javascript:

$ ( '.carusel' ). carusel ()

Opțiuni

Markup

Atributele de date sunt utilizate pentru controalele anterioare și următoare. Consultați exemplul de markup de mai jos.

<div id = "myCarousel" class = "diapozitiv carusel" >  
  <!-- Elemente carusel -->
  <div class = "carusel-inner" > 
    <div class = "articol activ" > … </div> 
    <div class = "articol" > … </div> 
    <div class = "articol" > … </div> 
  </div>
  <!-- Nav carusel -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carusel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Metode

.carusel(opțiuni)

Inițializează caruselul cu opțiuni opționale objectși începe să parcurgă articole.

$ ( '.carusel' ). carusel ({
  interval : 2000 
})

.carusel('ciclu')

Parcurge articolele din carusel de la stânga la dreapta.

.carusel('pauză')

Oprește caruselul să parcurgă articole.

.carusel(număr)

Ciclulează caruselul la un anumit cadru (bazat pe 0, similar cu o matrice).

.carusel('prev')

Se trece la articolul anterior.

.carusel('următorul')

Se trece la articolul următor.

Evenimente

Clasa carusel a lui Bootstrap expune două evenimente pentru conectarea la funcționalitatea carusel.

Despre

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

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:

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

Opțiuni

Markup

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

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

Metode

.typeahead(opțiuni)

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