JavaScript

Individuel eller samlet

Plugins kan inkluderes individuelt (ved at bruge Bootstraps individuelle js/dist/*.js), eller alle på én gang ved at bruge bootstrap.jseller de minificerede bootstrap.min.js(medtag ikke begge).

Hvis du bruger en bundler (Webpack, Rollup...), kan du bruge /js/dist/*.jsfiler, der er UMD-klare.

Brug af Bootstrap som et modul

Vi leverer en version af Bootstrap bygget som ESM( bootstrap.esm.jsog bootstrap.esm.min.js), som giver dig mulighed for at bruge Bootstrap som et modul i din browser, hvis dine målrettede browsere understøtter det .

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

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

Afhængigheder

Nogle plugins og CSS-komponenter afhænger af andre plugins. Hvis du inkluderer plugins individuelt, skal du sørge for at tjekke for disse afhængigheder i dokumenterne.

Vores dropdowns, popovers og værktøjstip afhænger også af Popper .

Vil du stadig bruge jQuery? Er det muligt!

Bootstrap 5 er designet til at blive brugt uden jQuery, men det er stadig muligt at bruge vores komponenter med jQuery. Hvis Bootstrap finder jQueryi windowobjektet , tilføjer det alle vores komponenter i jQuerys plugin-system; det betyder, at du vil være i stand til $('[data-bs-toggle="tooltip"]').tooltip()at aktivere værktøjstip. Det samme gælder vores øvrige komponenter.

Data attributter

Næsten alle Bootstrap-plugins kan aktiveres og konfigureres gennem HTML alene med dataattributter (vores foretrukne måde at bruge JavaScript-funktionalitet på). Sørg for kun at bruge ét sæt dataattributter på et enkelt element (f.eks. kan du ikke udløse et værktøjstip og modal fra den samme knap).

Begivenheder

Bootstrap leverer tilpassede begivenheder til de fleste plugins' unikke handlinger. Generelt kommer disse i en infinitiv og en perfektum form - hvor infinitiv (eks. show) udløses ved starten af ​​en begivenhed, og dens participiumform (eks. shown) udløses ved afslutningen af ​​en handling.

Alle infinitive begivenheder giver preventDefault()funktionalitet. Dette giver mulighed for at stoppe udførelsen af ​​en handling, før den starter. At returnere falsk fra en hændelseshandler vil også automatisk kalde 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 accepterer et valgfrit option-objekt eller intet (som starter et plugin med dets standardadfærd):

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 gerne vil have en bestemt plugin-instans, afslører hvert plugin en getInstancemetode. For at hente det direkte fra et element skal du gøre dette: bootstrap.Popover.getInstance(myPopoverEl).

CSS-vælgere i konstruktører

Du kan også bruge en CSS-vælger som det første argument i stedet for et DOM-element til at initialisere plugin'et. I øjeblikket findes elementet til pluginnet af querySelectormetoden, da vores plugins kun understøtter et enkelt element.

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

Asynkrone funktioner og overgange

Alle programmatiske API-metoder er asynkrone og vender tilbage til den, der ringer, når overgangen er startet, men før den slutter .

For at udføre en handling, når overgangen er fuldført, kan du lytte til den tilsvarende begivenhed.

var myCollapseEl = document.getElementById('myCollapse')

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

Derudover vil et metodekald på en overgangskomponent blive ignoreret .

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

Standardindstillinger

Du kan ændre standardindstillingerne for et plugin ved at ændre pluginets Constructor.Defaultobjekt:

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

Ingen konflikt (kun hvis du bruger jQuery)

Nogle gange er det nødvendigt at bruge Bootstrap-plugins med andre UI-rammer. Under disse omstændigheder kan navneområdekollisioner lejlighedsvis forekomme. Hvis dette sker, kan du ringe .noConflicttil det plugin, du ønsker at gendanne værdien af.

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

Versionsnumre

Versionen af ​​hvert af Bootstraps plugins kan tilgås via VERSIONegenskaben af ​​plugin's konstruktør. For eksempel til værktøjstip-plugin:

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

Ingen særlige fallbacks, når JavaScript er deaktiveret

Bootstraps plugins falder ikke særlig yndefuldt tilbage, når JavaScript er deaktiveret. Hvis du bekymrer dig om brugeroplevelsen i dette tilfælde, skal du bruge <noscript>til at forklare situationen (og hvordan du genaktiverer JavaScript) for dine brugere og/eller tilføje dine egne tilpassede reserver.

Saneringsmiddel

Værktøjstip og popovers bruger vores indbyggede desinfektionsmiddel til at rense muligheder, der accepterer HTML.

Standardværdien 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 tilføje nye værdier til denne standard allowList, kan du gø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å vores desinfektionsmiddel, fordi du foretrækker at bruge et dedikeret bibliotek, for eksempel DOMPurify , skal du gøre følgende:

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