Die in den vorherigen Abschnitt -Layoutkomponenten diskutierten Komponenten sind erst der Anfang. Bootstrap verfügt über 12 JQuery-Plug-Ins, die die Funktionen erweitern und der Website weitere Interaktionen hinzufügen können. Auch wenn Sie kein hochrangiger JavaScript-Entwickler sind, können Sie das JavaScript-Plug-In für Bootstrap kennenlernen. Mit der Bootstrap-Daten-API (Bootstrap-Daten-API) können die meisten Plug-Ins ausgelöst werden, ohne Code zu schreiben.
Es gibt zwei Möglichkeiten, sich auf das Bootstrap -Plugin auf der Website zu beziehen :
Individuelle Referenz: individuelle *.js -Dateien mit Bootstrap. Einige Plug-Ins und CSS-Komponenten basieren auf anderen Plug-Ins. Wenn Sie sich separat auf Plugins beziehen, fragen Sie zuerst nach Abhängigkeiten zwischen diesen Plugins.
Kompilieren Sie (gleichzeitig) Referenz: Verwenden Sie Bootstrap.js oder komprimierte Version von Bootstrap.min.js.
"Versuchen Sie nicht, beide Dateien gleichzeitig zu verweisen, da Bootstrap.js und Bootstrap.min.js alle Plugins enthalten."
Alle Plugins hängen von JQuery ab. JQuery muss also vor der Plugin -Datei verwiesen werden. Bitte besuchen Sie Bower.json, um die derzeit unterstützte JQuery -Version von Bootstrap anzusehen.
1. Datenattribute
Sie können alle Bootstrap -Plugins genau über die Datenattribut -API verwenden, ohne eine einzelne Zeile von JavaScript -Code zu schreiben. Dies ist eine erstklassige API in Bootstrap und sollte auch Ihre bevorzugte Methode sein.
Andererseits muss diese Funktion in einigen Fällen möglicherweise ausgeschaltet werden. Daher bieten wir auch eine Möglichkeit, die Datenattribut-API zu schließen, d. H. Ereignisse, die Daten-API als Namespace betrachten und an das Dokument binden. Genau so:
$ (Dokument) .off ('. Data-api')
Um ein bestimmtes Plug-In zu schließen, fügen Sie einfach den Namen des Plug-In als Namespace vor dem Data-API-Namespace hinzu, wie unten gezeigt:
$ (Dokument) .off ('. alert.data-api'))
2. Programmierapi
Wir bieten eine reine JavaScript-basierte API für alle Bootstrap-Plugins. Alle öffentlichen APIs unterstützen individuelle oder verkettete Anrufmethoden und geben die Elemente zurück, an denen sie arbeiten (Hinweis: In Übereinstimmung mit dem Anrufformular von JQuery). Zum Beispiel:
$ (". Btn.danger"). Taste ("Toggle"). AddClass ("Fat")Alle Methoden können ein optionales Optionsobjekt als Parameter oder eine Zeichenfolge akzeptieren, die eine bestimmte Methode darstellt, oder ohne Parameter (in diesem Fall wird das Plug-In als Standardverhalten initialisiert), wie unten gezeigt:
// Initialisieren Sie das Standardverhalten $ ("#MyModal"). Modal () // Initialisieren, um Tastatur nicht zu unterstützen $ ("#MyModal"). Modal ({Tastatur: False}) // Initialisieren und Anruf show $ ("#MyModal"). Modal ('Show')Jedes Plugin enthüllt auch seinen ursprünglichen Konstruktor in der Konstruktoreigenschaft: $ .fn.popover.constructor. Wenn Sie eine Instanz eines bestimmten Plugins erhalten möchten, können Sie es direkt über das Seitenelement erhalten:
$ ('[rel = popover]'). Daten ('popover').
3.. Vermeiden Sie Namespace -Konflikte
Manchmal muss das Bootstrap-Plug-In möglicherweise mit anderen UI-Frameworks verwendet werden. In diesem Fall können Namespace -Konflikte auftreten. Wenn dies leider passiert, können Sie seinen ursprünglichen Wert wiederherstellen, indem Sie die .nokonflikt -Methode des Plugins aufrufen.
// den Wert zurückgeben, der vor $.
4. Ereignisse
Bootstrap bietet benutzerdefinierte Veranstaltungen für das einzigartige Verhalten der meisten Plugins. Im Allgemeinen gibt es diese Ereignisse in zwei Formen:
Verb infinitiv: Dies wird zu Beginn des Ereignisses ausgelöst. Zum Beispiel Ex: Show. Verb infinitive Ereignisse bieten eine Verhinderungsfunktion. Dadurch kann die Ausführung des Vorgangs vor Beginn des Ereignisses gestoppt werden.
$ ('#MyModal'). On ('show.bs.modal', Funktion (e) {// Verhindern Sie die Anzeige von modalen Feldern, wenn (! Daten) E.PreventDefault ()}) zurückgebenVergangenes Partizip -Formular: Dies wird nach Ausführung der Aktion ausgelöst. Zum Beispiel Ex: Show.
Das obige ist ein einfacher Überblick über das Bootstrap-Plug-In. Ich hoffe, es wird für alle hilfreich sein, das Bootstrap-Plug-In zu verstehen.