Individuale o compilato

I plugin possono essere inclusi singolarmente (sebbene alcuni abbiano delle dipendenze richieste) o tutti in una volta. Sia bootstrap.js che bootstrap.min.js contengono tutti i plugin in un unico file.

Attributi dei dati

Puoi utilizzare tutti i plug-in Bootstrap esclusivamente tramite l'API di markup senza scrivere una singola riga di JavaScript. Questa è l'API di prima classe di Bootstrap e dovrebbe essere la tua prima considerazione quando usi un plugin.

Detto questo, in alcune situazioni potrebbe essere desiderabile disattivare questa funzionalità. Pertanto, forniamo anche la possibilità di disabilitare l'API degli attributi dei dati svincolando tutti gli eventi sullo spazio dei nomi del corpo con `'data-api'`. Questo assomiglia a questo:

$ ( "corpo" ). spento ( '.data-api' )

In alternativa, per indirizzare un plug-in specifico, includi semplicemente il nome del plug-in come spazio dei nomi insieme allo spazio dei nomi data-api in questo modo:

$ ( "corpo" ). disattivato ( '.alert.data-api' )

API programmatica

Riteniamo inoltre che dovresti essere in grado di utilizzare tutti i plug-in Bootstrap esclusivamente tramite l'API JavaScript. Tutte le API pubbliche sono metodi singoli, concatenabili e restituiscono la raccolta su cui si è agito.

$ ( ".btn.pericolo" ). pulsante ( "commuta" ). addClass ( "grasso" )

Tutti i metodi dovrebbero accettare un oggetto opzioni opzionale, una stringa che ha come target un metodo particolare o niente (che avvia un plug-in con un comportamento predefinito):

$ ( "#myModal" ). modal () // inizializzato con i valori predefiniti                       
$ ( "#myModal" ). modal ({ keyboard : false }) // inizializzato senza tastiera     
$ ( "#myModal" ). modal ( 'show' ) // inizializza e richiama show immediatamente                

Ogni plugin espone anche il suo costruttore grezzo su una proprietà `Constructor`: $.fn.popover.Constructor. Se desideri ottenere una particolare istanza di plugin, recuperala direttamente da un elemento: $('[rel=popover]').data('popover').

Nessun conflitto

A volte è necessario utilizzare i plug-in Bootstrap con altri framework dell'interfaccia utente. In queste circostanze, possono verificarsi occasionalmente collisioni nello spazio dei nomi. Se ciò accade, puoi richiamare .noConflictil plugin di cui desideri ripristinare il valore.

var bootstrapButton = $ . fn . pulsante . noConflict () // restituisce $.fn.button al valore assegnato in precedenza 
$ . fn . bootstrapBtn = bootstrapButton             // fornisce a $().bootstrapBtn la funzionalità bootstrap

Eventi

Bootstrap fornisce eventi personalizzati per la maggior parte delle azioni uniche del plugin. Generalmente, questi si presentano in una forma di participio passato e infinito, in cui l'infinito (es. show) viene attivato all'inizio di un evento e la sua forma participio passato (es. shown) viene attivato al completamento di un'azione.

Tutti gli eventi infiniti forniscono la funzionalità preventDefault. Ciò fornisce la possibilità di interrompere l'esecuzione di un'azione prima che inizi.

$ ( '#myModal' ). on ( 'mostra' , funzione ( e ) {   
    se (! data ) restituisce e . preventDefault () // interrompe la visualizzazione del modale   
})

A proposito di transizioni

Per effetti di transizione semplici, includi bootstrap-transition.js insieme agli altri file JS. Se stai usando bootstrap.js compilato (o minimizzato) , non è necessario includerlo: è già lì.

Casi d'uso

Alcuni esempi del plugin di transizione:

• Scorrimento o dissolvenza in modali
• Schede in dissolvenza
• Avvisi in dissolvenza
• Riquadri a carosello scorrevole

Esempi

