JavaScript

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 (Webpack, Rollup...) gebruikt, kunt u /js/dist/*.jsbestanden gebruiken die UMD-gereed zijn.

Bootstrap als module gebruiken

We bieden een versie van Bootstrap gebouwd als ESM( bootstrap.esm.jsen bootstrap.esm.min.js) waarmee u Bootstrap als een module in uw 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>

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 .

Wil je nog steeds jQuery gebruiken? Het is mogelijk!

Bootstrap 5 is ontworpen om zonder jQuery te worden gebruikt, maar het is nog steeds mogelijk om onze componenten met jQuery te gebruiken. Als Bootstrap jQueryin het windowobject detecteert , voegt het al onze componenten toe aan het plug-insysteem van jQuery; dit betekent dat u $('[data-bs-toggle="tooltip"]').tooltip()tooltips kunt inschakelen. Hetzelfde geldt voor onze andere componenten.

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

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

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 constructors accepteren een optioneel options-object of niets (dat een plug-in start met zijn standaardgedrag):

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

Als u een bepaalde plug-in-instantie wilt krijgen, onthult elke plug-in een getInstancemethode. Om het direct uit een element op te halen, doe je dit: bootstrap.Popover.getInstance(myPopoverEl).

CSS-kiezers in constructors

U kunt ook een CSS-selector als eerste argument gebruiken in plaats van een DOM-element om de plug-in te initialiseren. Momenteel wordt het element voor de plug-in gevonden door de querySelectormethode, aangezien onze plug-ins slechts één enkel element ondersteunen.

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

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.

var myCollapseEl = document.getElementById('myCollapse')

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

Bovendien wordt een methodeaanroep op een transitiecomponent genegeerd .

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 !!

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

Geen conflict (alleen als je jQuery gebruikt)

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.

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

Versienummers

De versie van elk van de plug-ins van Bootstrap is toegankelijk via de VERSIONeigenschap van de constructor van de plug-in. Bijvoorbeeld voor de tooltip-plug-in:

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

Geen speciale fallbacks wanneer JavaScript is uitgeschakeld

De plug-ins van Bootstrap vallen niet bijzonder gracieus terug als 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.

ontsmettingsmiddel

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

De standaardwaarde allowListis de volgende:

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: []
}

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

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)

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

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