Individuali o cumpilati

I plugins ponu esse inclusi individualmente (ancu se certi anu bisognu di dipendenze), o tutti in una volta. Tanti bootstrap.js è bootstrap.min.js cuntenenu tutti i plugins in un unicu schedariu.

Attributi di dati

Pudete aduprà tutti i plugins Bootstrap puramente attraversu l'API di marcatura senza scrive una sola linea di JavaScript. Questa hè a prima API di Bootstrap è deve esse a vostra prima cunsiderazione quandu utilizate un plugin.

Dittu chistu, in certi situazioni pò esse desiderate di disattivà sta funziunalità. Dunque, furnimu ancu a capacità di disattivà l'API di l'attributu di dati unbinding all events on the body namespaced with `'data-api'`. Questu pare cusì:

$ ( "corpu" ). off ( '.data-api' )

In alternativa, per destinà un plugin specificu, basta include u nome di u plugin cum'è un spaziu di nome cù u spaziu di nome data-api cum'è questu:

$ ( "corpu" ). off ( '.alert.data-api' )

API di prugrammazione

Cridemu ancu chì duvete esse capace di utilizà tutti i plugins Bootstrap puramente attraversu l'API JavaScript. Tutte l'API pubbliche sò metudi unichi, incatenati, è tornanu a cullezzione attuata.

$ ( ".btn.danger" ). buttone ( "toggle" ). addClass ( "grassu" )

Tutti i metudi duveranu accettà un oggettu d'opzioni opzionali, una stringa chì mira à un metudu particulari, o nunda (chì inizia un plugin cù un cumpurtamentu predeterminatu):

$ ( "#myModal" ). modale () // inizializatu cù i valori predeterminati                       
$ ( "#myModal" ). modale ({ keyboard : false }) // inizializatu senza tastiera     
$ ( "#myModal" ). modale ( 'mostra' ) // inizializza è invoca a mostra immediatamente                

Ogni plugin espone ancu u so custruttore crudu nantu à una pruprietà "Constructor": $.fn.popover.Constructor. Se vulete acquistà una istanza di plugin particulari, ricuperà direttamente da un elementu: $('[rel=popover]').data('popover').

Nisun cunflittu

A volte hè necessariu di utilizà plugins Bootstrap cù altri frameworks UI. In queste circustanze, i collisioni di u spaziu di nomi ponu accade in ocasioni. Se questu succede, pudete chjamà .noConflictu plugin chì vulete rinvià u valore.

var bootstrapButton = $ . fn . buttone . noConflict () // torna $.fn.button à u valore previamente assignatu 
$ . fn . bootstrapBtn = bootstrapButton             // dà $().bootstrapBtn a funziunalità di bootstrap

Avvenimenti

Bootstrap furnisce avvenimenti persunalizati per a maiò parte di l'azzioni uniche di u plugin. In generale, questi venenu in una forma di participiu infinitu è ​​passatu - induve l'infinitivu (es. show) hè attivatu à l'iniziu di un avvenimentu, è a so forma di participiu passatu (ex. shown) hè attivatu à a fine di una azione.

Tutti l'avvenimenti infiniti furnisce a funziunalità preventDefault. Questu furnisce a capacità di piantà l'esekzione di un'azzione prima di principià.

$ ( '#myModal' ). on ( 'mostra' , funzione ( e ) {   
    if (! data ) torna e . preventDefault () // ferma u modale da esse mostratu   
})

À propositu di transizioni

Per effetti di transizione simplici, include bootstrap-transition.js una volta cù l'altri schedari JS. Sè vo aduprate u compilatu (o minificatu) bootstrap.js , ùn ci hè bisognu di include questu - hè digià quì.

Casi d'usu

Uni pochi esempi di u plugin di transizione:

• Sliding o fading in modali
• Tabulature sbiadite
• Sguassà l'alerte
• Pannelli di carrusel scorrevule

Esempii

I modali sò simplificati, ma flessibili, i prompt di dialogu cù a funziunalità minima necessaria è i predefiniti intelligenti.

Esempiu staticu

Un modale renditu cù l'intestazione, u corpu è l'inseme d'azzioni in u footer.

<div class = "fade modale di nasconde" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modale" aria-hidden = "true" > × </button>    
    <h3> Intestazione modale </h3>
  </div>
  <div class = "corpu-modale" > 
    <p> Un corpu bellu ... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Chiudi </a>  
    <a href = "#" class = "btn btn-primary" > Salvà i cambiamenti </a>  
  </div>
</div>

Demo live