I modali sono prompt di dialogo semplificati, ma flessibili, con la funzionalità minima richiesta e impostazioni predefinite intelligenti.

Esempio statico

Un rendering modale con intestazione, corpo e serie di azioni nel piè di pagina.

< classe div = "dissolvenza nascosta modale" > 
  < classe div = "intestazione modale" > 
    < tipo di pulsante = "pulsante" class = "chiudi" data-dismiss = "modale" aria-hidden = "vero" > × </pulsante>    
    <h3> Intestazione modale </h3>
  </div>
  < classe div = "corpo modale" > 
    <p> Un bel corpo... </p>
  </div>
  < classe div = "piè di pagina modale" > 
    <a href = "#" class = "btn" > Chiudi </a>  
    <a href = "#" class = "btn btn-primary" > Salva le modifiche </a>  
  </div>
</div>

Dimostrazione dal vivo

Attiva o disattiva una modale tramite JavaScript facendo clic sul pulsante in basso. Scorrerà verso il basso e svanirà dalla parte superiore della pagina.

<!-- Pulsante per attivare il modale -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Avvia demo modale </a>    
 
<!-- Modale -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  < classe div = "intestazione modale" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Intestazione modale </h3> 
  </div>
  < classe div = "corpo modale" > 
    <p> Un bel corpo... </p>
  </div>
  < classe div = "piè di pagina modale" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Chiudi </button>   
    <button class = "btn btn-primary" > Salva le modifiche </button> 
  </div>
</div>

Utilizzo

Tramite attributi di dati

Attiva un modale senza scrivere JavaScript. Impostato data-toggle="modal"su un elemento del controller, come un pulsante, insieme a data-target="#foo"o href="#foo"per scegliere come target una modale specifica da attivare.

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

Tramite JavaScript

Chiama un modale con id myModalcon una singola riga di JavaScript:

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

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-backdrop="".

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

Metodi

.modal(opzioni)

Attiva il tuo contenuto come modale. Accetta opzioni opzionali object.

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

.modal('toggle')

Alterna manualmente un modale.

$ ( '#myModal' ). modale ( 'attiva/disattiva' )

.modal('mostra')

Apre manualmente un modale.

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

.modal('nascondi')

Nasconde manualmente un modale.

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

Eventi

La classe modale di Bootstrap espone alcuni eventi per l'aggancio alla funzionalità modale.

$ ( '#myModal' ). on ( 'nascosto' , funzione () {   
  // fare qualcosa…
})

Esempi

Aggiungi menu a discesa a quasi tutto con questo semplice plugin, inclusa la barra di navigazione, le schede e le pillole.

All'interno di una barra di navigazione

All'interno delle schede

Utilizzo

Tramite attributi di dati

Aggiungi data-toggle="dropdown"a un link o un pulsante per attivare un menu a discesa.

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

Per mantenere intatti gli URL, utilizza l' data-targetattributo invece di href="#".

< classe div = "menu a discesa" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Cadere in picchiata
    <b classe = "accento circonflesso" ></b> 
  </a>
  <ul class = "menu a discesa" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Tramite JavaScript

Chiama i menu a discesa tramite JavaScript:

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

Opzioni

Nessuno

Metodi

$().dropdown('attiva/disattiva')

Un'API programmatica per alternare i menu per una determinata barra di navigazione o per la navigazione a schede.

Esempio nella barra di navigazione

Il plug-in ScrollSpy consente di aggiornare automaticamente i target di navigazione in base alla posizione di scorrimento. Scorri l'area sotto la barra di navigazione e osserva il cambio di classe attivo. Verranno evidenziati anche gli elementi secondari a discesa.

Utilizzo

Tramite attributi di dati

Per aggiungere facilmente il comportamento scrollspy alla tua navigazione nella barra in alto, aggiungi semplicemente data-spy="scroll"l'elemento che vuoi spiare (in genere questo sarebbe il corpo) e data-target=".navbar"selezionare quale nav usare. Ti consigliamo di utilizzare scrollspy con un .navcomponente.

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

