Panoramica

Individualmente o compilati

I Plugin possono essere inclusi singolarmente (utilizzando singolarmente i file *.js di Bootstrap), oppure tutti insieme (utilizzando bootstrap.js o il bootstrap.min.js minimizzato).

Utilizzando il JavaScript compilato

Sia bootstrap.js che bootstrap.min.js contengono tutti i plugin in un unico file. Anche un plugin singolo.

Attributi data di un componente

Non usare gli attributi data di più plugin nello stesso elemento. Per esempio, un bottone non può avere sia un box modale tooltip che toggle. Se vuoi ottenere questo risultato, utilizza un altro elemento che lo racchiuda.

Plugin e dipendenze

Alcuni plugin e componenti CSS dipendono da altri plugin. Se includi singolarmente dei plugin, controlla le relazioni di questi plugin nella documentazione. Nota inoltre che tutti i plugin dipendono da jQuery (questo significa che jQuery dev'essere incluso prima dei plugin). Consulta il nostro bower.json per controllare quali versioni di jQuery sono supportate.

Attributi Data

Puoi utilizzare tutti i plugin di Bootstrap anche solamente tramite il markup API senza dover scrivere una singola riga di JavaScript. Queste API Bootstrap sono di prima classe e dovrebbero essere le prime da prendere in considerazione quando si utilizza un plugin.

Detto ciò, in alcune situazioni potrebbe essere necessario disattivare questa funzione. Quindi, ti forniamo la possibilità di disattivare gli attributi Data delle API, disabilitando tutti gli eventi nel documento contrassegnati con data-api. Ecco un esempio:

$(document).off('.data-api')

In alternativa, per focalizzarsi su un plugin specifico, basta includere il nome del plugin nel namespace assieme al namespace delle api, in questo modo:

$(document).off('.alert.data-api')

Programmatic API

Crediamo inoltre, tu debba poter usufruire di tutti i plugin Bootstrap attraverso il solo utilizzio delle API in Javascript. Tutti i metodi delle API sono singoli e concatenabili.

$('.btn.danger').button('toggle').addClass('fat')

Tutti i metodi dovrebbero accettare un oggetto facoltativo con le varie opzioni, una stringa che si riferisce ad un metodo particolare, o nulla (inizializza un plugin che assume il comportamento di default):

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

Ogni plugin offre il suo costruttore tramite la proprietà Constructor: $.fn.popover.Constructor. Se volessi ottenere l'istanza di un particolare plugin, recuperala direttamente da un elemento: $('[rel=popover]').data('popover').

No conflict

Qualche volta è necessario usare i plugin di Bootstrap con altri framework grafici. Sotto queste circostanze, talvolta può avvenire una collisione per nomi e sintassi in comune. Nel caso succeda, puoi chiamare .noConflict sul plugin, così da far ripristinare il valore precedente.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Eventi

Bootstrap fornisce eventi personalizzati per ogni azione univoca dei plugin. Generalmente, le azioni son grammaticalmente definite nella forma infinita e participio passato - dove la forma infinito (es. show) è innescata all'inizio di un evento, e la sua forma participio passato (es. shown) è innescata al completamento dell'azione.

Dalla versione 3.0.0, tutti gli eventi di Bootstrap hanno un nome e un dominio (in gergo namespaced).

Tutti gli eventi (in forma infinita inglese) forniscono la funzionalità preventDefault. Ovvero l'abilità di stoppare l'esecuzione di un'azione prima che abbia inizio.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

Librerie di terze parti

Bootstrap non supporta ufficialmente librerie JavaScript di terze parti, come Prototype o jQuery UI. Nonostante .noConflict e gli eventi nominativi, potrebbero esserci problemi di incompatibilità che devi risolvere per conto tuo.

Transizioni transition.js

Le Transizioni

Per semplici effetti di transizione, includi una sola volta transition.js assieme agli altri file JS. Se stai usando bootstrap.js minimizzato (o compilato), non c'è bisogno di includere transition.js — è già presente all'interno.

Cosa c'è dentro

Transition.js è un file di supporto per gli eventi transitionEnd ed un emulatore di transizioni CSS. E' usato dagli altri plugin per controllare le transizioni CSS e per cogliere le transizioni in sospeso.

Box modali modal.js

Esempi

I box modali sono affusolati, ma flessibili, le finestre appaiono con funzionalità minime e controlli intuitivi.

Non supporta la sovrapposizione di più box modali

Assicurati di non aprire un box modale mentre un altro è ancora visibile. Mostrare più di una finestra modale contemporaneamente richiede del codice aggiuntivo apposito.

Posizione del codice del box modale

Cerca sempre di piazzare il codice HTML della finestra modale in una posizione top-level all'interno del tuo documento, per evitare che altri componenti interferiscano con l'aspetto e le funzionalità della finestra.

Avvertenze sui dispositivi Mobile

Ci sono alcune avvertenze per quanto riguarda l'uso dei box modali sui dispositivi mobile. Guarda la nostra documentazione sui browser per maggiori dettagli.

Esempio statico

Una finestra modale con un'intestazione, un corpo e un footer munito di pulsanti.

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Demo in tempo reale

Innesca una finestra modale con JavaScript cliccando il bottone qui sotto. Apparirà scendendo dall'alto della pagina e scomparirà risalendo.

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Lancia la demo
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Rendi le finestre modali accessibili

Assicurati di aggiungere role="dialog" a .modal, l'attributo aria-labelledby="myModalLabel" per avere una referenza al titolo della finestra modale, e aria-hidden="true" per indicare alle tecnologie assistive (per i portatori di handicap visivo) di ignorare gli elementi modali nel DOM.

Inoltre, puoi fornire una descrizione della finestra modale con aria-describedby su .modal.

Dimensioni opzionali

Le finestre modali hanno due dimensioni opzionali, disponibili attraverso apposite classi da piazzare sul .modal-dialog.

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Utilizzo

Il plugin modale mostra e nasconde il contenuto su richiesta, attraverso gli attributi data o javascript. Aggiunge inoltre la classe .modal-open all'elemento <body> per sovrascrivere il comportamento di scrolling di default e generare un .modal-backdrop per fornire un'area sottostante alla finestra modale che permette di chiuderla al click.

Attraverso gli attributi Data

Attiva un box modale senza scrivere una riga di JavaScript. Imposta data-toggle="modal" su un elemento di controllo, come un bottone, assieme a data-target="#foo" o href="#foo" che specifica la finestra modale da attivare.

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

Attraverso JavaScript

Richiama un box modale tramite il suo id, myModal, con una singola linea di JavaScript:

$('#myModal').modal(options)

Opzioni

Assieme agli attributi Data o il Javascript, possono essere passate delle opzioni specifiche. Nel caso si usino gli attributi data, aggiungete il nome dell'opzione dopo il nome data-, come in data-backdrop="".

Name type default description
backdrop boolean or the string 'static' true Include l'elemento modal-backdrop. In alternativa, specifica static per un backdrop che non chiude la finestra modale al click.
keyboard boolean true Chiude la finestra modale quando il carattere di escape viene schiacciato
show boolean true Mostra il box modale quando inizializzato.
remote path false

Se viene fornito un URL remoto, nel div .modal-content verrà iniettato il contenuto attraverso il metodo load di jQuery. Se stai usando le data-api, puoi in alternativa usare l'attributo href per specificare la risorsa remota. Un esempio viene mostrato qui di seguito:

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

Metodi

.modal(options)

Attiva il tuo contenuto come un modale. Accetta un object opzionale.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

Attiva/disattiva manualmente un box modale.

$('#myModal').modal('toggle')

.modal('show')

Apre manualmente un box modale.

$('#myModal').modal('show')

.modal('hide')

Nasconde manualmente un box modale.

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

Eventi

La classe modale di Bootstrap mostra alcuni possibili "eventi", sfruttati e agganciati da alcune funzioni.

Tipo Evento Descrizione
show.bs.modal Questo evento si verifica immediatamente quando il metodo d'istanza show viene chiamato. Se innescato da un click, l'elemento cliccato è disponibile come proprietà relatedTarget dell'evento.
shown.bs.modal Questo evento si verifica quando il box modale è reso visibile all'utente (aspetterà che le transizioni CSS vengano completate). Se innescato da un click, l'elemento cliccato è disponibile come proprietà relatedTarget dell'evento.
hide.bs.modal Questo evento si verifica immediatamente quando il metodo d'istanza hide viene chiamato.
hidden.bs.modal Questo evento si verifica quando il box modale ha finito d'esser nascosto all'utente (aspetterà che le transizioni CSS vengano completate).
loaded.bs.modal Questo evento si verifica quando il box modale termina il caricamento del contenuto remoto (usando l'opzione remote).
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Menu a discesa dropdown.js

Aggiungi dei menu a discesa, (praticamente a ogni componente) con questo semplice plugin, incluse navbar, schede, e "pillole" (pills).

All'interno di una navbar

All'interno di un menu a pillole (pills)

Attraverso gli attributi Data o JavaScript, il plugin di dropdown attiva/disattiva il contenuto nascosto (i menu a discesa) inserendo e rimuovendo la classe .open al tag genitore dell'elemento nella lista. Quando aperto, il plugin aggiunge anche .dropdown-backdrop come area di click per la chiusura dei menu (quando c'è un click fuori dal menu). Nota: L'attributo data-toggle=dropdown è invocato per chiudere i menu a discesa a livello applicativo, quindi è una buona idea usarlo sempre.

Attraverso gli attributi Data

Aggiungi data-toggle="dropdown" ad un link o ad un bottone per permettere l'apertura/chiusura di un menu a discesa.

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

Per mantenere le URL intatte, usa l'attributo data-target invece di href="#".

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


  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Attraverso JavaScript

Chiama i menu a discesa attraverso JavaScript:

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

data-toggle="dropdown" ancora necessario

A prescindere da dove chiami con javascript o con le data-api il menu a discesa, data-toggle="dropdown" è ugualmente necessario sull'elemento che innesca il dropdown.

Opzioni

Nessuna

Metodi

$().dropdown('toggle')

Attiva/Disattiva il menu a discesa della navbar selezionata (o di un menu di navigazione a schede).

Eventi

Tutti gli eventi del dropdown sono innescati nell' elemento genitore di .dropdown-menu.

Tipo Evento Descrizione
show.bs.dropdown Questo evento si verifica immediatamente quando il metodo d'istanza show viene chiamato. L'elemento d'attivazione/disattivazione è disponibile come proprietà relatedTarget dell'evento.
shown.bs.dropdown Questo evento si verifica quando il dropdown è reso visibile all'utente (aspetterà che le transizioni CSS vengano completate).L'elemento d'attivazione/disattivazione è disponibile come proprietà relatedTarget dell'evento.
hide.bs.dropdown Questo evento si verifica quando il metodo d'istanza hide viene chiamato. L'elemento d'attivazione/disattivazione è disponibile come proprietà relatedTarget dell'evento.
hidden.bs.dropdown Questo evento si verifica quando il dropdown ha finito d'esser nascosto all'utente (aspetterà che le transizioni CSS vengano completate). L'elemento d'attivazione/disattivazione è disponibile come proprietà relatedTarget dell'evento.
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Esempio nella navbar

Il plugin ScrollSpy serve per aggiornare automaticamente la voce nel nav corrispondente alla parte di contenuto attualmente visualizzata nella pagina (quindi in base alla posizione di scorrimento nella pagina). Scorri la pagina e guarda come la classe attiva nella nav cambia. Anche gli elementi contenuti nel menu a scorrimento vengono evidenziati.

@fat

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Utilizzo

Attraverso gli attributi Data

Per aggiungere ad una barra di navigazione lo scrollspy, aggiungi data-spy="scroll" all'elemento che vuoi "spiare" (tipicamente si tratta del <body>). Dopo aggiungi l'attributo data-target con l'ID o la classe dell'elemento che contiene il componente .nav.

<body data-spy="scroll" data-target=".navbar-example">
  ...
  <div class="navbar-example">
    <ul class="nav nav-tabs">
      ...
    </ul>
  </div>
  ...
</body>

Attraverso JavaScript

Chiama lo scrollspy tramite JavaScript:

$('body').scrollspy({ target: '.navbar-example' })

Richiede un ID esistente

I link nella Navbar devono riferirsi ad un ID esistente nel DOM. Per esempio, <a href="#home">home</a> deve riferirsi a qualcosa nel DOM come <div id="home"></div>.

Metodi

.scrollspy('refresh')

Quando si usa lo scrollspy e nel mentre si aggiungono o rimuovono elementi dal DOM, è necessario chiamare il metodo di refresh, in questo modo:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

Opzioni

Le opzioni possono essere passate attraverso gli attributi Data o JavaScript. Per gli attributi Data, aggiungi il nome dell'opzione in coda a data-, come in data-offset="".

Name type default description
offset number 10 Pixels to offset from top when calculating position of scroll.

Eventi

Tipo Evento Descrizione
activate.bs.scrollspy Questo evento si verifica quando un nuovo oggetto viene attivato dallo scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Schede commutabili tab.js

Schede d'esempio

Aggiungi schede dinamiche per passare da un blocco di contenuti ad un altro velocemente. (Puoi aggiungere persino menu a discesa).

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Estende la navigazione a schede

Questo plugin estende il componente per la navigazione a schede.

Utilizzo

Attiva le schede tramite JavaScript (ogni scheda dev'essere attivata individualmente):

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Puoi attivare ogni scheda individualmente in diversi modi:

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
$('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

Markup

Puoi attivare la navigazione a schede o a "pillole" senza scrivere del codice javascript, semplicemente specifica data-toggle="tab" o data-toggle="pill" su un elemento. Aggiungendo le classi nav e nav-tabs alla scheda ul si applicherà lo stile della scheda di Bootstrap, mentre aggiungendo le classi nav e nav-pills si applicherà lo stile in "pillole".

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

Effetto dissolvenza

Per usare l'effetto dissolvenza sulle schede, aggiungi .fade ad ogni .tab-pane. Il primo pannello deve inoltre avere .in per impostare e mostrare il suo contenuto come contenuto iniziale al caricamento della pagina.

<div class="tab-content">
  <div class="tab-pane fade in active" id="home">...</div>
  <div class="tab-pane fade" id="profile">...</div>
  <div class="tab-pane fade" id="messages">...</div>
  <div class="tab-pane fade" id="settings">...</div>
</div>

Metodi

$().tab

Attiva un elemento scheda e il container che ne contiene il contenuto. La scheda dovrebbe avere un data-target o un href che punta a un nodo contenitore nel DOM.

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

<script>
  $(function () {
    $('#myTab a:last').tab('show')
  })
</script>

Eventi

Tipo Evento Descrizione
show.bs.tab Questo evento si verifica al visualizzarsi della scheda, prima che la nuova scheda sia stata mostrata. Usa event.target e event.relatedTarget rispettivamente per avere un riferimento alla scheda attiva e alla scheda attiva precedente (se disponibile).
shown.bs.tab Questo evento si verifica al visualizzarsi della scheda dopo che un'altra scheda è già stata visualizzata. Usa event.target e event.relatedTarget rispettivamente per avere un riferimento alla scheda attiva e alla scheda attiva precedente (se disponibile).
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

Tooltips tooltip.js

Esempi

Inspirato all'eccellente plugin jQuery.tipsy scritto da Jason Frame; I Tooltip sono una versione aggiornata, non basata su immagini, che usano CSS3 per le animazioni e gli attributi Data per i titoli.

Posiziona il cursore sopra i links qui sotto per vedere i tooltips in azione:

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Quattro direzioni

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

Funzionalità Opt-in

Per ragioni di performance, le API-data per Tooltip e Popover sono opt-in, significa che devi inizializzarle tu stesso.

I Tooltips all'interno di gruppi di bottoni o input richiedono configurazioni particolari

Quando si usano tooltips su elementi all'interno di un .btn-group o di un .input-group, devi specificare l'opzione container: 'body' (documentata sotto) per evitare effetti collaterali (come ad esempio l'aumento delle dimensioni di un elemento o la perdita degli angoli arrotondati quando il tooltip viene richiamato).

I Tooltips su un elemento disabilitato richiedono che l'elemento venga racchiuso da un altro elemento

Per aggiungere un tooltip ad un elemento disabled o .disabled, racchiudi l'elemento all'interno di un <div> e applica il tooltip a questo <div> piuttosto che all'elemento disabilitato.

Utilizzo

Il plugin tooltip genera contenuti e codice di markup su richiesta, di default il codice è piazzato dopo l'elemento che innesca il tooltip.

Trigger the tooltip via JavaScript:

$('#example').tooltip(options)

Markup

Il codice di markup richiesto per un tooltip è soltanto l'attributo data e title, piazzati sull'elemento HTML su cui si desidera appaia il tooltip. Il markup generato per un tooltip è piuttosto semplice, e richiede una posizione (di default, impostata dal plugin a top).

Link con più linee

Qualche volta magari avrai necessità di aggiungere un tooltip ad un link composto da più righe di testo. Il comportamento di default del plugin è quello di centrare il tooltip in verticale e in orizzontale. Aggiungi white-space: nowrap; per evitarlo.

 1 <!-- HTML to write -->
 2 <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
 3 
 4 <!-- Generated markup by the plugin -->
 5 <div class="tooltip top">
 6   <div class="tooltip-inner">
 7     Some tooltip text!
 8   </div>
 9   <div class="tooltip-arrow"></div>
10 </div>

Opzioni

Le opzioni possono essere passate con gli attributi Data o JavaScript. Per gli attributi Data, aggiungi il nome dell'opzione a data-, come in data-animation="".

Nome tipo default descrizione
animation boolean true Applica una dissolvenza di transizione tramite CSS al tooltip
html boolean false Inserisce codice HTML dentro al tooltip. Se impostato a false, per inserire il contenuto nel DOM verrà usato il metodo jQuery text. Usa questo metodo se ti preoccupano gli attacchi XSS.
placement string | function 'top' come posizionare il tooltip - top | bottom | left | right | auto.
Quando è specificato "auto", in automaticato il tooltip verrà reorientato. Per esempio, se la posizione è "auto left", il tooltip verrà mostrato a sinistra quando possibile, altrimenti verrà mostrato a destra.
selector string false Se viene fornito un selettore, gli oggetti tooltip verranno delegati al target specificato.
title string | function '' Titolo di default se l'attributo title non è presente
trigger string 'hover focus' Come viene innescato il tooltip - click | hover | focus | manual. Puoi passare più di un trigger, separandoli con uno spazio l'uno dall'altro.
delay number | object 0

ritardo nel mostrare e nascondere il tooltip (ms) - non si applica alla tipologia di trigger manuale (manual)

Se viene passato un solo numero, il ritardo si applica sia durante la visualizzazione che durante l'occultamento del tooltip

La struttura dell'oggetto è: delay: { show: 500, hide: 100 }

container string | false false

Aggiunge il tooltip all'elemento specificato. Esempio: container: 'body'

Attributi Data per tooltip individuali

Le opzioni per tooltip individuali possono in alternativa essere specificate attraverso l'uso degli attributi Data, come spiegato sopra.

Metodi

$().tooltip(options)

Attacca il gestore di tooltip ad una collezione di elementi o ad un singolo elemento (inizializza il plugin per quel dato elemento).

.tooltip('show')

Visualizza il tooltip di un elemento.

$('#element').tooltip('show')

.tooltip('hide')

Nasconde il tooltip di un elemento.

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

.tooltip('toggle')

Visualizza/Nasconde il tooltip di un elemento.

$('#element').tooltip('toggle')

.tooltip('destroy')

Nasconde e rimuove il tooltip di un elemento.

$('#element').tooltip('destroy')

Eventi

Tipo Evento Descrizione
show.bs.tooltip Questo evento si verifica immediatamente quando il metodo d'istanza show viene chiamato.
shown.bs.tooltip Questo evento si verifica quando il tooltip viene reso visibile all'utente (aspetta che le transizioni CSS vengano completate).
hide.bs.tooltip Questo evento si verifica immediatamente quando il metodo d'istanza hide viene chiamato.
hidden.bs.tooltip Questo evento si verifica quando il tooltip termina d'essere nascosto all'utente (aspetta che le transizioni CSS vengano completate).
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // fa qualcosa...
})

Popovers popover.js

Esempi

Aggiunge agli elementi piccoli riquadri in sovraimpressione (come quelli sull'iPad), per contenere delle informazioni secondarie.

Dipendenze - Plugin

Popovers richiede che venga incluso nella tua versione di Bootstrap, il plugin tooltip.

Funzionalità Opt-in

Per ragioni di performance, Le data-api per il Tooltip e il plugin Popover sono opt-in, ciò significa che devi inizializzarle tu stesso.

I Popovers all'interno di gruppi di bottoni o input richiedono configurazioni particolari

Quando si usano popovers su elementi all'interno di un .btn-group o di un .input-group, devi specificare l'opzione container: 'body' (documentata sotto) per evitare effetti collaterali (come ad esempio l'aumento delle dimensioni di un elemento o la perdita degli angoli arrotondati quando il tooltip viene richiamato).

I Popovers su un elemento disabilitato richiedono che l'elemento venga racchiuso da un altro elemento

Per aggiungere un popover ad un elemento disabled o .disabled, racchiudi l'elemento all'interno di un <div> e applica il popover a questo <div> piuttosto che all'elemento disabilitato.

Popover statico

Sono disponibili quattro opzioni d'allineamento: top, right, bottom, left.

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Demo in tempo reale

Quattro direzioni

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

Link con più linee

Qualche volta magari avrai necessità di aggiungere un popover ad un link composto da più righe di testo. Il comportamento di default del plugin è quello di centrare il popover in verticale e in orizzontale. Aggiungi white-space: nowrap; per evitarlo.

Utilizzo

Abilita i popovers tramite JavaScript:

$('#example').popover(options)

Opzioni

Le opzioni possono essere passate con gli attributi Data o JavaScript. Per gli attributi Data, aggiungi il nome dell'opzione a data-, come in data-animation="".

Nome tipo default descrizione
animation boolean true Applica una dissolvenza di transizione tramite CSS al popover
html boolean false Inserisce codice HTML dentro al popover. Se impostato a false, per inserire il contenuto nel DOM verrà usato il metodo jQuery text. Usa questo metodo se ti preoccupano gli attacchi XSS.
placement string | function 'right' Come posizionare il popover - top | bottom | left | right | auto.
Quando è specificato "auto", in automaticato il popover verrà reorientato. Per esempio, se la posizione è "auto left", il popover verrà mostrato a sinistra quando possibile, altrimenti verrà mostrato a destra.
selector string false Se viene fornito un selettore, gli oggetti popover verranno delegati al target specificato. In pratica, questo viene usato per permettere l'aggiunta di popover al contenuto HTML dinamico. Guarda questo e un esempio informativo.
trigger string 'click' Come viene innescato il tooltip - click | hover | focus | manual
title string | function '' Titolo di default se l'attributo title non è presente
content string | function '' Contenuto di default se l'attributo data-content non è presente
delay number | object 0

Ritardo nel mostrare e nascondere il popover (ms) - non si applica alla tipologia di trigger manuale (manual)

Se viene passato un solo numero, il ritardo si applica sia durante la visualizzazione che durante l'occultamento del popover

La struttura dell'oggetto è: delay: { show: 500, hide: 100 }

container string | false false

Aggiunge il popover all'elemento specificato. Esempio: container: 'body'. Questa opzione è particolarmente utile in quanto ti permette di posizionare il popover all'interno del documento, vicino all'elemento che innesca il popover - evita che il popover schizzi via, lontano dall'elemento a cui appartiene, durante il ridimensionamento della finestra.

Attributi Data per popovers individuali

Le opzioni per popovers individuali possono in alternativa essere specificate attraverso l'uso degli attributi Data, come spiegato sopra.

Metodi

$().popover(options)

Inizializza i popovers per una collezione di elementi o per un singolo elemento.

.popover('show')

Visualizza il popover di un elemento.

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

.popover('hide')

Nasconde il popover di un elemento.

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

.popover('toggle')

Visualizza/Nasconde il popover di un elemento.

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

.popover('destroy')

Nasconde e rimuove il popover di un elemento.

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

Eventi

Tipo Evento Descrizione
show.bs.popover Questo evento si verifica immediatamente quando il metodo d'istanza show viene chiamato.
shown.bs.popover Questo evento si verifica quando il popover viene reso visibile all'utente (aspetta che le transizioni CSS vengano completate).
hide.bs.popover Questo evento si verifica immediatamente quando il metodo d'istanza hide viene chiamato.
hidden.bs.popover Questo evento si verifica quando il popover termina d'essere nascosto all'utente (aspetta che le transizioni CSS vengano completate).
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Messaggi d'avviso (Alert) alert.js

Avvisi d'esempio

Aggiungi le funzionalità per la chiusura degli alert con questo plugin.

Holy guacamole! Best check yo self, you're not looking too good.

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Utilizzo

Permetti la chiusura di un alert attraverso JavaScript:

$(".alert").alert()

Markup

Basta aggiungere data-dismiss="alert" al tuo bottone di chiusura per associare la funzionalità di chiusura dell'alert al tuo bottone.

<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>

Metodi

$().alert()

Fornisce a tutti gli alerts la funzionalità di chiusura. Per avere una dissolvenza animata alla chiusura dei tuoi alert, assicurati che abbiano le classi .fade e .in già applicate.

.alert('close')

Chiude un alert.

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

Eventi

Le classi di Bootstrap sugli alert rivelano l'esistenza di alcuni "eventi", che possiamo intercettare per meglio gestire gli alert.

Tipo Evento Descrizione
close.bs.alert Questo evento si verifica quando il metodo d'istanza close viene chiamato.
closed.bs.alert Questo evento si verifica quando l'alert viene chiuso (aspetta che le transizioni CSS vengano completate).
$('#my-alert').bind('closed.bs.alert', function () {
  // do something…
})

Bottoni button.js

Esempi d'utilizzo

Migliora l'utilizzo dei bottoni. Controlla lo stato dei bottoni e crea gruppi di bottoni da utilizzare con altri componenti.

Informazioni sullo stato

Aggiungi data-loading-text="Loading..." per aggiungere al tuo bottone lo stato attuale.

<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
  Loading state
</button>
<script>
  $('#loading-example-btn').click(function () {
    var btn = $(this)
    btn.button('loading')
    $.ajax(...).always(function () {
      btn.button('reset')
    });
  });
</script>

Interruttore su un singolo bottone

Aggiungi data-toggle="button" per attivare la modalità "interruttore" su un singolo bottone.

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

Checkbox

Aggiungi data-toggle="buttons" ad un gruppo di checkboxes dentro un .btn-group per associarvi lo stile dei bottoni (interruttori).

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="checkbox"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 3
  </label>
</div>

Radio

Aggiungi data-toggle="buttons" ad un gruppo di radio input dentro un .btn-group per associarvi lo stile dei bottoni (interruttori).

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option1"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

Utilizzo

Abilitare i bottoni tramite JavaScript:

$('.btn').button()

Markup

Gli attributi Data sono parte integrante del plugin button. Dai un'occhiata al codice d'esempio sotto per la sintassi da usare.

Opzioni

Nessuna

Metodi

$().button('toggle')

Apre/Chiude l'interruttore. Fa sembrare che il bottone sia stato schiacciato.

Switch automatico

Puoi abilitare lo switch automatico di un bottone usando l'attributo data-toggle.

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

$().button('loading')

Impostato lo stato del bottone su "loading" - disabilita il bottone e cambia il testo nel testo di loading impostato. Il testo di loading dovrebbe essere definito sull'elemento bottone usando l'attributo data data-loading-text.

<button id="loading-example-btn" type="button" class="btn btn-primary" data-loading-text="loading stuff...">...</button>
<script>
  $('#loading-example-btn').click(function () {
    var btn = $(this)
    btn.button('loading')
    $.ajax(...).always(function () {
      btn.button('reset')
    });
  });
</script>

Compatibilità cross-browser

Firefox mantiene lo stato disabled anche ricaricando più volte la pagina. Un modo per aggirare questo problema è usare autocomplete="off".

$().button('reset')

Resetta lo stato del bottone - riporta il testo del bottone al testo originale.

$().button(string)

Resetta lo stato del bottone - cambia il testo con uno qualunque specificato tramite attributi data.

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

Collapse collapse.js

Cos'è

Fornisce gli stili di base ed un supporto flessibile per i componenti come accordions e navigation.

Dipendenze - Plugin

Collapse richiede che nella tua versione di Bootstrap venga incluso il plugin transitions.

Esempio: Fisarmonica (accordion)

Usando il plugin collapse, abbiamo costruito una fisarmonica estendendo il componente panel.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Puoi usare il plugin anche senza l'utilizzo diretto del codice della fisarmonica. Fai un bottone e con data-toggle ed data-target puoi far espandere e richiudere l'elemento.

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  simple collapsible
</button>

<div id="demo" class="collapse in">...</div>

Utilizzo

Il plugin collapse utilizza poche classi per gestire i contenuti:

  • .collapse nasconde il contenuto
  • .collapse.in mostra il contenuto
  • .collapsing viene aggiunto quando la transizione ha inizio, e rimosso quando la transizione termina

Queste classi si trovano in component-animations.less.

Attraverso gli attributi Data

Aggiungi ad un elemento data-toggle="collapse" e data-target per assegnargli il controllo di un elemento richiudibile. L'attributo data-target accetta un selettore CSS per identificare l'elemento. Assicurati di aggiungere la classe collapse all'elemento richiudibile. Se desideri venga mostrato aperto di default, aggiungi anche la classe in.

Per gestire un gruppo di elementi richiudibili (pieghevoli) in stile fisarmonica, aggiungi l'attributo data data-parent="#selector". Guarda la demo per vedere il tutto in azione.

Attraverso JavaScript

Abilitalo manualmente con:

$('.collapse').collapse()

Opzioni

Le opzioni possono essere passate attraverso gli attributi data o JavaScript. Per gli attributi data, aggiungi il nome dell'opzione a data-, come in data-parent="".

Nome tipo default descrizione
parent selector false Se specificato, tutti gli elementi pieghevoli contenuti nell'elemento specificato verranno chiusi quando questo elemento viene mostrato. (simile al comportamento tradizionale a fisarmonica - che dipende dalla classe panel)
toggle boolean true Mostra/Chiude l'elemento quando invocato

Metodi

.collapse(options)

Attiva il tuo contenuto richiudibile (pieghevole). Accetta un object facoltativo di opzioni.

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

.collapse('toggle')

Mostra/Chiude un elemento pieghevole.

.collapse('show')

Mostra un elemento pieghevole.

.collapse('hide')

Chiude un elemento pieghevole.

Eventi

Le classi di Bootstrap sugli elementi pieghevoli rivelano l'esistenza di alcuni "eventi", che possiamo intercettare per meglio gestire il collapse.

Tipo Evento Descrizione
show.bs.collapse Questo evento si verifica immediatamente quando il metodo d'istanza show viene chiamato.
shown.bs.collapse Questo evento si verifica quando un elemento pieghevole è stato reso visibile all'utente (aspetta che le transizioni CSS vengano completate).
hide.bs.collapse Questo evento si verifica immediatamente quando il metodo d'istanza hide viene chiamato.
hidden.bs.collapse Questo evento si verifica quando un elemento pieghevole viene chiuso dall'utente (aspetta che le transizioni CSS vengano completate).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

La presentazione qui sotto mostra un plugin generico per iterare lungo una lista d'elementi, come fosse una giostra.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

Didascalie opzionali

Aggiungi facilmente delle didascalie alle tue slide con l'elemento .carousel-caption posto all'interno di ogni .item. Piazza un qualsiasi codice HTML all'interno e verrà automaticamente allineato e formattato.

<div class="item active">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

Problemi d'accessibilità

Il componente compliant, generalmente non segue tutti gli standard sull'accessibilità. Se desiderate essere conformi agli standard, considerate altre modalità per presentare i vostri contenuti.

Carousels multipli

I Carousels (giostre) richiedono l'uso di un id sull'elemento contenitore più esterno, il .carousel appunto, per far si che i controlli funzionino senza problemi. Quando si aggiunge più di un carousel, o quando si cambia l'id di un carousel, assicurati di aggiornare i relativi controlli.

Attraverso gli attributi Data

Usa gli attributi data per controllare facilmente la posizione del carousel. data-slide accetta le parole chiave prev o next, il quale alterano la posizione della slide relativamente alla posizione corrente. In alternativa, usa data-slide-to per passare l'indice di una slide al carousel. data-slide-to="2"ad esempio, modifica la posizione della slide ad un indice particolare che inizia per 0.

L'attributo data-ride="carousel" è usato per marcare il carousel come animazione di partenza al caricamento della pagina.

Attraverso JavaScript

Chiama il carousel manualmente con:

$('.carousel').carousel()

Opzioni

Le opzioni possono essere passate attraverso gli attributi data o JavaScript. Per gli attributi data, aggiungi il nome dell'opzione a data-, come in data-interval="".

Nome tipo default descrizione
interval number 5000 Il tempo da aspettare per passare automaticamente da una slide all'altra. Se impostato su false, il carousel non ciclerà automaticamente fra tutti gli elementi.
pause string "hover" Mette in pausa il ciclo del carousel quando il cursore si posiziona al di sopra di esso, riprende con il ciclo quando il cursore non è più sopra il carousel.
wrap boolean true Indica se il carousel deve ciclare continuamente o avere delle fermate principali.

Metodi

.carousel(options)

Inizializza il carousel con un object contenente le possibili opzioni e inizia a ciclare lungo la lista di elementi.

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

.carousel('cycle')

Scorre attraverso tutti gli oggetti del carousel da sinistra verso destra.

.carousel('pause')

Arresta il ciclo del carousel.

.carousel(number)

Scorre il carousel fino a un elemento in particolare (parte da 0, simile ad un array).

.carousel('prev')

Scorre all'oggetto precedente.

.carousel('next')

Scorre all'oggetto successivo.

Eventi

Le classi del carousel di Bootstrap permettono di restare in ascolto su due possibili eventi.

Tipo Evento Descrizione
slide.bs.carousel Questo evento si verifica immediatamente quando il metodo d'istanza slide viene invocato.
slid.bs.carousel Questo evento si verifica quando il carousel ha completato la transizione della slide.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Affix affix.js

Esempio

La sub-navigazione sulla destra è una demo in tempo reale del plugin affix.


Utilizzo

Utilizza il plugin affix attraverso gli attributi Data o attraverso il tuo codice JavaScript personalizzato. In entrambi i casi, devi specificare il CSS per il posizionamento del contenuto.

Posizionamento attraverso CSS

Il plugin affix commuta fra tre possibili classi, ognuna rappresentante uno stato particolare: .affix, .affix-top, e .affix-bottom. Tu stesso devi fornire lo stile per queste tre classi (non dipende dal plugin) per gestire le posizioni attuali.

Ecco come funziona il plugin affix:

  1. Per iniziare, il plugin aggiunge .affix-top per indiciare che l'elemento è nella sua posizione massima, in alto. A questo punto non viene richiesto alcun posizionamento tramite i CSS.
  2. Scorre oltre l'elemento da apporre. E qui è dove .affix sostituisce .affix-top e imposta position: fixed; (fornito dal codice CSS di Bootstrap).
  3. Se è definito una spaziatura in basso, si scorre oltre, il che dovrebbe far si che venga sostituito .affix con .affix-bottom. Dal momento che le spaziature (offsets) sono opzionali, impostarne una richiede la configurazione di un CSS appropriato. In questo caso, aggiungi position: absolute; quando necessario. Il plugin utilizza le opzioni con gli attributi data o javascript per determinare dove posizionare l'elemento da lì.

Segui i passaggi sopra per settare un tuo CSS personalizzato per ognuno degli usi mostrati sotto.

Attraverso gli attributi Data

Per aggiungere il comportamento affix agli elementi, aggiungi solamente data-spy="affix" all'elemento che vuoi tenere d'occhio. Usa le spaziature (offset) per determinare quando è necessario commutare il perno di un elemento.

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

Attraverso JavaScript

Chiama il plugin affix tramite JavaScript:

  $('#my-affix').affix({
    offset: {
      top: 100
    , bottom: function () {
        return (this.bottom = $('.footer').outerHeight(true))
      }
    }
  })

Opzioni

Le opzioni possono essere passate attraverso gli attributi Data o JavaScript. Per gli attributi data, aggiungi il nome dell'opzione a data-, come in data-offset-top="200".

Nome tipo default descrizione
offset number | function | object 10 Pixel da compensare quando si calcola la posizione dello scorrimento. Se viene fornito un singolo numero, l'offset verrà applicato in entrambe le direzioni (top e bottom). Per specificare separatamente il valore di ogni direzione (bottom e top), fornisci un oggetto offset: { top: 10 } oppure offset: { top: 10, bottom: 5 }. Usa una funzione quando vuoi calcolare dinamicamente un offset.

Eventi

Ecco alcuni eventi disponibili per il plugin affix di Bootstrap.

Tipo Evento Descrizione
affix.bs.affix Questo evento si verifica immediatamente prima che l'elemento venga apposto.
affixed.bs.affix Questo evento si verifica dopo che l'elemento viene apposto.
affix-top.bs.affix Questo evento si verifica immediatamente prima che l'elemento venga apposto in alto (top).
affixed-top.bs.affix Questo evento si verifica dopo che l'elemento viene apposto in alto.
affix-bottom.bs.affix Questo evento si verifica immediatamente prima che l'elemento venga apposto in basso (bottom).
affixed-bottom.bs.affix Questo evento si verifica dopo che l'elemento viene apposto in basso.