Bootstrap - Panoramica dei plugin

I componenti discussi nei capitoli precedenti sotto Layout Componentssono solo l'inizio. Bootstrap viene fornito in bundle con 12 plugin jQuery che estendono le funzionalità e possono aggiungere più interazioni al tuo sito. Per iniziare con i plug-in JavaScript di Bootstrap, non è necessario essere uno sviluppatore JavaScript avanzato. Utilizzando Bootstrap Data API, la maggior parte dei plugin può essere attivata senza scrivere una sola riga di codice.

I plugin Bootstrap possono essere inclusi nel tuo sito in due forme:

  • Individually- Utilizzo dei singoli file * .js di Bootstrap . Alcuni plugin e componenti CSS dipendono da altri plugin. Se includi i plug-in singolarmente, assicurati di controllare queste dipendenze nei documenti.

  • O compiled (all at once)- Utilizzando bootstrap.js o bootstrap.min.js minimizzato . Non tentare di includerli entrambi, poiché sia bootstrap.js che bootstrap.min.js contengono tutti i plugin in un unico file.

Tutti i plugin dipendono da jQuery. Quindi jQuery deve essere incluso prima dei file del plugin. Controlla bower.json per vedere quali versioni di jQuery sono supportate.

Attributi dei dati

  • Tutti i plugin Bootstrap sono accessibili utilizzando la Data API inclusa. Pertanto, non è necessario includere una singola riga di JavaScript per richiamare nessuna delle funzionalità del plug-in.

  • In alcune situazioni potrebbe essere opportuno disattivare questa funzionalità di Data API. Se è necessario disattivare l'API dei dati, è possibile svincolare gli attributi aggiungendo la seguente riga di JavaScript:

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

  • Per disattivare un plug-in specifico / singolo, includi semplicemente il nome del plug-in come spazio dei nomi insieme allo spazio dei nomi data-api in questo modo:

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

API programmatica

Gli sviluppatori di Bootstrap credono che dovresti essere in grado di utilizzare tutti i plugin esclusivamente tramite l'API JavaScript. Tutte le API pubbliche sono metodi singoli, concatenabili e restituiscono la raccolta su cui si è agito, ad esempio:

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

Tutti i metodi accettano un oggetto opzioni opzionale, una stringa che prende di mira un metodo particolare o niente (che avvia un plugin con comportamento predefinito) come mostrato di seguito -

// initialized with defaults
$("#myModal").modal()    

 // initialized with no keyboard                  
$("#myModal").modal({ keyboard: false })  

// initializes and invokes show immediately
$("#myModal").modal('show')

Ogni plugin espone anche il suo costruttore grezzo su un file Constructorproprietà: $ .fn.popover.Constructor . Se desideri ottenere una particolare istanza di plug-in, recuperala direttamente da un elemento:

$('[rel = popover]').data('popover').

Nessun conflitto

I plugin Bootstrap possono talvolta essere utilizzati con altri framework dell'interfaccia utente. In queste circostanze, possono occasionalmente verificarsi conflitti di spazio dei nomi. Per superare questa chiamata.noConflict sul plugin di cui desideri ripristinare il valore.

// return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict()

// give $().bootstrapBtn the Bootstrap functionality
$.fn.bootstrapBtn = bootstrapButton

Eventi

Bootstrap fornisce eventi personalizzati per la maggior parte delle azioni uniche del plugin. Generalmente, questi eventi si presentano in due forme:

  • Infinitive form- Viene attivato all'inizio di un evento. Ad esempio mostra . Gli eventi infiniti forniscono la funzionalità preventDefault . Ciò fornisce la possibilità di interrompere l'esecuzione di un'azione prima che inizi.

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

  • Past participle form- Viene attivato al completamento di un'azione. Ad esempio mostrato.