Tramite JavaScript

Chiama lo scrollspy tramite JavaScript:

$ ( '#barra di navigazione' ). spia pergamena ()

Metodi

.scrollspy('aggiorna')

Quando usi scrollspy insieme all'aggiunta o alla rimozione di elementi dal DOM, dovrai chiamare il metodo di aggiornamento in questo modo:

$ ( '[data-spy="scorri"]' ). ciascuno ( funzione () {  
  var $spia = $ ( questo ). scrollspy ( 'aggiorna' )
});

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-offset="".

Eventi

Schede di esempio

Aggiungi funzionalità di schede rapide e dinamiche per passare da un riquadro di contenuto locale all'altro, anche tramite menu a discesa.

Utilizzo

Abilita le schede tabb tramite JavaScript (ogni scheda deve essere attivata singolarmente):

$ ( '#myTab a' ). fare clic su ( funzione ( e ) {  
  e . preventDefault ();
  $ ( questo ). scheda ( "mostra" );
})

Puoi attivare singole schede in diversi modi:

$ ( '#myTab a[href="#profile"]' ). scheda ( "mostra" ); // Seleziona la scheda per nome 
$ ( '#myTab a:first' ). scheda ( "mostra" ); // Seleziona la prima scheda 
$ ( '#myTab a:last' ). scheda ( "mostra" ); // Seleziona l'ultima scheda 
$ ( '#myTab li:eq(2) a' ). scheda ( "mostra" ); // Seleziona la terza scheda (0-indicizzata) 

Marcatura

Puoi attivare una navigazione con tab o pill senza scrivere JavaScript semplicemente specificando data-toggle="tab"o data-toggle="pill"su un elemento. L'aggiunta delle classi nave nav-tabsalla scheda ulapplicherà lo stile della scheda Bootstrap.

<ul class = "nav nav-schede" > 
  <li><a href = "#home" data-toggle = "tab" > Home </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profilo </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Messaggi </a></li>  
  <li><a href = "#impostazioni" data-toggle = "scheda" > Impostazioni </a></li>  
</ul>

Metodi

$().tab

Attiva un elemento scheda e un contenitore di contenuto. La scheda dovrebbe avere a data-targeto un hrefnodo di destinazione del contenitore nel DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "attivo" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Profilo </a></li> 
  <li><a href = "#messages" > Messaggi </a></li> 
  <li><a href = "#impostazioni" > Impostazioni </a></li> 
</ul>
 
< classe div = "contenuto della scheda" > 
  <div class = "riquadro schede attivo" id = "home" > ... </div>  
  <div class = "tab-pannello" id = "profilo" > ... </div>  
  <div class = "tab-pannello" id = "messaggi" > ... </div>  
  <div class = "riquadro schede" id = "impostazioni" > ... </div>  
</div>
 
<script>
  $ ( funzione () {  
    $ ( '#myTab a:last' ). scheda ( "mostra" );
  })
</script>

Eventi

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

Esempi

Ispirato all'eccellente plugin jQuery.tipsy scritto da Jason Frame; Le descrizioni comandi sono una versione aggiornata, che non si basa sulle immagini, utilizza CSS3 per le animazioni e gli attributi dei dati per l'archiviazione del titolo locale.

Per motivi di prestazioni, il tooltip e il popover data-apis sono attivati, il che significa che devi inizializzarli tu stesso .

Passa il mouse sui link sottostanti per vedere i suggerimenti:

Quattro direzioni

Suggerimenti nei gruppi di input

Quando utilizzi descrizioni comandi e popover con i gruppi di input Bootstrap, dovrai impostare l' containeropzione (documentata di seguito) per evitare effetti collaterali indesiderati.

Utilizzo

Attiva il suggerimento tramite JavaScript:

$ ( '#esempio' ). descrizione comando ( opzioni )

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-animation="".

Marcatura

