Bootstrap - Plugins Übersicht

Die in den vorherigen Kapiteln unter Layout Componentssind nur der Anfang. Bootstrap wird mit 12 jQuery-Plugins geliefert, die die Funktionen erweitern und Ihrer Site mehr Interaktion hinzufügen können. Um mit den JavaScript-Plugins von Bootstrap zu beginnen, müssen Sie kein fortgeschrittener JavaScript-Entwickler sein. Durch die Verwendung der Bootstrap-Daten-API können die meisten Plugins ausgelöst werden, ohne eine einzige Codezeile zu schreiben.

Bootstrap-Plugins können auf zwei Arten in Ihre Site aufgenommen werden:

Individually- Verwenden der einzelnen * .js- Dateien von Bootstrap . Einige Plugins und CSS-Komponenten hängen von anderen Plugins ab. Wenn Sie Plugins einzeln einfügen, überprüfen Sie diese Abhängigkeiten in den Dokumenten.
Oder compiled (all at once)- Verwenden von bootstrap.js oder der minimierten Datei bootstrap.min.js . Versuchen Sie nicht, beide einzuschließen , da sowohl bootstrap.js als auch bootstrap.min.js alle Plugins in einer einzigen Datei enthalten.

Alle Plugins hängen von jQuery ab. Daher muss jQuery vor den Plugin-Dateien enthalten sein. Überprüfen Sie in bower.json , welche Versionen von jQuery unterstützt werden.

Datenattribute

Auf alle Bootstrap-Plugins kann über die mitgelieferte Daten-API zugegriffen werden. Daher müssen Sie keine einzige Zeile JavaScript einfügen, um eine der Plugin-Funktionen aufzurufen.
In einigen Situationen kann es wünschenswert sein, diese Funktionalität der Daten-API zu deaktivieren. Wenn Sie die Daten-API deaktivieren müssen, können Sie die Bindung der Attribute aufheben, indem Sie die folgende Zeile JavaScript hinzufügen:

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

Um ein bestimmtes / einzelnes Plugin zu deaktivieren, geben Sie einfach den Namen des Plugins als Namespace zusammen mit dem Daten-API-Namespace wie folgt an:

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

Programmatische API

Die Entwickler von Bootstrap sind der Meinung, dass Sie alle Plugins ausschließlich über die JavaScript-API verwenden können sollten. Alle öffentlichen APIs sind einzelne, verkettbare Methoden und geben die Sammlung zurück, auf die beispielsweise reagiert wurde.

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

Alle Methoden akzeptieren ein optionales Optionsobjekt, eine Zeichenfolge, die auf eine bestimmte Methode abzielt, oder nichts (was ein Plugin mit Standardverhalten initiiert), wie unten gezeigt -

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

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

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

Jedes Plugin macht auch seinen Rohkonstruktor auf a verfügbar ConstructorEigenschaft: $ .fn.popover.Constructor . Wenn Sie eine bestimmte Plugin-Instanz erhalten möchten, rufen Sie sie direkt von einem Element ab.

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

Kein Konflikt

Bootstrap-Plugins können manchmal mit anderen UI-Frameworks verwendet werden. Unter diesen Umständen können gelegentlich Namespace-Kollisionen auftreten. Um diesen Ruf zu überwinden.noConflict auf dem Plugin möchten Sie den Wert von zurücksetzen.

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

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

Veranstaltungen

Bootstrap bietet benutzerdefinierte Ereignisse für die meisten einzigartigen Aktionen des Plugins. Im Allgemeinen gibt es zwei Ereignisse:

Infinitive form- Dies wird zu Beginn eines Ereignisses ausgelöst. ZB zeigen . Infinitivereignisse bieten die Funktion " PredefDefault" . Dies bietet die Möglichkeit, die Ausführung einer Aktion zu stoppen, bevor sie gestartet wird.

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

Past participle form- Dies wird nach Abschluss einer Aktion ausgelöst. ZB gezeigt.