Das beste Bootstrap-Plugin Übersicht-Tutorial im Jahr 2024. In diesem Tutorial können Sie Eigenschaftsdaten,Programmatische API,Vermeiden Sie Namespace-Kollisionen,Ereignis, lernen
Im vorangegangenen Abschnitt diskutiertdie Anordnung der Komponenten an der Baugruppe es gerade der Anfang.Bootstrap kommt mit 12 Arten jQuery-Plugin kann die Funktionalität auf der Website interaktiver hinzugefügt werden erweitert. Auch wenn Sie nicht eine erweiterte JavaScript-Entwickler sind, können Sie auch die Bootstrap JavaScript-Plug-Ins lernen beginnen. Verwenden Sie Bootstrap-Daten-API (Bootstrap-Daten-API), können die meisten von dem Plug-in ausgelöst werden, ohne Code schreiben.
Site-Referenzen Bootstrap Stecker auf zwei Arten:
Versuchen Sie nicht , diese beiden Dateien zu zitieren, und weil bootstrap.jsbootstrap.min.js alle Plugins enthalten.
$ (Dokument) .off ( '. Daten-api)
$ (Dokument) .off ( '. Alert.data-api)
Wir bieten eine Möglichkeit, reine JavaScript-API für alle Bootstrap-Plugins. Alle öffentlichen API-Aufrufe werden einzeln oder verkettete Modus unterstützt, und gibt eine Reihe von Elementen operiert (Hinweis: das Formular aus und rufen Sie jQuery Vereinbarung). Zum Beispiel:
$ ( ". Btn.danger"). Button ( "Toggle"). AddClass ( "Fett")
Alle Methoden können eine optionale Optionen nehmen Objekt als Parameter oder eine Zeichenfolge, die eine bestimmte Methode oder ohne Parameter (in diesem Fall wird es das Plug-in für das Standardverhalten initialisieren), wie folgt:
// Initialized auf das Standardverhalten von $ ( "# myModal"). Modal () // Tastatur initialisieren nicht die $ nicht unterstützen ( "# myModal") modal ({Tastatur: false}). // Initialisieren und die Show sofort anrufen $ ( "# MyModal"). Modal ( 'show')
Jedes Plug-in aufConstructor Eigenschaft macht auch seinen ursprünglichenKonstruktor:$ .fn.popover.Constructor.Wenn Sie eine Instanz von einem Widget zu bekommen möchten, können Sie direkt über die Seitenelemente erhalten:
$ ( '[Rel = popover]'). Die Daten ( 'popover').
Manchmal Bootstrap Plugins müssen mit anderen UI Rahmen verwendet zu werden. In diesem Fall kann Namespace Kollisionen auftreten. Leider, wenn dies der Fall ist , können Sie den ursprünglichen Wert durch Aufrufen der Widget.noConflict Methoden wiederherstellen.
// Gibt .fn.button $ vor dem zugewiesenen Wert var bootstrapButton = $ .fn.button.noConflict () // Für die $ (). BootstrapBtn Funktionen verliehen Bootstrap $ .fn.bootstrapBtn = BootstrapButton
Bootstrap bietet ein benutzerdefiniertes Ereignis als ein einzigartiges Verhalten der meisten Plug-Ins. Im Allgemeinen kommen diese Ereignisse in zwei Formen:
$ ( '# MyModal'). Ein ( 'show.bs.modal', function (e) { // Prevent modale Feld wird angezeigt, wenn (! Data) zurückkehren e.preventDefault () })