Tutorial di base di Bootstrap

Plugin di Bootstrap

Bootstrap 插件简介

In precedenza Componenti di layout I componenti discussi nella sezione sono solo l'inizio. Bootstrap include 12 plugin jQuery, che espandono le funzionalità e possono aggiungere più interattività al sito. Anche se non sei un esperto di sviluppo JavaScript, puoi iniziare a studiare i plugin JavaScript di Bootstrap. Utilizzando l'API dei dati di Bootstrap (Bootstrap Data API), la maggior parte dei plugin può essere attivata senza scrivere alcun codice.

Ci sono due modi per includere i plugin di Bootstrap su un sito web:

Riferimento singoloUtilizza l'individuale di Bootstrap *.js Alcuni plugin e componenti CSS dipendono da altri plugin. Se includi singolarmente i plugin, assicurati prima di capire le dipendenze tra questi plugin.
compilazione (contemporanea) dell'archivio.Utilizza bootstrap.js o la versione compressa bootstrap.min.js. Non provare a includere questi due file contemporaneamente, perché bootstrap.js e bootstrap.min.js Contiene tutti i plugin.

Tutti i plugin dipendono da jQuery. Pertanto, è necessario includere jQuery prima del file dell'plugin. Visita bower.json Visualizza la versione di jQuery supportata attualmente da Bootstrap.

Attributo data

Puoi utilizzare tutti i plugin di Bootstrap tramite l'API dell'attributo data senza scrivere una riga di codice JavaScript. Questo è un API di prim'ordine in Bootstrap e dovrebbe essere la tua scelta preferita.
D'altra parte, in alcuni casi potrebbe essere necessario disabilitare questa funzione. Pertanto, abbiamo fornito un metodo per disattivare l'API dell'attributo data, ovvero la data-api Per il nome dello spazio e il binding degli eventi sul documento. Ecco un esempio:
```
$$(document).off('.data-api')$$
```
Per chiudere un plugin specifico, è sufficiente aggiungere il nome del plugin come namespace prima del namespace data-api, come mostrato di seguito:
```
$(document).off('.alert.data-api')
```

API di programmazione

Forniamo API in modo puro JavaScript per tutti i plugin di Bootstrap. Tutte le API pubbliche sono supportate per chiamate singole o catenarie e restituiscono l'insieme degli elementi che operano (Nota: è conforme al formato di chiamata di jQuery). Ad esempio:

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

Tutti i metodi accettano un oggetto opzionale delle opzioni come parametro, o una stringa che rappresenta un metodo specifico, o senza alcun parametro (in questo caso, l'plugin viene inizializzato con il comportamento predefinito), come mostrato di seguito:

// Inizializza come comportamento predefinito
$("#myModal").modal()　　　　
　// Inizializza come non supporta la tastiera　　　　　　　　　　　　　　　
$("#myModal").modal({ keyboard: false })　　
// Inizializza e chiama immediatamente show
$("#myModal").modal('show')

Ogni plugin in Constructor L'attributo espose anche il costruttore originale:$.fn.popover.ConstructorSe desideri ottenere un esempio di un plugin specifico, puoi farlo direttamente tramite l'elemento della pagina:

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

Evitare conflitti di namespace

A volte, i plugin di Bootstrap possono essere utilizzati insieme ad altri framework UI. In questo caso, potrebbe verificarsi un conflitto di namespace. Se questo accade, puoi chiamare il plugin .noConflict Il metodo recupera il suo valore originale.

// Restituisce il valore precedente di $.fn.button
var bootstrapButton = $.fn.button.noConflict()　
// Assegna funzionalità Bootstrap a $().bootstrapBtn　　　　　　　　　　　　　　　　　　　　　　　　　　　
$.fn.bootstrapBtn = bootstrapButton

Evento

Bootstrap fornisce eventi personalizzati per il comportamento unico di molti plugin. Di solito, questi eventi hanno due forme:

Il verbo infinito：Questo viene attivato all'inizio dell'evento. Ad esempio es: showIl verbo infinito dell'evento fornisce preventDefault 功能。这使得在事件开始前可以停止操作的执行。
```
$('#myModal').on('show.bs.modal', function (e) {
// 阻止模态框的显示
　　if (!data) return e.preventDefault()　
})
```
过去分词形式：这会在动作执行完毕之后被触发。例如 es: mostrato。

Bootstrap 过渡效果插件 Bootstrap 创建一个网页