Bootstrap Panoramica plug-in
Nella sezione precedente discussola disposizione dei componenti per l'assemblaggio è solo l'inizio.Bootstrap viene fornito con 12 tipi plugin jQuery estende la funzionalità può essere aggiunta al sito più interattivo. Anche se non sei uno sviluppatore avanzata JavaScript, si può anche iniziare a imparare i plug-in Bootstrap JavaScript. API Usa Bootstrap dati (Bootstrap dati API), la maggior parte dei plug-in può essere attivato senza scrivere codice.
Sito Riferimenti spina Bootstrap in due modi:
- Citazione da solo: utilizzare un separato file* .jsdi Bootstrap.Alcuni componenti plug-in e CSS dipende da altri plug-in. Se si collega un riferimento separato, assicurarsi che essi comprendano le dipendenze tra i plug-in.
- Compilare (contemporaneamente) Citazione: Usarebootstrap.jso versione compressa dibootstrap.min.js.
Non cercare di citare questi due file, e perché bootstrap.jsbootstrap.min.js contengono tutti i plugin.
dati immobile
- Si può solo essere in grado di utilizzare tutti i dati degli attributi Bootstrap plugin API, senza scrivere una sola riga di codice JavaScript. Si tratta di una API Bootstrap prima classe, dovrebbe essere il tuo modo preferito.
- Poi di nuovo, in alcuni casi potrebbe essere necessario disattivare questa funzione. Pertanto, offriamo anche un metodo API attributo data di chiusura, vale a dire per sollevare lo spazio dei nomi dati-apie vincolante per gli eventi del documento. Come ad esempio il seguente:
$ (Document) .OFF ( '. Data-api')
- Per chiudere un plug-in specifico, poco prima lo spazio dei nomi dati API e il nome del widget come uno spazio dei nomi, come illustrato di seguito:
$ (Document) .OFF ( '. Alert.data-api')
API programmatico
Noi forniamo un modo per puro API JavaScript per tutti i plugin di bootstrap. Tutte le chiamate API pubbliche sono supportate singolarmente o in modalità incatenati, e restituisce un insieme di elementi opera (Nota: la forma e invocare un accordo jQuery). Ad esempio:
$ ( ". Btn.danger"). Button ( "Toggle"). AddClass ( "grasso")
Tutti i metodi possono prendere una delle opzioni facoltative oggetto come un parametro, o una stringa che rappresenta un particolare metodo, o senza parametri (in questo caso, sarà inizializzare il plug-in per il comportamento di default), come segue:
// Inizializzato il comportamento predefinito di $ ( "# myModal"). Modale ()
// Inizializza la tastiera non supporta il $ ( "# myModal") modale ({tastiera: false}).
// Inizializza e chiamare lo spettacolo subito
$ ( "# MyModal"). Modale ( 'show')
Ogni plug-in all'interno della struttura,di costruzione espone ancheilsuocostruttore originale:$ .fn.popover.Constructor.Se si desidera ottenere un'istanza di un particolare widget è possibile ottenere direttamente attraverso gli elementi della pagina:
$ ( '[Rel = popover]'). I dati ( 'popover').
Evitare le collisioni namespace
A volte può essere necessario per essere utilizzato con altri framework di interfaccia utente plugin Bootstrap. In questo caso, si possono verificare collisioni namespace. Purtroppo, se questo accade, è possibile ripristinare il valore originale chiamando i metodi widget di.noConflict.
// Restituisce $ .fn.button prima della var valore assegnato bootstrapButton = $ .fn.button.noConflict () funzioni BootstrapBtn // Per il $ (). conferito Bootstrap $ .fn.bootstrapBtn = BootstrapButton
evento
Bootstrap fornisce un evento personalizzato come un comportamento unico della maggior parte dei plug-in. In genere, questi eventi sono disponibili in due forme:
- Infinito: Questo verrà attivato quando inizia l'evento.Come ad esempioes: spettacolo.evento Infinito fornisce una funzionepreventDefault.Questo permette di interrompere l'operazione prima dell'evento iniziato.
$ ( '# MyModal'). On ( 'show.bs.modal', function (e) { Viene visualizzata // dialogo modale Prevenire if (! Data) tornare e.preventDefault () }) - participio passato: questo verrà attivato dopo l'operazione è terminata.Come ad esempioes: mostrato.