Cambia un modale via JavaScript clicchendu u buttone sottu. Si scenderà è fade in da a cima di a pagina.

<!-- Pulsante per attivà modale -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Lanciari a demo modale </a>    
 
<!-- Modale -->
<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 = "modale" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Intestazione modale </h3> 
  </div>
  <div class = "corpu-modale" > 
    <p> Un corpu bellu ... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modale" aria-hidden = "true" > Chiudi </button>   
    <button class = "btn btn-primary" > Salvà i cambiamenti </button> 
  </div>
</div>

Usu

Via attributi di dati

Attivate un modale senza scrive JavaScript. Pone data-toggle="modal"nantu à un elementu di cuntrollu, cum'è un buttone, inseme cù un data-target="#foo"o href="#foo"per destinà un modale specificu per cambià.

<button type = "button" data-toggle = "modale" data-target = "#myModal" > Lanciari modale </button>   

Via JavaScript

Chjamate un modale cù id myModalcù una sola linea di JavaScript:

$ ( '#myModal' ). modale ( opzioni )

Opzioni

L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-, cum'è in data-backdrop="".

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

I metudi

.modale (opzioni)

Attiva u vostru cuntenutu cum'è modale. Accetta opzioni opzionali object.

$ ( '#myModal' ). modale ({
  tastiera : false 
})

.modal('toggle')

Cambia manualmente un modale.

$ ( '#myModal' ). modale ( 'mutu' )

.modal('mostra')

Apertura manualmente un modale.

$ ( '#myModal' ). modale ( 'mostra' )

.modal('hide')

Oculta manualmente un modale.

$ ( '#myModal' ). modale ( 'hide' )

Avvenimenti

A classa modale di Bootstrap espone uni pochi di avvenimenti per attaccà à a funziunalità modale.

$ ( '#myModal' ). on ( 'hidden' , funzione () {   
  // fà qualcosa...
})

Esempii

Aghjunghjite menu dropdown à quasi tuttu cù stu plugin simplice, cumprese a barra di navigazione, tabulazioni è pillole.

Dentru un navbar

Dentru tabulazioni

Usu

Via attributi di dati

Aghjunghjite data-toggle="dropdown"à un ligame o un buttone per commutà un dropdown.

<div class = "dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > trigger dropdown </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Per mantene l'URL intactu, utilizate l' data-targetattributu invece di href="#".

<div class = "dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Dropdown
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Via JavaScript

Chjamate i dropdown via JavaScript:

$ ( '.dropdown-toggle' ). menu a tendina ()

Opzioni

Nimu

I metudi

$().dropdown('toggle')

Una API programmatica per cambià i menu per una barra di navigazione o una navigazione di tabulazione.

Esempiu in a barra di navigazione

U plugin ScrollSpy hè per aghjurnà automaticamente i miri di navigazione basatu nantu à a pusizione di scroll. Scroll the area below the navbar and watch the active class change. I sub-elementi di menu a tendina saranu ancu evidenziati.

Usu

Via attributi di dati

Per aghjunghje facilmente u cumpurtamentu scrollspy à a vostra navigazione in cima, basta aghjunghje data-spy="scroll"à l'elementu chì vulete spia (a più tipica questu seria u corpu) è data-target=".navbar"selezziunate quale navigatore aduprà. Vulete aduprà scrollspy cù un .navcumpunente.

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

Via JavaScript

Chjamate u scrollspy via JavaScript:

$ ( '#navbar' ). scrollspy ()

I metudi

.scrollspy('refresh')

Quandu si usa scrollspy in cunghjunzione cù l'aghjunzione o l'eliminazione di elementi da u DOM, avete bisognu di chjamà u metudu di rinfrescante cusì:

$ ( '[data-spy="scroll"]' ). ognunu ( funzione () {  
  var $spy = $ ( questu ). scrollspy ( 'refresh' )
});

Opzioni

L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-, cum'è in data-offset="".

Avvenimenti

Esempi di tabs

Aghjunghjite una funziunalità di tabulazione rapida è dinamica per a transizione attraversu i pannelli di cuntenutu locale, ancu per mezu di menu a tendina.

Usu

Attivà e tabulazioni tabulabili via JavaScript (ogni tabulazione deve esse attivata individualmente):

$ ( '#myTab a' ). cliccate ( funzione ( e ) {  
  e . preventDefault ();
  $ ( questu ). tab ( 'mostra' );
})

Pudete attivà tabulazioni individuali in parechje manere:

