JavaScript
Porta in vita i componenti di Bootstrap con oltre una dozzina di plugin jQuery. Includili facilmente tutti assieme, o uno per uno.
Porta in vita i componenti di Bootstrap con oltre una dozzina di plugin jQuery. Includili facilmente tutti assieme, o uno per uno.
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).
Sia bootstrap.js
che bootstrap.min.js
contengono tutti i plugin in un unico file. Anche un plugin singolo.
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.
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.
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')
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')
.
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
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
})
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.
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.
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.
I box modali sono affusolati, ma flessibili, le finestre appaiono con funzionalità minime e controlli intuitivi.
Assicurati di non aprire un box modale mentre un altro è ancora visibile. Mostrare più di una finestra modale contemporaneamente richiede del codice aggiuntivo apposito.
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.
Ci sono alcune avvertenze per quanto riguarda l'uso dei box modali sui dispositivi mobile. Guarda la nostra documentazione sui browser per maggiori dettagli.
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">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</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 -->
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">×</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>
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
.
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>
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.
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>
Richiama un box modale tramite il suo id, myModal
, con una singola linea di JavaScript:
$('#myModal').modal(options)
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
|
Attiva il tuo contenuto come un modale. Accetta un object
opzionale.
$('#myModal').modal({
keyboard: false
})
Attiva/disattiva manualmente un box modale.
$('#myModal').modal('toggle')
Apre manualmente un box modale.
$('#myModal').modal('show')
Nasconde manualmente un box modale.
$('#myModal').modal('hide')
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...
})
Aggiungi dei menu a discesa, (praticamente a ogni componente) con questo semplice plugin, incluse navbar, schede, e "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.
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>
Chiama i menu a discesa attraverso JavaScript:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
ancora necessarioA 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.
Nessuna
Attiva/Disattiva il menu a discesa della navbar selezionata (o di un menu di navigazione a schede).
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…
})
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.
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.
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.
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.
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.
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.
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>
Chiama lo scrollspy tramite JavaScript:
$('body').scrollspy({ target: '.navbar-example' })
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>
.
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')
})
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. |
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…
})
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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Questo plugin estende il componente per la navigazione a schede.
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)
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>
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>
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>
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
})
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.
<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>
Per ragioni di performance, le API-data per Tooltip e Popover sono opt-in, significa che devi inizializzarle tu stesso.
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).
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.
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)
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
).
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>
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 è: |
container | string | false | false |
Aggiunge il tooltip all'elemento specificato. Esempio: |
Le opzioni per tooltip individuali possono in alternativa essere specificate attraverso l'uso degli attributi Data, come spiegato sopra.
Attacca il gestore di tooltip ad una collezione di elementi o ad un singolo elemento (inizializza il plugin per quel dato elemento).
Visualizza il tooltip di un elemento.
$('#element').tooltip('show')
Nasconde il tooltip di un elemento.
$('#element').tooltip('hide')
Visualizza/Nasconde il tooltip di un elemento.
$('#element').tooltip('toggle')
Nasconde e rimuove il tooltip di un elemento.
$('#element').tooltip('destroy')
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...
})
Aggiunge agli elementi piccoli riquadri in sovraimpressione (come quelli sull'iPad), per contenere delle informazioni secondarie.
Popovers richiede che venga incluso nella tua versione di Bootstrap, il plugin tooltip.
Per ragioni di performance, Le data-api per il Tooltip e il plugin Popover sono opt-in, ciò significa che devi inizializzarle tu stesso.
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).
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.
Sono disponibili quattro opzioni d'allineamento: top, right, bottom, left.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<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>
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.
Abilita i popovers tramite JavaScript:
$('#example').popover(options)
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 è: |
container | string | false | false |
Aggiunge il popover all'elemento specificato. Esempio: |
Le opzioni per popovers individuali possono in alternativa essere specificate attraverso l'uso degli attributi Data, come spiegato sopra.
Inizializza i popovers per una collezione di elementi o per un singolo elemento.
Visualizza il popover di un elemento.
$('#element').popover('show')
Nasconde il popover di un elemento.
$('#element').popover('hide')
Visualizza/Nasconde il popover di un elemento.
$('#element').popover('toggle')
Nasconde e rimuove il popover di un elemento.
$('#element').popover('destroy')
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…
})
Aggiungi le funzionalità per la chiusura degli alert con questo plugin.
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.
Permetti la chiusura di un alert attraverso JavaScript:
$(".alert").alert()
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">×</button>
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.
Chiude un alert.
$(".alert").alert('close')
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…
})
Migliora l'utilizzo dei bottoni. Controlla lo stato dei bottoni e crea gruppi di bottoni da utilizzare con altri componenti.
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>
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>
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>
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>
Abilitare i bottoni tramite JavaScript:
$('.btn').button()
Gli attributi Data sono parte integrante del plugin button. Dai un'occhiata al codice d'esempio sotto per la sintassi da usare.
Nessuna
Apre/Chiude l'interruttore. Fa sembrare che il bottone sia stato schiacciato.
Puoi abilitare lo switch automatico di un bottone usando l'attributo data-toggle
.
<button type="button" class="btn btn-primary" data-toggle="button">...</button>
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>
Firefox mantiene lo stato disabled anche ricaricando più volte la pagina. Un modo per aggirare questo problema è usare autocomplete="off"
.
Resetta lo stato del bottone - riporta il testo del bottone al testo originale.
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>
Fornisce gli stili di base ed un supporto flessibile per i componenti come accordions e navigation.
Collapse richiede che nella tua versione di Bootstrap venga incluso il plugin transitions.
Usando il plugin collapse, abbiamo costruito una fisarmonica estendendo il componente panel.
<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>
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 terminaQueste classi si trovano in component-animations.less
.
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.
Abilitalo manualmente con:
$('.collapse').collapse()
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 |
Attiva il tuo contenuto richiudibile (pieghevole). Accetta un object
facoltativo di opzioni.
$('#myCollapsible').collapse({
toggle: false
})
Mostra/Chiude un elemento pieghevole.
Mostra un elemento pieghevole.
Chiude un elemento pieghevole.
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…
})
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>
Bootstrap utilizza esclusivamente CSS3 per le animazioni, ma Internet Explorer 8 & 9 non supportano le proprietà CSS necessarie alle animazioni. Perciò, non ci saranno animazioni di transizione quando si utilizzano questi browser. Abbiamo inoltre deciso, intenzionalmente, di non ricorrere a stratagemmi con jQuery per sopperire a questa mancanza.
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>
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.
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.
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.
Chiama il carousel manualmente con:
$('.carousel').carousel()
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. |
Inizializza il carousel con un object
contenente le possibili opzioni e inizia a ciclare lungo la lista di elementi.
$('.carousel').carousel({
interval: 2000
})
Scorre attraverso tutti gli oggetti del carousel da sinistra verso destra.
Arresta il ciclo del carousel.
Scorre il carousel fino a un elemento in particolare (parte da 0, simile ad un array).
Scorre all'oggetto precedente.
Scorre all'oggetto successivo.
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…
})
La sub-navigazione sulla destra è una demo in tempo reale del plugin affix.
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.
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:
.affix-top
per indiciare che l'elemento è nella sua posizione massima, in alto. A questo punto non viene richiesto alcun posizionamento tramite i CSS..affix
sostituisce .affix-top
e imposta position: fixed;
(fornito dal codice CSS di Bootstrap)..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.
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>
Chiama il plugin affix tramite JavaScript:
$('#my-affix').affix({
offset: {
top: 100
, bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
})
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. |
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. |