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.

Einzeln oder zusammengestellt

Plugins können einzeln (mit Bootstrap's individual js/dist/*.js) oder alle auf einmal mit bootstrap.jsoder the minified bootstrap.min.js(nicht beides enthalten) eingebunden werden.

Wenn Sie einen Bundler (Webpack, Rollup…) verwenden, können Sie /js/dist/*.jsDateien verwenden, die UMD-fähig sind.

Abhängigkeiten

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 .

Datenattribute

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-apiwie folgt:

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

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:

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

Veranstaltungen

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 in der Vergangenheit (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().

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

Programmatische API

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.

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

Alle Methoden sollten ein optionales Optionsobjekt akzeptieren, eine Zeichenfolge, die auf eine bestimmte Methode abzielt, oder nichts (was ein Plugin mit Standardverhalten initiiert):

$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately

Jedes Plugin stellt auch seinen Rohkonstruktor für eine ConstructorEigenschaft 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').

Asynchrone Funktionen und Übergänge

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.

$('#myCollapse').on('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

Außerdem wird ein Methodenaufruf auf einer Übergangskomponente ignoriert .

$('#myCarousel').on('slid.bs.carousel', function (event) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

Standardeinstellungen

Sie können die Standardeinstellungen für ein Plugin ändern, indem Sie das Constructor.DefaultObjekt des Plugins ändern:

// changes default for the modal plugin's `keyboard` option to false
$.fn.modal.Constructor.Default.keyboard = false

Kein Konflikt

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 .noConflictdas Plugin aufrufen, dessen Wert Sie zurücksetzen möchten.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality

Versionsnummern

Auf die Version jedes jQuery-Plugins von Bootstrap kann über die VERSIONEigenschaft des Konstruktors des Plugins zugegriffen werden. Zum Beispiel für das Tooltip-Plugin:

$.fn.tooltip.Constructor.VERSION // => "4.6.2"

Keine speziellen Fallbacks, wenn JavaScript deaktiviert ist

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.

Nützlich

Alle JavaScript-Dateien von Bootstrap sind abhängig von util.jsund 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.jsenthält Hilfsfunktionen und einen grundlegenden Helfer für transitionEndEreignisse 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.

Desinfektionsmittel

Tooltips und Popovers verwenden unseren integrierten Bereinigungsdienst, um Optionen zu bereinigen, die HTML akzeptieren.

Der Standardwert whiteListist der folgende:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'srcset', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Wenn Sie diesem Standardwert neue Werte hinzufügen möchten, whiteListkönnen Sie Folgendes tun:

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Wenn Sie unseren Sanitizer umgehen möchten, weil Sie lieber eine dedizierte Bibliothek verwenden, z. B. DOMpurify , sollten Sie Folgendes tun:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})