$ ( '#myTab a[href="#profile"]' ). tab ( 'mostra' ); // Selezziunate tabulazione per nome 
$ ( '#myTab a:first' ). tab ( 'mostra' ); // Selezziunà a prima tabulazione 
$ ( '#myTab a:last' ). tab ( 'mostra' ); // Selezziunate l'ultima tabulazione 
$ ( '#myTab li:eq(2) a' ). tab ( 'mostra' ); // Selezziunate a terza tabulazione (0-indexata) 

Marcatura

Pudete attivà una tabulazione o una navigazione di pillola senza scrivite JavaScript per solu specificà data-toggle="tab"o data-toggle="pill"nantu à un elementu. Aghjunghjendu nave nav-tabsclassi à a tabulazione ulapplicà u stilu di tabulazione Bootstrap.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Home </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profilu </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Missaghji </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Impostazioni </a></li>  
</ul>

I metudi

$().tab

Attiva un elementu di tabulazione è cuntenutu di cuntenutu. A tabulazione deve avè un data-targeto un hreftargeting un node di cuntainer in u DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Profile </a></li> 
  <li><a href = "#messages" > Missaghji </a></li> 
  <li><a href = "#settings" > Settings </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "casa" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( funzione () {  
    $ ( '#myTab a:last' ). tab ( 'mostra' );
  })
</script>

Avvenimenti

$ ( 'a[data-toggle="tab"]' ). on ( 'mostratu' , funzione ( e ) {   
  e . target // tab attivata
  e . relatedTarget // tab precedente
})

Esempii

Ispiratu da l'excellente plugin jQuery.tipsy scrittu da Jason Frame; Tooltips sò una versione aghjurnata, chì ùn si basa micca nantu à l'imaghjini, utilizate CSS3 per animazioni, è attributi di dati per u almacenamentu di titulu lucale.

Per ragioni di rendiment, u tooltip è popover data-apis sò opt in, vale à dì chì duvete inizializà da voi stessu .

Passa sopra i ligami sottu per vede tooltips:

Quattru direzzione

Tooltips in gruppi di input

Quandu aduprate tooltips è popovers cù i gruppi di input Bootstrap, avete da stabilisce l' containeropzione (documentata quì sottu) per evità l'effetti secundari indesiderati.

Usu

Trigger u tooltip via JavaScript:

$ ( '#esempiu' ). tooltip ( opzioni )

Opzioni

L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-, cum'è in data-animation="".

Marcatura

<a href = "#" data-toggle = "tooltip" title = "prima tooltip" > passa sopra à mè </a>   

I metudi

$().tooltip(opzioni)

Attacca un gestore di tooltip à una cullizzioni di elementi.

.tooltip('mostra')

Revela u tooltip di l'elementu.

$ ( '#elementu' ). tooltip ( 'mostra' )

.tooltip('hide')

Nasconde u tooltip di un elementu.

$ ( '#elementu' ). tooltip ( 'hide' )

.tooltip('toggle')

Commuta u tooltip di un elementu.

$ ( '#elementu' ). tooltip ( 'alternativu' )

.tooltip('distrughje')

Oculta è distrugge u tooltip di un elementu.

$ ( '#elementu' ). tooltip ( 'distrughje' )

Esempii

Aghjunghjite picculi sovrapposizioni di cuntenutu, cum'è quelli nantu à l'iPad, à qualsiasi elementu per l'alloghju di l'infurmazione secundaria. Passa sopra u buttone per attivà u popover. Esige Tooltip per esse inclusu.

Popover staticu

Quattru opzioni sò dispunibuli: in cima, a diritta, in fondu è a manca allinata.

Nisuna marcatura mostrata cum'è popovers sò generati da JavaScript è cuntenutu in un dataattributu.

Demo live

Quattru direzzione

Usu

Abilita popovers via JavaScript:

$ ( '#esempiu' ). popover ( opzioni )

Opzioni

L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-, cum'è in data-animation="".

Marcatura

Per ragioni di rendiment, u Tooltip è Popover data-apis sò opt in. Se vulete usà solu specificate una opzione selettore.

I metudi

$().popover(opzioni)

Inizializza popovers per una cullizzioni di elementi.

.popover('mostra')

Revela un popover di elementi.

$ ( '#elementu' ). popover ( 'mostra' )

.popover('hide')

Nasconde un popover di elementi.

$ ( '#elementu' ). popover ( 'hide' )

.popover('toggle')

Commuta un popover di elementi.

$ ( '#elementu' ). popover ( 'alternativu' )

.popover('distrughje')

Oculta è distrugge u popover di un elementu.

$ ( '#elementu' ). popover ( 'distrughje' )

