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:

$ ( „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:

$ ( „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ă.

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

$ ( "#myModal" ). modal () // inițializat cu valorile implicite                       
$ ( "#myModal" ). modal ({ keyboard : false }) // inițializat fără tastatură     
$ ( "#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.

var bootstrapButton = $ . fn . butonul . noConflict () // returnează $.fn.button la valoarea atribuită anterior 
$ . 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.

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

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.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> Antet modal </h3>
  </div>
  <div class = "corp-modal" > 
    <p> Un corp fin... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Închidere </a>  
    <a href = "#" class = "btn btn-primary" > Salvați modificările </a>  
  </div>
</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.

<!-- Buton pentru a declanșa modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Lansați modelul demonstrativ </a>    
 
<!-- Modal -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Antet modal </h3> 
  </div>
  <div class = "corp-modal" > 
    <p> Un corp fin... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Închidere </button>   
    <button class = "btn btn-primary" > Salvați modificările </button> 
  </div>
</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.

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

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

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

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

.modal('comutați')

Comută manual un mod.

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

Exemple

Adăugați meniuri drop-down la aproape orice cu acest plugin simplu, inclusiv bara de navigare, file și pastile.

Într-o bară de navigare

În filele

Utilizare

Prin atribute de date

Adăugați data-toggle="dropdown"la un link sau la un buton pentru a comuta un meniu drop-down.

<div class = „menu derulant” > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Declanșator dropdown </a>   
  <ul class = "dropdown-menu" role = "meniu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

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

<div class = „menu derulant” > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Scapă jos
    <b class = „caret” ></b> 
  </a>
  <ul class = "dropdown-menu" role = "meniu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Prin JavaScript

Apelați meniurile derulante prin JavaScript:

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

Opțiuni

Nici unul

Metode

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

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

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.

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

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

Prin JavaScript

Apelați scrollspy prin JavaScript:

$ ( '#navbar' ). scrollspy ()

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

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

Evenimente

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.

Utilizare

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

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:

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:

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

Markup

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

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

.tooltip('distruge')

Ascunde și distruge sfatul instrument al unui element.

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

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:

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

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

.popover('distruge')

Ascunde și distruge popover-ul unui element.

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

Exemple de alerte

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

Utilizare

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

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.

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

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

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Stânga </button>  
  <button type = "button" class = "btn btn-primary" > Mijloc </button>  
  <button type = "button" class = "btn btn-primary" > Dreapta </button>  
</div>

Radio

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

<div class = "btn-group" data-toggle = "butoane-radio" >  
  <button type = "button" class = "btn btn-primary" > Stânga </button>  
  <button type = "button" class = "btn btn-primary" > Mijloc </button>  
  <button type = "button" class = "btn btn-primary" > Dreapta </button>  
</div>

Utilizare

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.

Opțiuni

Nici unul

Metode

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

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

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

<button type = "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 type = "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:

<div class = "acordeon" id = "acordeon2" >  
  <div class = "acordeon-group" > 
    <div class = "acordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "colapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Elementul de grup pliabil #1
      </a>
    </div>
    <div id = "collapseOne" class = "colapsul corpului acordeonului în" >  
      <div class = "acordeon-interior" > 
        Anim pariatur clișeu...
      </div>
    </div>
  </div>
  <div class = "acordeon-group" > 
    <div class = "acordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "colapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Elementul de grup pliabil #2
      </a>
    </div>
    <div id = "collapseTwo" class = "prăbușire corp acordeon" >  
      <div class = "acordeon-interior" > 
        Anim pariatur clișeu...
      </div>
    </div>
  </div>
</div>
...

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

<button type = "button" class = "btn btn-danger" data-toggle = "colapse" data-target = "#demo" >    
  pliabil simplu
</button>
 
<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:

$ ( ".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="".

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

Exemplu de carusel

Prezentarea de diapozitive de mai jos prezintă un plugin generic și o componentă pentru parcurgerea elementelor precum un carusel.

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.

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

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

‹ ›

<div id = "myCarousel" class = "diapozitiv carusel" >  
  <ol class = "carusel-indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- 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>

Utilizare

Prin atribute de date

Utilizați atributele de date pentru a controla cu ușurință poziția caruselului. data-slideacceptă cuvintele cheie prevsau next, care modifică poziția diapozitivului în raport cu poziția sa curentă. Ca alternativă, folosiți data-slide-topentru a transmite un index de diapozitiv brut la carusel data-slide-to="2", care săriți poziția de diapozitiv la un anumit index începând cu 0.

Prin JavaScript

Apelați manual caruselul cu:

$ ( '.carusel' ). carusel ()

Opțiuni

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

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.

Exemplu

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

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

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

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.

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

Prin JavaScript

Apelați pluginul afix prin JavaScript:

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