<a href = "#" data-toggle = "tooltip" title = "first tooltip" > passa il mouse sopra di me </a>   

Metodi

$().tooltip(opzioni)

Allega un gestore di descrizione comando a una raccolta di elementi.

.tooltip('mostra')

Rivela il suggerimento di un elemento.

$ ( '#elemento' ). descrizione comando ( 'mostra' )

.tooltip('nascondi')

Nasconde la descrizione comando di un elemento.

$ ( '#elemento' ). descrizione comando ( 'nascondi' )

.tooltip('commuta')

Attiva o disattiva la descrizione comando di un elemento.

$ ( '#elemento' ). descrizione comando ( 'attiva/disattiva' )

.tooltip('distruggi')

Nasconde e distrugge il suggerimento di un elemento.

$ ( '#elemento' ). descrizione comando ( 'distruggi' )

Esempi

Aggiungi piccole sovrapposizioni di contenuto, come quelle dell'iPad, a qualsiasi elemento per ospitare informazioni secondarie. Passa il mouse sopra il pulsante per attivare il popover. Richiede l'inclusione di una descrizione comando .

Popover statico

Sono disponibili quattro opzioni: allineato in alto, a destra, in basso e a sinistra.

Nessun markup mostrato poiché i popover vengono generati da JavaScript e dal contenuto all'interno di un dataattributo.

Dimostrazione dal vivo

Quattro direzioni

Utilizzo

Abilita i popover tramite JavaScript:

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

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-animation="".

Marcatura

Per motivi di prestazioni, le API di dati Tooltip e Popover sono attivate. Se desideri utilizzarle, specifica un'opzione di selezione.

Metodi

$().popover(opzioni)

Inizializza i popover per una raccolta di elementi.

.popover('mostra')

Rivela un popover di elementi.

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

.popover('nascondi')

Nasconde un popover di elementi.

$ ( '#elemento' ). popover ( "nascondi" )

.popover('commuta')

Attiva o disattiva un popover di elementi.

$ ( '#elemento' ). popover ( 'attiva/disattiva' )

.popover('distruggi')

Nasconde e distrugge il popover di un elemento.

$ ( '#elemento' ). popover ( 'distruggi' )

Esempi di avvisi

Aggiungi la funzionalità di eliminazione a tutti i messaggi di avviso con questo plugin.

Utilizzo

Abilita l'eliminazione di un avviso tramite JavaScript:

$ ( ".avviso" ). avviso ()

Marcatura

Basta aggiungere data-dismiss="alert"al pulsante di chiusura per fornire automaticamente una funzionalità di chiusura dell'avviso.

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

Metodi

$().avviso()

Avvolge tutti gli avvisi con funzionalità di chiusura. Per fare in modo che i tuoi avvisi si attivino quando sono chiusi, assicurati che la classe .fadee sia .ingià applicata.

.alert('chiudi')

Chiude un avviso.

$ ( ".avviso" ). avviso ( "chiudi" )

Eventi

La classe di avviso di Bootstrap espone alcuni eventi per l'aggancio alla funzionalità di avviso.

$ ( '#mio-avviso' ). bind ( 'chiuso' , funzione () {   
  // fare qualcosa…
})

Esempi di utilizzo

Fai di più con i pulsanti. Controlla gli stati dei pulsanti o crea gruppi di pulsanti per più componenti come le barre degli strumenti.

Stateful

Aggiungi data-loading-text="Loading..."per utilizzare uno stato di caricamento su un pulsante.

< tipo di pulsante = "pulsante" class = "btn btn-primary" data-loading-text = "Caricamento in corso..." > Stato di caricamento </button>   

Singolo interruttore

Aggiungi data-toggle="button"per attivare la commutazione su un singolo pulsante.

< tipo di pulsante = "pulsante" class = "btn btn-primary" data-toggle = "pulsante" > Commutatore singolo </button>   

Casella di controllo

