Ga naar hoofdinhoud Ga naar navigatie in documenten
Check
in English

JavaScript

Breng Bootstrap tot leven met onze optionele JavaScript-plug-ins. Lees meer over elke plug-in, onze gegevens en programmatische API-opties en meer.

Op deze pagina

Individueel of samengesteld

Plug-ins kunnen afzonderlijk worden opgenomen (met behulp van Bootstrap's individual js/dist/*.js), of allemaal tegelijk met bootstrap.jsof de verkleinde bootstrap.min.js(gebruik niet beide).

Als u een bundelaar gebruikt (Webpack, Parcel, Vite…), kunt u /js/dist/*.jsbestanden gebruiken die UMD-ready zijn.

Gebruik met JavaScript-frameworks

Hoewel de Bootstrap CSS met elk framework kan worden gebruikt, is Bootstrap JavaScript niet volledig compatibel met JavaScript-frameworks zoals React, Vue en Angular die volledige kennis van de DOM veronderstellen. Zowel Bootstrap als het framework kunnen proberen hetzelfde DOM-element te muteren, wat resulteert in bugs zoals dropdowns die vastzitten in de "open" positie.

Een beter alternatief voor degenen die dit type frameworks gebruiken, is om een ​​framework-specifiek pakket te gebruiken in plaats van het Bootstrap JavaScript. Hier zijn enkele van de meest populaire opties:

Bootstrap als module gebruiken

Probeer het zelf! Download de broncode en werkende demo voor het gebruik van Bootstrap als een ES-module uit de twbs/examples-repository . Je kunt het voorbeeld ook openen in StackBlitz .

We bieden een versie van Bootstrap gebouwd als ESM( bootstrap.esm.jsen bootstrap.esm.min.js) waarmee u Bootstrap als een module in de browser kunt gebruiken, als uw beoogde browsers dit ondersteunen .

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

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

In vergelijking met JS-bundelaars, vereist het gebruik van ESM in de browser dat u het volledige pad en de bestandsnaam gebruikt in plaats van de modulenaam. Lees meer over JS-modules in de browser. Daarom gebruiken we in 'bootstrap.esm.min.js'plaats van 'bootstrap'hierboven. Dit wordt echter verder bemoeilijkt door onze Popper-afhankelijkheid, die Popper als volgt in ons JavaScript importeert:

import * as Popper from "@popperjs/core"

Als u dit ongewijzigd probeert, ziet u een fout in de console zoals de volgende:

Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../".

Om dit op te lossen, kunt u an importmapgebruiken om de willekeurige modulenamen om te zetten in volledige paden. Als uw beoogde browsers , niet ondersteunen importmap, moet u het es-module-shims- project gebruiken. Zo werkt het voor Bootstrap en Popper:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <title>Hello, modularity!</title>
  </head>
  <body>
    <h1>Hello, modularity!</h1>
    <button id="popoverButton" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>

    <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script>
    <script type="importmap">
    {
      "imports": {
        "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
        "bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.min.js"
      }
    }
    </script>
    <script type="module">
      import * as bootstrap from 'bootstrap'

      new bootstrap.Popover(document.getElementById('popoverButton'))
    </script>
  </body>
</html>

afhankelijkheden

Sommige plug-ins en CSS-componenten zijn afhankelijk van andere plug-ins. Als u plug-ins afzonderlijk opneemt, moet u controleren op deze afhankelijkheden in de documenten.

Onze dropdowns, popovers en tooltips zijn ook afhankelijk van Popper .

Gegevenskenmerken

Bijna alle Bootstrap-plug-ins kunnen alleen via HTML worden ingeschakeld en geconfigureerd met gegevensattributen (onze voorkeursmanier om JavaScript-functionaliteit te gebruiken). Zorg ervoor dat u slechts één set gegevensattributen voor een enkel element gebruikt (u kunt bijvoorbeeld geen tooltip en modaal activeren vanaf dezelfde knop.)

Omdat opties kunnen worden doorgegeven via gegevensattributen of JavaScript, kunt u een optienaam toevoegen aan data-bs-, zoals in data-bs-animation="{value}". Zorg ervoor dat u het kasttype van de optienaam wijzigt van " camelCase " in " kebab-case " wanneer u de opties doorgeeft via gegevensattributen. Gebruik bijvoorbeeld in data-bs-custom-class="beautifier"plaats van data-bs-customClass="beautifier".

Vanaf Bootstrap 5.2.0 ondersteunen alle componenten een experimenteel gereserveerd gegevenskenmerk data-bs-configdat een eenvoudige componentconfiguratie als een JSON-tekenreeks kan bevatten. Wanneer een element attributen heeft data-bs-config='{"delay":0, "title":123}', zal data-bs-title="456"de uiteindelijke titlewaarde zijn 456en zullen de afzonderlijke gegevensattributen de waarden overschrijven die op data-bs-config. Bovendien kunnen bestaande gegevensattributen JSON-waarden zoals data-bs-delay='{"show":0,"hide":150}'.

Selectors

We gebruiken de native querySelectoren querySelectorAllmethoden om DOM-elementen op te vragen om prestatieredenen, dus u moet geldige selectors gebruiken . Als u speciale selectors zoals collapse:Examplegebruikt, zorg er dan voor dat u ze ontwijkt.

Evenementen

Bootstrap biedt aangepaste gebeurtenissen voor de unieke acties van de meeste plug-ins. Over het algemeen komen deze in een infinitief en voltooid deelwoordvorm - waarbij de infinitief (bijv. show) wordt geactiveerd aan het begin van een gebeurtenis, en de voltooid deelwoordvorm (bijv. shown) wordt geactiveerd bij de voltooiing van een actie.

Alle oneindige gebeurtenissen bieden preventDefault()functionaliteit. Dit biedt de mogelijkheid om de uitvoering van een actie te stoppen voordat deze begint. False retourneren van een gebeurtenishandler zal ook automatisch aanroepen preventDefault().

const myModal = document.querySelector('#myModal')

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

Programmatische API

Alle constructors accepteren een optioneel options-object of niets (dat een plug-in start met zijn standaardgedrag):

const myModalEl = document.querySelector('#myModal')

const modal = new bootstrap.Modal(myModalEl) // initialized with defaults

const configObject = { keyboard: false }
const modal1 = new bootstrap.Modal(myModalEl, configObject) // initialized with no keyboard

Als u een bepaalde plug-in-instantie wilt krijgen, onthult elke plug-in een getInstancemethode. Om bijvoorbeeld een instantie rechtstreeks uit een element op te halen:

bootstrap.Popover.getInstance(myPopoverEl)

Deze methode keert terug nullals er geen instantie wordt gestart over het gevraagde element.

Als alternatief getOrCreateInstancekan worden gebruikt om de instantie te koppelen aan een DOM-element, of om een ​​nieuwe te maken voor het geval deze niet is geïnitialiseerd.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

Als een instantie niet is geïnitialiseerd, kan deze een optioneel configuratieobject als tweede argument accepteren en gebruiken.

CSS-kiezers in constructors

Naast de methoden getInstanceen getOrCreateInstancekunnen alle plug-in-constructors een DOM-element of een geldige CSS-selector als eerste argument accepteren. Plug-in-elementen worden gevonden met de querySelectormethode, omdat onze plug-ins slechts één enkel element ondersteunen.

const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
const offcanvas = bootstrap.Offcanvas.getInstance('#myOffcanvas')
const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')

Asynchrone functies en overgangen

Alle programmatische API-methoden zijn asynchroon en keren terug naar de beller zodra de overgang is gestart, maar voordat deze eindigt . Om een ​​actie uit te voeren zodra de overgang is voltooid, kunt u naar de bijbehorende gebeurtenis luisteren.

const myCollapseEl = document.querySelector('#myCollapse')

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

Bovendien wordt een methodeaanroep op een overgangscomponent genegeerd .

const myCarouselEl = document.querySelector('#myCarousel')
const carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', 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 !!

disposemethode

Hoewel het misschien correct lijkt om de disposemethode onmiddellijk daarna te gebruiken hide(), zal dit tot onjuiste resultaten leiden. Hier is een voorbeeld van het probleemgebruik:

const myModal = document.querySelector('#myModal')
myModal.hide() // it is asynchronous

myModal.addEventListener('shown.bs.hidden', event => {
  myModal.dispose()
})

Standaard instellingen

U kunt de standaardinstellingen voor een plug-in wijzigen door het Constructor.Defaultobject van de plug-in aan te passen:

// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false

Methoden en eigenschappen

Elke Bootstrap-plug-in onthult de volgende methoden en statische eigenschappen.

Methode Beschrijving
dispose Vernietigt de modal van een element. (Verwijdert opgeslagen gegevens op het DOM-element)
getInstance Statische methode waarmee u de modale instantie kunt krijgen die is gekoppeld aan een DOM-element.
getOrCreateInstance Statische methode waarmee u de modale instantie kunt krijgen die is gekoppeld aan een DOM-element, of een nieuwe kunt maken voor het geval deze niet is geïnitialiseerd.
Statische eigenschap Beschrijving
NAME Retourneert de naam van de plug-in. (Voorbeeld: bootstrap.Tooltip.NAME)
VERSION De versie van elk van de plug-ins van Bootstrap is toegankelijk via de VERSIONeigenschap van de constructor van de plug-in (voorbeeld: bootstrap.Tooltip.VERSION)

ontsmettingsmiddel

Tooltips en Popovers gebruiken ons ingebouwde ontsmettingsmiddel om opties op te schonen die HTML accepteren.

De standaardwaarde allowListis de volgende:

const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
const 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: []
}

Als u nieuwe waarden aan deze standaard wilt toevoegen, allowListkunt u het volgende doen:

const 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
const myCustomRegex = /^data-my-app-[\w-]+/
myDefaultAllowList['*'].push(myCustomRegex)

Als u ons ontsmettingsmiddel wilt omzeilen omdat u liever een speciale bibliotheek gebruikt, bijvoorbeeld DOMPurify , moet u het volgende doen:

const yourTooltipEl = document.querySelector('#yourTooltip')
const tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn(content) {
    return DOMPurify.sanitize(content)
  }
})

Optioneel met jQuery

Je hebt jQuery niet nodig in Bootstrap 5 , maar het is nog steeds mogelijk om onze componenten te gebruiken met jQuery. Als Bootstrap jQueryin het windowobject detecteert, voegt het al onze componenten toe aan het plug-insysteem van jQuery. Hiermee kunt u het volgende doen:

$('[data-bs-toggle="tooltip"]').tooltip() // to enable tooltips, with default configuration

$('[data-bs-toggle="tooltip"]').tooltip({ boundary: 'clippingParents', customClass: 'myClass' }) // to initialize tooltips with given configuration

$('#myTooltip').tooltip('show') // to trigger `show` method

Hetzelfde geldt voor onze andere componenten.

Geen conflict

Soms is het nodig om Bootstrap-plug-ins te gebruiken met andere UI-frameworks. In deze omstandigheden kunnen naamruimte-botsingen af ​​en toe optreden. Als dit gebeurt, kunt u een beroep doen .noConflictop de plug-in waarvan u de waarde wilt terugzetten.

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

Bootstrap ondersteunt officieel geen JavaScript-bibliotheken van derden, zoals Prototype of jQuery UI. Ondanks .noConflictgebeurtenissen met naamruimte, kunnen er compatibiliteitsproblemen zijn die u zelf moet oplossen.

jQuery-evenementen

Bootstrap zal jQuery detecteren als jQueryhet aanwezig is in het windowobject en er geen data-bs-no-jqueryattribuut is ingesteld op <body>. Als jQuery wordt gevonden, zal Bootstrap gebeurtenissen uitzenden dankzij het gebeurtenissysteem van jQuery. Dus als je naar de gebeurtenissen van Bootstrap wilt luisteren, moet je de jQuery-methoden ( .on, .one) gebruiken in plaats van addEventListener.

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

JavaScript uitgeschakeld

De plug-ins van Bootstrap hebben geen speciale fallback wanneer JavaScript is uitgeschakeld. Als u in dit geval om de gebruikerservaring geeft, gebruik <noscript>dan om de situatie uit te leggen (en hoe u JavaScript opnieuw kunt inschakelen) aan uw gebruikers, en/of voeg uw eigen aangepaste fallbacks toe.