JavaScript

Individuell eller kompilert

Plugins kan inkluderes individuelt (ved å bruke Bootstraps individuelle js/dist/*.js), eller alle på en gang ved å bruke bootstrap.jseller minifisert bootstrap.min.js(ikke inkludere begge).

Hvis du bruker en bundler (Webpack, Rollup ...), kan du bruke /js/dist/*.jsfiler som er UMD-klare.

Bruker Bootstrap som en modul

Vi tilbyr en versjon av Bootstrap bygget som ESM( bootstrap.esm.jsog bootstrap.esm.min.js) som lar deg bruke Bootstrap som en modul i nettleseren din, hvis nettleserne dine støtter det .

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

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

Avhengigheter

Noen plugins og CSS-komponenter er avhengige av andre plugins. Hvis du inkluderer plugins individuelt, sørg for å se etter disse avhengighetene i dokumentene.

Våre rullegardiner, popovers og verktøytips avhenger også av Popper .

Vil du fortsatt bruke jQuery? Det er mulig!

Bootstrap 5 er designet for å brukes uten jQuery, men det er fortsatt mulig å bruke komponentene våre med jQuery. Hvis Bootstrap oppdager jQueryi windowobjektet , vil det legge til alle komponentene våre i jQuerys plugin-system; dette betyr at du kan gjøre $('[data-bs-toggle="tooltip"]').tooltip()for å aktivere verktøytips. Det samme gjelder våre andre komponenter.

Dataattributter

Nesten alle Bootstrap-plugins kan aktiveres og konfigureres gjennom HTML alene med dataattributter (vår foretrukne måte å bruke JavaScript-funksjonalitet). Pass på at du bare bruker ett sett med dataattributter på et enkelt element (f.eks. kan du ikke utløse et verktøytips og en modal fra samme knapp.)

arrangementer

Bootstrap gir tilpassede hendelser for de fleste plugins unike handlinger. Vanligvis kommer disse i en infinitiv og partisippform - der infinitiv (eks. show) utløses ved starten av en hendelse, og partisippform (eks. shown) utløses ved fullføring av en handling.

Alle infinitive hendelser gir preventDefault()funksjonalitet. Dette gir muligheten til å stoppe utførelsen av en handling før den starter. Å returnere usant fra en hendelsesbehandler vil også automatisk ringe 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...
})

Programmatisk API

Alle konstruktører godtar et valgfritt opsjonsobjekt eller ingenting (som starter en plugin med standard oppførsel):

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

Hvis du vil ha en bestemt plugin-forekomst, viser hver plugin en getInstancemetode. For å hente den direkte fra et element, gjør du dette: bootstrap.Popover.getInstance(myPopoverEl).

CSS-velgere i konstruktører

Du kan også bruke en CSS-velger som det første argumentet i stedet for et DOM-element for å initialisere plugin-en. For øyeblikket blir elementet for plugin funnet av querySelectormetoden siden våre plugins støtter kun ett enkelt element.

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

Asynkrone funksjoner og overganger

Alle programmatiske API-metoder er asynkrone og går tilbake til den som ringer når overgangen er startet, men før den avsluttes .

For å utføre en handling når overgangen er fullført, kan du lytte til den tilsvarende hendelsen.

var myCollapseEl = document.getElementById('myCollapse')

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

I tillegg vil et metodekall på en overgangskomponent bli ignorert .

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

Standard instillinger

Du kan endre standardinnstillingene for en plugin ved å endre plugin- Constructor.Defaultobjektet:

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

Ingen konflikt (bare hvis du bruker jQuery)

Noen ganger er det nødvendig å bruke Bootstrap-plugins med andre UI-rammer. Under disse omstendighetene kan navneområdekollisjoner av og til forekomme. Hvis dette skjer, kan du ringe .noConflicttil plugin-en du ønsker å tilbakestille verdien av.

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

Versjonsnummer

Versjonen av hver av Bootstraps plugins kan nås via VERSIONegenskapen til plugin-konstruktøren. For eksempel for verktøytips-pluginen:

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

Ingen spesielle fallbacks når JavaScript er deaktivert

Bootstraps plugins faller ikke spesielt elegant tilbake når JavaScript er deaktivert. Hvis du bryr deg om brukeropplevelsen i dette tilfellet, bruk <noscript>for å forklare situasjonen (og hvordan du aktiverer JavaScript på nytt) for brukerne dine, og/eller legg til dine egne tilpassede reserver.

Sanitizer

Verktøytips og popovers bruker vår innebygde rensemiddel for å rense alternativer som godtar HTML.

Standardverdien allowLister følgende:

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

Hvis du vil legge til nye verdier til denne standarden allowList, kan du gjøre følgende:

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)

Hvis du vil omgå desinficeringsmiddelet vårt fordi du foretrekker å bruke et dedikert bibliotek, for eksempel DOMPurify , bør du gjøre følgende:

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