JavaScript
Erwecken Sie Bootstrap mit unseren optionalen JavaScript-Plugins, die auf jQuery basieren, zum Leben. Erfahren Sie mehr über jedes Plugin, unsere Daten- und programmatischen API-Optionen und mehr.
Plugins können einzeln (mit Bootstrap's individual js/dist/*.js
) oder alle auf einmal mit bootstrap.js
oder the minified bootstrap.min.js
(nicht beides enthalten) eingebunden werden.
Wenn Sie einen Bundler (Webpack, Rollup…) verwenden, können Sie /js/dist/*.js
Dateien verwenden, die UMD-fähig sind.
Einige Plugins und CSS-Komponenten sind von anderen Plugins abhängig. Wenn Sie Plugins einzeln einbinden, stellen Sie sicher, dass Sie in der Dokumentation nach diesen Abhängigkeiten suchen. Beachten Sie auch, dass alle Plugins von jQuery abhängen (d. h. jQuery muss vor den Plugin-Dateien eingebunden werden). Konsultieren Sie unserepackage.json
, um zu sehen, welche Versionen von jQuery unterstützt werden.
Unsere Dropdowns, Popovers und Tooltips hängen auch von Popper.js ab .
Nahezu alle Bootstrap-Plug-ins können nur über HTML mit Datenattributen aktiviert und konfiguriert werden (unsere bevorzugte Methode zur Verwendung der JavaScript-Funktionalität). Stellen Sie sicher, dass Sie nur einen Satz von Datenattributen für ein einzelnes Element verwenden (z. B. können Sie einen Tooltip und ein Modal nicht über dieselbe Schaltfläche auslösen).
In einigen Situationen kann es jedoch wünschenswert sein, diese Funktionalität zu deaktivieren. Um die Datenattribut-API zu deaktivieren, lösen Sie alle Ereignisse im Namensraum des Dokuments data-api
wie folgt:
Um alternativ auf ein bestimmtes Plugin abzuzielen, fügen Sie einfach den Namen des Plugins als Namensraum zusammen mit dem Daten-API-Namensraum wie folgt ein:
Escaping-Selektoren
Wenn Sie spezielle Selektoren verwenden, zum Beispiel: collapse:Example
, achten Sie darauf, sie zu maskieren, da sie durch jQuery geleitet werden.
Bootstrap bietet benutzerdefinierte Ereignisse für die einzigartigen Aktionen der meisten Plugins. Im Allgemeinen kommen diese in einer Infinitiv- und Partizipform vor – wobei der Infinitiv (z. B. show
) zu Beginn eines Ereignisses ausgelöst wird und seine Partizipform (z. B. shown
) beim Abschluss einer Aktion ausgelöst wird.
Alle Infinitivereignisse bieten preventDefault()
Funktionalität. Dies bietet die Möglichkeit, die Ausführung einer Aktion zu stoppen, bevor sie beginnt. Die Rückgabe von false von einem Event-Handler ruft ebenfalls automatisch auf preventDefault()
.
Wir glauben auch, dass Sie in der Lage sein sollten, alle Bootstrap-Plugins ausschließlich über die JavaScript-API zu verwenden. Alle öffentlichen APIs sind einzelne, verkettbare Methoden und geben die Sammlung zurück, auf die gehandelt wird.
Alle Methoden sollten ein optionales Optionsobjekt akzeptieren, eine Zeichenfolge, die auf eine bestimmte Methode abzielt, oder nichts (was ein Plugin mit Standardverhalten initiiert):
Jedes Plugin stellt auch seinen Rohkonstruktor für eine Constructor
Eigenschaft bereit: $.fn.popover.Constructor
. Wenn Sie eine bestimmte Plugin-Instanz erhalten möchten, rufen Sie sie direkt von einem Element ab: $('[rel="popover"]').data('popover')
.
Alle programmgesteuerten API-Methoden sind asynchron und kehren zum Aufrufer zurück, sobald der Übergang gestartet wird, aber bevor er endet .
Um eine Aktion auszuführen, nachdem der Übergang abgeschlossen ist, können Sie auf das entsprechende Ereignis lauschen.
Außerdem wird ein Methodenaufruf auf einer Übergangskomponente ignoriert .
Sie können die Standardeinstellungen für ein Plugin ändern, indem Sie das Constructor.Default
Objekt des Plugins ändern:
Manchmal ist es notwendig, Bootstrap-Plugins mit anderen UI-Frameworks zu verwenden. Unter diesen Umständen kann es gelegentlich zu Namespace-Kollisionen kommen. In diesem Fall können Sie .noConflict
das Plugin aufrufen, dessen Wert Sie zurücksetzen möchten.
Auf die Version jedes jQuery-Plugins von Bootstrap kann über die VERSION
Eigenschaft des Konstruktors des Plugins zugegriffen werden. Zum Beispiel für das Tooltip-Plugin:
Die Plugins von Bootstrap greifen nicht besonders elegant zurück, wenn JavaScript deaktiviert ist. Wenn Ihnen in diesem Fall die Benutzererfahrung wichtig ist, verwenden Sie <noscript>
, um Ihren Benutzern die Situation zu erklären (und wie JavaScript wieder aktiviert wird), und/oder fügen Sie Ihre eigenen benutzerdefinierten Fallbacks hinzu.
Bibliotheken von Drittanbietern
Bootstrap unterstützt offiziell keine JavaScript-Bibliotheken von Drittanbietern wie Prototype oder jQuery UI. Trotz .noConflict
und Namespace-Ereignissen kann es zu Kompatibilitätsproblemen kommen, die Sie selbst beheben müssen.
Alle JavaScript-Dateien von Bootstrap sind abhängig von util.js
und müssen zusammen mit den anderen JavaScript-Dateien eingebunden werden. Wenn Sie das kompilierte (oder minimierte) verwenden bootstrap.js
, müssen Sie dies nicht einschließen – es ist bereits vorhanden.
util.js
enthält Hilfsfunktionen und einen grundlegenden Helfer für transitionEnd
Ereignisse sowie einen CSS-Übergangsemulator. Es wird von den anderen Plugins verwendet, um die CSS-Übergangsunterstützung zu prüfen und hängende Übergänge abzufangen.