Spring til hovedindhold Spring til dokumentnavigation
Check
in English

JavaScript

Bring Bootstrap til live med vores valgfri JavaScript-plugins. Lær om hvert plugin, vores data- og programmatiske API-muligheder og mere.

På denne side

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, Parcel, Vite...), kan du bruge /js/dist/*.jsfiler, der er UMD-klare.

Brug med JavaScript-rammer

Mens Bootstrap CSS kan bruges med ethvert framework, er Bootstrap JavaScript ikke fuldt kompatibelt med JavaScript frameworks som React, Vue og Angular , som forudsætter fuld viden om DOM. Både Bootstrap og frameworket kan forsøge at mutere det samme DOM-element, hvilket resulterer i fejl som dropdowns, der sidder fast i "åben" position.

Et bedre alternativ for dem, der bruger denne type rammer, er at bruge en rammespecifik pakke i stedet for Bootstrap JavaScript. Her er nogle af de mest populære muligheder:

Brug af Bootstrap som et modul

Prøv det selv! Download kildekoden og arbejdsdemoen for at bruge Bootstrap som et ES-modul fra twbs/eksempel-lageret . Du kan også åbne eksemplet i StackBlitz .

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 browseren, 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>

Sammenlignet med JS-bundlere kræver brug af ESM i browseren, at du bruger den fulde sti og filnavn i stedet for modulnavnet. Læs mere om JS-moduler i browseren. Derfor bruger vi 'bootstrap.esm.min.js'i stedet for 'bootstrap'ovenstående. Dette kompliceres dog yderligere af vores Popper-afhængighed, som importerer Popper til vores JavaScript sådan:

import * as Popper from "@popperjs/core"

Hvis du prøver dette som det er, vil du se en fejl i konsollen som følgende:

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

For at løse dette kan du bruge en importmaptil at løse de vilkårlige modulnavne til at fuldføre stier. Hvis dine målrettede browsere ikke understøtter importmap, skal du bruge es-module-shims- projektet. Sådan fungerer det til Bootstrap og 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>

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 .

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

Da muligheder kan videregives via dataattributter eller JavaScript, kan du tilføje et indstillingsnavn til data-bs-, som i data-bs-animation="{value}". Sørg for at ændre sagstypen for indstillingsnavnet fra " camelCase " til " kebab-case ", når du videregiver mulighederne via dataattributter. Brug for eksempel i data-bs-custom-class="beautifier"stedet for data-bs-customClass="beautifier".

Fra Bootstrap 5.2.0 understøtter alle komponenter en eksperimentel reserveret dataattribut data-bs-config, der kan rumme simpel komponentkonfiguration som en JSON-streng. Når et element har data-bs-config='{"delay":0, "title":123}'og data-bs-title="456"attributter, vil den endelige titleværdi være, 456og de separate dataattributter vil tilsidesætte værdier givet på data-bs-config. Derudover er eksisterende dataattributter i stand til at rumme JSON-værdier som data-bs-delay='{"show":0,"hide":150}'.

Vælgere

Vi bruger native querySelectorog querySelectorAllmetoder til at forespørge DOM-elementer af ydeevnemæssige årsager, så du skal bruge gyldige vælgere . Hvis du bruger specielle vælgere som collapse:Example, skal du sørge for at undslippe dem.

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

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

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

Programmatisk API

Alle konstruktører accepterer et valgfrit option-objekt eller intet (som starter et plugin med dets standardadfærd):

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

Hvis du gerne vil have en bestemt plugin-instans, afslører hvert plugin en getInstancemetode. For eksempel, for at hente en instans direkte fra et element:

bootstrap.Popover.getInstance(myPopoverEl)

Denne metode vender tilbage, nullhvis en instans ikke startes over det anmodede element.

Alternativt getOrCreateInstancekan den bruges til at få instansen tilknyttet et DOM-element, eller oprette en ny, hvis den ikke blev initialiseret.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

I tilfælde af at en instans ikke blev initialiseret, kan den acceptere og bruge et valgfrit konfigurationsobjekt som andet argument.

CSS-vælgere i konstruktører

Ud over metoderne getInstanceog getOrCreateInstancekan alle plugin-konstruktører acceptere et DOM-element eller en gyldig CSS-vælger som det første argument. Plugin-elementer findes med querySelectormetoden, da vores plugins kun understøtter et enkelt element.

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

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.

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

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

Derudover vil et metodekald på en overgangskomponent blive ignoreret .

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

disposemetode

Selvom det kan virke korrekt at bruge disposemetoden umiddelbart efter hide(), vil det føre til forkerte resultater. Her er et eksempel på problemets brug:

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

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

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

Metoder og egenskaber

Hvert Bootstrap-plugin afslører følgende metoder og statiske egenskaber.

Metode Beskrivelse
dispose Ødelægger et elements modal. (Fjerner lagrede data på DOM-elementet)
getInstance Statisk metode, som giver dig mulighed for at få den modale instans forbundet med et DOM-element.
getOrCreateInstance Statisk metode, som giver dig mulighed for at få den modale instans tilknyttet et DOM-element, eller oprette en ny, hvis den ikke blev initialiseret.
Statisk egenskab Beskrivelse
NAME Returnerer plugin-navnet. (Eksempel: bootstrap.Tooltip.NAME)
VERSION Versionen af ​​hvert af Bootstraps plugins kan tilgås via VERSIONegenskaben af ​​plugin's konstruktør (eksempel: bootstrap.Tooltip.VERSION)

Saneringsmiddel

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

Standardværdien allowLister følgende:

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

Hvis du vil tilføje nye værdier til denne standard allowList, kan du gøre følgende:

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)

Hvis du vil omgå vores desinfektionsmiddel, fordi du foretrækker at bruge et dedikeret bibliotek, for eksempel DOMPurify , skal du gøre følgende:

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

Brug eventuelt jQuery

Du behøver ikke jQuery i Bootstrap 5 , 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. Dette giver dig mulighed for at gøre følgende:

$('[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

Det samme gælder vores øvrige komponenter.

Ingen konflikt

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.

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

Bootstrap understøtter ikke officielt tredjeparts JavaScript-biblioteker som Prototype eller jQuery UI. På trods .noConflictaf begivenheder med navneafstand kan der være kompatibilitetsproblemer, som du skal løse på egen hånd.

jQuery begivenheder

Bootstrap vil registrere jQuery, hvis jQuerydet er til stede i windowobjektet, og der ikke er nogen data-bs-no-jqueryattribut indstillet til <body>. Hvis jQuery findes, vil Bootstrap udsende begivenheder takket være jQuerys begivenhedssystem. Så hvis du vil lytte til Bootstraps begivenheder, skal du bruge jQuery-metoderne ( .on, .one) i stedet for addEventListener.

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

Deaktiveret JavaScript

Bootstraps plugins har ingen speciel fallback, 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.