Aggiungi data-toggle="buttons-checkbox"per attivare lo stile della casella di controllo su btn-group.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  < tipo di pulsante = "pulsante" class = "btn btn-primary" > Sinistra </button>  
  < tipo di pulsante = "pulsante" class = "btn btn-primary" > Centrale </button>  
  < tipo di pulsante = "pulsante" class = "btn btn-primary" > Destra </button>  
</div>

Radio

Aggiungi data-toggle="buttons-radio"per attivare/disattivare lo stile radio su btn-group.

<div class = "btn-group" data-toggle = "pulsanti-radio" >  
  < tipo di pulsante = "pulsante" class = "btn btn-primary" > Sinistra </button>  
  < tipo di pulsante = "pulsante" class = "btn btn-primary" > Centrale </button>  
  < tipo di pulsante = "pulsante" class = "btn btn-primary" > Destra </button>  
</div>

Utilizzo

Abilita pulsanti tramite JavaScript:

$ ( '.nav-schede' ). pulsante ()

Marcatura

Gli attributi dei dati sono parte integrante del plug-in del pulsante. Dai un'occhiata al codice di esempio seguente per i vari tipi di markup.

Opzioni

Nessuno

Metodi

$().button('toggle')

Commuta lo stato di spinta. Dà al pulsante l'aspetto che è stato attivato.

< tipo di pulsante = "pulsante" class = "btn" data-toggle = "pulsante" > … </button>    

$().button('caricamento')

Imposta lo stato del pulsante sul caricamento - disabilita il pulsante e scambia il testo per caricare il testo. Il testo di caricamento deve essere definito sull'elemento pulsante utilizzando l'attributo data data-loading-text.

<button type = "button" class = "btn" data-loading-text = "caricamento roba..." > ... </button>    

$().button('reimposta')

Ripristina lo stato del pulsante: scambia il testo con il testo originale.

$().pulsante(stringa)

Ripristina lo stato del pulsante: scambia il testo in qualsiasi stato di testo definito dai dati.

< tipo di pulsante = "pulsante" class = "btn" data-complete-text = "finito!" > ... </pulsante>    
<script>
  $ ( '.btn' ). pulsante ( 'completa' )
</script>

Di

Ottieni stili di base e supporto flessibile per componenti pieghevoli come fisarmoniche e navigazione.

* Richiede l'inclusione del plug-in Transizioni.

Esempio di fisarmonica

Usando il plugin di compressione, abbiamo creato un semplice widget in stile fisarmonica:

<div class = "fisarmonica" id = "fisarmonica2" >  
  < classe div = "gruppo di fisarmoniche" > 
    < classe div = "titolo a fisarmonica" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Elemento pieghevole del gruppo n. 1
      </a>
    </div>
    <div id = "collapseOne" class = "collasso corpo-fisarmonica in" >  
      <div class = "fisarmonica interna" > 
        Anim pariatur cliché...
      </div>
    </div>
  </div>
  < classe div = "gruppo di fisarmoniche" > 
    < classe div = "titolo a fisarmonica" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Elemento pieghevole del gruppo n. 2
      </a>
    </div>
    <div id = "collapseTwo" class = "collasso del corpo della fisarmonica" >  
      <div class = "fisarmonica interna" > 
        Anim pariatur cliché...
      </div>
    </div>
  </div>
</div>
...

Puoi anche utilizzare il plugin senza il markup della fisarmonica. Crea un pulsante per alternare l'espansione e la compressione di un altro elemento.

< tipo di pulsante = "pulsante" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  semplice pieghevole
</pulsante>
 
<div id = "demo" class = "comprimi in" > … </div>  

Utilizzo

Tramite attributi di dati

Basta aggiungere data-toggle="collapse"e un data-targetelemento per assegnare automaticamente il controllo di un elemento comprimibile. L' data-targetattributo accetta un selettore CSS a cui applicare la compressione. Assicurati di aggiungere la classe collapseall'elemento comprimibile. Se desideri che sia aperto di default, aggiungi la classe aggiuntiva in.

