A proposito di modali

Una versione semplificata, ma flessibile, del tradizionale plug-in modale javascript con solo le funzionalità minime richieste e le impostazioni predefinite intelligenti.

Esempio statico

Di seguito è riportato un modale renderizzato staticamente.

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.

Usando bootstrap-modal

Chiama il modale tramite javascript:

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

Opzioni

Marcatura

Puoi attivare facilmente le modali sulla tua pagina senza dover scrivere una sola riga di javascript. Basta impostare data-toggle="modal"un elemento del controller con un data-target="#foo"o href="#foo"che corrisponde a un ID elemento modale e, quando si fa clic, avvierà il modale.

Inoltre, per aggiungere opzioni alla tua istanza modale, includile semplicemente come attributi di dati aggiuntivi sull'elemento di controllo o sul markup modale stesso.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Avvia modale </a>    

<div class = "nascondi modale" id = "myModal" >  
  < classe div = "intestazione modale" > 
    < tipo di pulsante = "pulsante" class = "chiudi" data-dismiss = "modale" > × </button>   
    <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" data-dismiss = "modal" > Chiudi </a>   
    <a href = "#" class = "btn btn-primary" > Salva le modifiche </a>  
  </div>
</div>

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

Informazioni sui menu a discesa

Aggiungi menu a discesa a quasi tutto in Bootstrap con questo semplice plugin. Bootstrap offre il supporto completo del menu a discesa nella barra di navigazione, nelle schede e nelle pillole.

Esempi

Fare clic sui collegamenti di navigazione a discesa nella barra di navigazione e sulle pillole sottostanti per testare i menu a discesa.

• Collegamento regolare
• Cadere in picchiata
  • Action
  • Another action
  • Something else here
  • Separated link
• Elenco a discesa 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Elenco a discesa 3
  • Action
  • Another action
  • Something else here
  • Separated link

Utilizzando bootstrap-dropdown.js

Chiama i menu a discesa tramite javascript:

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

Marcatura

Per aggiungere rapidamente funzionalità a discesa a qualsiasi elemento, è sufficiente aggiungere data-toggle="dropdown"e qualsiasi elenco a discesa bootstrap valido verrà automaticamente attivato.

<ul class = "nav nav-pillole" > 
  <li class = "attivo" ><a href = "#" > Collegamento normale </a></li>  
  <li classe = "menu a discesa" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Cadere in picchiata
      <b classe = "accento circonflesso" ></b> 
    </a>
    <ul class = "menu a discesa" > 
      <li><a href = "#" > Azione </a></li> 
      <li><a href = "#" > Un'altra azione </a></li> 
      <li><a href = "#" > Qualcos'altro qui </a></li> 
      <li classe = "divisore" ></li> 
      <li><a href = "#" > Link separato </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-pillole" > 
  <li classe = "elenco a discesa" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "percorso/alla/pagina.html" >    
      Cadere in picchiata
      <b classe = "accento circonflesso" ></b> 
    </a>
    <ul class = "menu a discesa" > 
      ...
    </ul>
  </li>
</ul>

Metodi

$().dropdown()

Un'API programmatica per l'attivazione dei menu per una determinata barra di navigazione o per la navigazione a schede.

Il plug-in ScrollSpy consente di aggiornare automaticamente i target di navigazione in base alla posizione di scorrimento.

Esempio di barra di navigazione con scrollspy

Scorri l'area sottostante e guarda l'aggiornamento della navigazione. Verranno evidenziati anche gli elementi secondari a discesa. Provalo!

Utilizzando bootstrap-scrollspy.js

Chiama lo scrollspy tramite javascript:

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

Marcatura

Per aggiungere facilmente il comportamento scrollspy alla tua navigazione nella barra in alto, aggiungi semplicemente data-spy="scroll"l'elemento che vuoi spiare (di solito questo sarebbe il corpo).

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

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

Eventi

Questo plug-in aggiunge una scheda rapida e dinamica e funzionalità pillola per la transizione attraverso i contenuti locali.

Schede di esempio

Fai clic sulle schede sottostanti per passare da un riquadro nascosto all'altro, anche tramite i menu a discesa.

• Casa
• Profilo
• Cadere in picchiata
  • @fat
  • @mdo

Utilizzando bootstrap-tab.js

Abilita le schede tabb tramite javascript (ogni scheda deve essere attivata individualmente):

$ ( '#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 in tab o pill senza scrivere alcun 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
})

Informazioni sulle descrizioni comandi

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

Esempio di utilizzo dei suggerimenti

Passa il mouse sui link sottostanti per vedere i suggerimenti:

Utilizzando bootstrap-tooltip.js

Attiva il suggerimento tramite javascript:

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

Opzioni

Marcatura

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

<a href = "#" rel = "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' )

A proposito di popover

Aggiungi piccole sovrapposizioni di contenuto, come quelle dell'iPad, a qualsiasi elemento per ospitare informazioni secondarie.

* Richiede l'inclusione di una descrizione comando

Esempio di popover al passaggio del mouse

Passa il mouse sopra il pulsante per attivare il popover.

Utilizzando bootstrap-popover.js

Abilita i popover tramite javascript:

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

Opzioni

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

A proposito di avvisi

Il plug-in di avviso è una piccola classe per aggiungere funzionalità di chiusura agli avvisi.

Esempi di avvisi

Il plug-in di avvisi funziona con messaggi di avviso regolari e blocca i messaggi.

Utilizzando bootstrap-alert.js

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

Di

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

Esempi di utilizzo

Usa il plugin dei pulsanti per gli stati e le commutazioni.

Utilizzando bootstrap-button.js

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.

<!-- Aggiungi data-toggle="button" per attivare la commutazione su un singolo pulsante -->
<button class = "btn" data-toggle = "button" > Single Toggle </button>  
 
<!-- Aggiungi data-toggle="buttons-checkbox" per attivare/disattivare lo stile della casella di controllo su btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Sinistra </button> 
  <button class = "btn" > Medio </button> 
  <button class = "btn" > Destra </button> 
</div>
 
<!-- Aggiungi data-toggle="buttons-radio" per attivare/disattivare lo stile radio su btn-group -->
<div class = "btn-group" data-toggle = "pulsanti-radio" >  
  <button class = "btn" > Sinistra </button> 
  <button class = "btn" > Medio </button> 
  <button class = "btn" > Destra </button> 
</div>

Metodi

$().button('toggle')

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

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

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

Utilizzando bootstrap-collapse.js

Abilita tramite javascript:

$ ( ".comprimi" ). collassare ()

Opzioni

Marcatura

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.

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

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

Di

Un plug-in generico per scorrere gli elementi. Una giostra.

Esempio di carosello

Guarda la presentazione qui sotto.

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.

‹ ›

Utilizzando bootstrap-carousel.js

Chiama tramite javascript:

$ ( '.carosello' ). giostra ()

Opzioni

Marcatura

Gli attributi dei dati vengono utilizzati per i controlli precedenti e successivi. Dai un'occhiata al markup di esempio qui sotto.

<div id = "myCarousel" class = "carousel slide" >  
  <!-- 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>

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.

Di

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

Esempio

Inizia a digitare nel campo sottostante per mostrare i risultati in anticipo.

Utilizzando bootstrap-typeahead.js

Chiama il typeahead tramite javascript:

$ ( '.typeahead' ). dattilografare ()

Opzioni

Marcatura

Aggiungi attributi di dati per registrare un elemento con funzionalità typeahead.

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

Metodi

.typeahead(opzioni)

Inizializza un input con un typeahead.