Esempi di avvisi

Aghjunghjite a funziunalità di licenzià à tutti i missaghji d'alerta cù stu plugin.

Usu

Abilita l'eliminazione di una alerta via JavaScript:

$ ( ".alert" ). alerta ()

Marcatura

Basta à aghjunghje data-dismiss="alert"à u vostru buttone vicinu per dà automaticamente una funziunalità di avvisu vicinu.

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

I metudi

$().alert()

Avvolge tutte l'alerte cù una funziunalità stretta. Per avè i vostri alerti animati quandu sò chjusi, assicuratevi di avè a classe .fadeè .indigià applicata à elli.

.alert('close')

Chiude una alerta.

$ ( ".alert" ). alerta ( 'close' )

Avvenimenti

A classa d'alerta di Bootstrap espone uni pochi di avvenimenti per attaccà à a funziunalità d'alerta.

$ ( '#my-alert' ). bind ( 'chjusu' , funzione () {   
  // fà qualcosa...
})

Esempiu di usu

Fate più cù i buttoni. Cuntrolla i stati di u buttone o crea gruppi di buttoni per più cumpunenti cum'è toolbars.

Stateful

Aghjunghjite data-loading-text="Loading..."per utilizà un statu di carica nantu à un buttone.

<button type = "button" class = "btn btn-primary" data-loading-text = "Carica..." > Statu di carica </button>   

Toggle unicu

Aghjunghjite data-toggle="button"per attivà a basculazione nantu à un unicu buttone.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Unicu Toggle </button>   

Checkbox

Aghjunghjite data-toggle="buttons-checkbox"per u stilu di checkbox basculà nantu à btn-group.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Left </button>  
  <button type = "button" class = "btn btn-primary" > Middle </button>  
  <button type = "button" class = "btn btn-primary" > Destra </button>  
</div>

Radio

Aghjunghjite data-toggle="buttons-radio"per u stilu di radiu basculà nantu à btn-group.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Left </button>  
  <button type = "button" class = "btn btn-primary" > Middle </button>  
  <button type = "button" class = "btn btn-primary" > Destra </button>  
</div>

Usu

Abilita i buttoni via JavaScript:

$ ( '.nav-tabs' ). buttone ()

Marcatura

L'attributi di dati sò integrali à u plugin di buttone. Verificate l'esempiu di codice sottu per i varii tipi di marcatura.

Opzioni

Nimu

I metudi

$().button('toggle')

Toggles push state. Dà u buttone l'apparenza chì hè stata attivata.

<button type = "button" class = "btn" data-toggle = "button" > ... </button>    

$().button('caricamentu')

Imposta u statu di u buttone à carica - disattiva u buttone è scambia u testu à u testu di carica. U testu di caricamentu deve esse definitu nantu à l'elementu buttone cù l'attributu di dati data-loading-text.

<button type = "button" class = "btn" data-loading-text = "carricamentu di cose..." > ... </button>    

$().button('reset')

Resetta u statu di u buttone - scambia u testu à u testu originale.

$().button(string)

Resetta u statu di u buttone - scambia u testu à qualsiasi statu di testu definitu di dati.

<button type = "button" class = "btn" data-complete-text = "finitu!" > ... </button>    
<script>
  $ ( '.btn' ). buttone ( 'completu' )
</script>

À propositu

Ottene stili di basa è supportu flessibile per cumpunenti pieghevoli cum'è accordioni è navigazione.

* Richiede chì u plugin Transitions sia inclusu.

Esempiu di accordion

Utilizendu u plugin di colapsu, avemu custruitu un widget simplice di stile di accordion:

<div class = "accordion" id = "accordion2" >  
  <div class = "gruppu di fisarmonica" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Elementu di u gruppu colapsibile #1
      </a>
    </div>
    <div id = "collapseOne" class = "collapse di fisarmonica in" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class = "gruppu di fisarmonica" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Elementu di u gruppu colapsibile #2
      </a>
    </div>
    <div id = "collapseTwo" class = "collapsu di corpu di fisarmonica" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

Pudete ancu aduprà u plugin senza u marcatu di accordion. Fate un buttone per attivà l'espansione è u colapsamentu di un altru elementu.

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  semplice colapsable
</button>
 
<div id = "demo" class = "collapse in" > ... </div>  

Usu

Via attributi di dati

Basta aghjunghje data-toggle="collapse"è un data-targetelementu per assignà automaticamente u cuntrollu di un elementu colapsable. L' data-targetattributu accetta un selettore css per applicà u collapse. Assicuratevi di aghjunghje a classa collapseà l'elementu colapsable. Se vulete chì l'apertura predefinita, aghjunghje a classa supplementaria in.

