JavaScript

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.

Bootstrap als Modul verwenden

Wir bieten eine als ESM( bootstrap.esm.jsund bootstrap.esm.min.js) aufgebaute Version von Bootstrap an, mit der Sie Bootstrap als Modul in Ihrem Browser verwenden können, wenn Ihre Zielbrowser dies unterstützen .

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

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.

Auch unsere Dropdowns, Popovers und Tooltips hängen von Popper ab .

Möchten Sie immer noch jQuery verwenden? Es ist möglich!

Bootstrap 5 wurde entwickelt, um ohne jQuery verwendet zu werden, aber es ist immer noch möglich, unsere Komponenten mit jQuery zu verwenden. Wenn Bootstrap jQuerydas windowObjekt erkennt , fügt es alle unsere Komponenten in das Plugin-System von jQuery ein; Dies bedeutet $('[data-bs-toggle="tooltip"]').tooltip(), dass Sie Tooltips aktivieren können. Gleiches gilt für unsere anderen Komponenten.

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).

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().

var myModal = document.getElementById('myModal')

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

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

Programmatische API

Alle Konstruktoren akzeptieren ein optionales Optionsobjekt oder nichts (was ein Plugin mit seinem Standardverhalten initiiert):

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

Wenn Sie eine bestimmte Plugin-Instanz erhalten möchten, stellt jedes Plugin eine getInstanceMethode bereit. Um es direkt von einem Element abzurufen, gehen Sie wie folgt vor: bootstrap.Popover.getInstance(myPopoverEl).

CSS-Selektoren in Konstruktoren

Sie können anstelle eines DOM-Elements auch einen CSS-Selektor als erstes Argument verwenden, um das Plugin zu initialisieren. Derzeit wird das Element für das Plugin von der querySelectorMethode gefunden, da unsere Plugins nur ein einzelnes Element unterstützen.

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

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.

var myCollapseEl = document.getElementById('myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

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

var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

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

carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
carousel.to('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
bootstrap.Modal.Default.keyboard = false

Kein Konflikt (nur wenn Sie jQuery verwenden)

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 Bootstrap-Plugins kann über die VERSIONEigenschaft des Konstruktors des Plugins zugegriffen werden. Zum Beispiel für das Tooltip-Plugin:

bootstrap.Tooltip.VERSION // => "5.1.3"

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.

Desinfektionsmittel

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

Der Standardwert allowListist der folgende:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultAllowlist = {
  // 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, allowListkönnen Sie Folgendes tun:

var myDefaultAllowList = bootstrap.Tooltip.Default.allowList

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

// To allow td elements and data-bs-option attributes on td elements
myDefaultAllowList.td = ['data-bs-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-]+/
myDefaultAllowList['*'].push(myCustomRegex)

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

var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})