Per aggiungere la gestione dei gruppi a fisarmonica a un controllo comprimibile, aggiungi l'attributo data data-parent="#selector". Fare riferimento alla demo per vederlo in azione.

Tramite JavaScript

Abilita manualmente con:

$ ( ".comprimi" ). collassare ()

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-parent="".

Metodi

.collapse(opzioni)

Attiva il tuo contenuto come elemento comprimibile. Accetta opzioni opzionali object.

$ ( '#mioComprimibile' ). collasso ({
  alterna : falso 
})

.collapse('toggle')

Attiva o disattiva un elemento comprimibile in mostrato o nascosto.

.collapse('mostra')

Mostra un elemento comprimibile.

.collapse('nascondi')

Nasconde un elemento comprimibile.

Eventi

La classe di compressione di Bootstrap espone alcuni eventi per l'aggancio alla funzionalità di compressione.

$ ( '#mioComprimibile' ). on ( 'nascosto' , funzione () {   
  // fare qualcosa…
})

Esempio di carosello

La presentazione seguente mostra un plug-in generico e un componente per scorrere gli elementi come un carosello.

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.

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.

‹ ›

<div id = "myCarousel" class = "carousel slide" >  
  <ol class = "indicatori a carosello" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "attivo" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Elementi del carosello -->
  < classe div = "carousel-inner" > 
    <div class = "elemento attivo" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Navigazione a carosello -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Utilizzo

Tramite attributi di dati

Usa gli attributi dei dati per controllare facilmente la posizione del carosello. data-slideaccetta le parole chiave prevo next, che altera la posizione della diapositiva rispetto alla sua posizione corrente. In alternativa, utilizzare data-slide-toper passare un indice di diapositiva non elaborato al carosello data-slide-to="2", che salta la posizione della diapositiva a un indice particolare che inizia con 0.

Tramite JavaScript

Chiama il carosello manualmente con:

$ ( '.carosello' ). giostra ()

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScriptz. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-interval="".

Metodi

.carosello(opzioni)

Inizializza il carosello con un'opzione opzionale objecte inizia a scorrere gli elementi.

$ ( '.carosello' ). carosello ({
  intervallo : 2000 
})

.carousel('ciclo')

Scorre gli elementi del carosello da sinistra a destra.

.carousel('pausa')

Impedisce al carosello di scorrere gli oggetti.

.carousel(numero)

Fa scorrere il carosello su un fotogramma particolare (basato su 0, simile a una matrice).

.carousel('prec')

Passa all'elemento precedente.

.carousel('successivo')

Passa all'elemento successivo.

Eventi

La classe del carosello di Bootstrap espone due eventi per l'aggancio alla funzionalità del carosello.

Esempio

Un plug-in di base facilmente estendibile per creare rapidamente eleganti intestazioni di testo con qualsiasi input di testo di moduli.

< tipo di input = "testo" data-fornite = "typeahead" >  

Ti consigliamo di impostare autocomplete="off"per impedire la visualizzazione dei menu predefiniti del browser sul menu a discesa Bootstrap typeahead.

Utilizzo

Tramite attributi di dati

Aggiungi attributi di dati per registrare un elemento con funzionalità typeahead come mostrato nell'esempio sopra.

Tramite JavaScript

Chiama il typeahead manualmente con:

$ ( '.typeahead' ). dattilografare ()

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-source="".

Metodi

.typeahead(opzioni)

Inizializza un input con un typeahead.

Esempio

La sottonavigazione a sinistra è una demo live del plug-in affix.

Utilizzo

Tramite attributi di dati

Per aggiungere facilmente il comportamento dell'affisso a qualsiasi elemento, basta aggiungere data-spy="affix"all'elemento che vuoi spiare. Quindi usa gli offset per definire quando attivare e disattivare il blocco di un elemento.

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

Tramite JavaScript

Chiama il plug-in affix tramite JavaScript:

$ ( '#barra di navigazione' ). apporre ()

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-offset-top="200".