Per aghjunghje una gestione di gruppu cum'è accordioni à un cuntrollu colapsibile, aghjunghje l'attributu di dati data-parent="#selector". Consultate a demo per vede questu in azione.

Via JavaScript

Abilita manualmente cù:

$ ( ".collapse" ). collapse ()

Opzioni

L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-, cum'è in data-parent="".

I metudi

.collapse (opzioni)

Attiva u vostru cuntenutu cum'è un elementu colapsable. Accetta opzioni opzionali object.

$ ( '#myCollapsible' ). collapse ({
  toggle : falsu 
})

.collapse('bascule')

Cambia un elementu pieghevule per esse mostratu o oculatu.

.collapse('mostra')

Mostra un elementu colapsable.

.collapse('hide')

Oculta un elementu colapsable.

Avvenimenti

A classa di colapsu di Bootstrap espone uni pochi di avvenimenti per attaccà à a funziunalità di colapsu.

$ ( '#myCollapsible' ). on ( 'hidden' , funzione () {   
  // fà qualcosa...
})

Esempiu di carrusel

U slideshow sottu mostra un plugin genericu è cumpunente per u ciclismu attraversu elementi cum'è un carrusel.

Prima etichetta miniatura

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.

Seconda etichetta miniatura

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.

Terza etichetta miniatura

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.

‹ ›

<div id = "myCarousel" class = "carousel slide" >  
  <ol class = "carousel-indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "attivu" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Elementi di carrusel -->
  <div class = "carousel-inner" > 
    <div class = "elementu attivu" > ... </div> 
    <div class = "elementu" > ... </div> 
    <div class = "elementu" > ... </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Usu

Via attributi di dati

Aduprate l'attributi di dati per cuntrullà facilmente a pusizione di u carrusel. data-slideaccetta e parolle chjave prevo next, chì altera a pusizione di slide relative à a so pusizione attuale. In alternativa, aduprate data-slide-toper passà un indice di diapositiva crudu à u carrusel data-slide-to="2", chì salta a pusizione di slide à un indice particulari chì principia cù 0.

Via JavaScript

Chjamate carousel manualmente cù:

$ ( '.carousel' ). carrusel ()

Opzioni

L'opzioni ponu esse passate per attributi di dati o JavaScriptz. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-, cum'è in data-interval="".

I metudi

.carousel (opzioni)

Inizializza u carrusel cù opzioni opzionali objectè principia à ciclu per l'articuli.

$ ( '.carousel' ). carrusel ({
  intervallu : 2000 
})

.carousel('ciclu')

Cicli attraversu l'articuli di carrusel da manca à diritta.

.carousel('pausa')

Impedisce à u carrusel di passà in bicicletta attraversu l'articuli.

.carousel (numeru)

Cicla u carrusel à un quadru particulari (basatu 0, simile à un array).

.carousel('prev')

Cicli à l'articulu precedente.

.carousel('next')

Cicli à u prossimu articulu.

Avvenimenti

A classa di carrusel di Bootstrap espone dui avvenimenti per attaccà à a funziunalità di carrusel.

Esempiu

Un plugin basicu, facilmente allargatu per creà rapidamente caratteri eleganti cù qualsiasi input di testu di forma.

<input type = "text" data-provide = "typeahead" >  

Vulete stabilisce autocomplete="off"per impedisce chì i menu predeterminati di u navigatore appariscenu sopra à u menù dropdown Bootstrap.

Usu

Via attributi di dati

Aghjunghjite attributi di dati per registrà un elementu cù funziunalità typeahead cum'è mostra in l'esempiu sopra.

Via JavaScript

Chjamate u typeahead manualmente cù:

$ ( '.typeahead' ). scrive in avanti ()

Opzioni

L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-, cum'è in data-source="".

I metudi

.typeahead (opzioni)

Inizializza un input cù un typeahead.

Esempiu

A subnavigazione à a manca hè una demo live di u plugin affix.

Usu

Via attributi di dati

Per aghjunghje facilmente u cumpurtamentu affissu à qualsiasi elementu, aghjunghje solu data-spy="affix"à l'elementu chì vulete spià. Allora utilizate l'offsets per definisce quandu si deve attivare è disattivà u pinning di un elementu.

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

Via JavaScript

Chjamate u plugin affissu via JavaScript:

$ ( '#navbar' ). affissu ()

Opzioni

L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-, cum'è in data-offset-top="200".