Gå til hovedinnhold Hopp til dokumentnavigering
Check
in English

JavaScript

Gjør Bootstrap til live med våre valgfrie JavaScript-plugins. Lær om hver plugin, våre data- og programmatiske API-alternativer og mer.

På denne siden

Individuell eller kompilert

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

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

Bruk med JavaScript-rammeverk

Mens Bootstrap CSS kan brukes med ethvert rammeverk, er Bootstrap JavaScript ikke fullt kompatibelt med JavaScript-rammeverk som React, Vue og Angular som forutsetter full kunnskap om DOM. Både Bootstrap og rammeverket kan forsøke å mutere det samme DOM-elementet, noe som resulterer i feil som dropdowns som sitter fast i "åpen" posisjon.

Et bedre alternativ for de som bruker denne typen rammeverk er å bruke en rammespesifikk pakke i stedet for Bootstrap JavaScript. Her er noen av de mest populære alternativene:

Bruker Bootstrap som en modul

Prøv det selv! Last ned kildekoden og arbeidsdemoen for bruk av Bootstrap som en ES-modul fra twbs/eksempel-repositoriet . Du kan også åpne eksemplet i StackBlitz .

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

Sammenlignet med JS-buntere krever bruk av ESM i nettleseren at du bruker hele banen og filnavnet i stedet for modulnavnet. Les mer om JS-moduler i nettleseren. Det er derfor vi bruker 'bootstrap.esm.min.js'i stedet for 'bootstrap'ovenfor. Dette kompliseres imidlertid ytterligere av vår Popper-avhengighet, som importerer Popper til JavaScript slik:

import * as Popper from "@popperjs/core"

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

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

For å fikse dette, kan du bruke en importmaptil å løse de vilkårlige modulnavnene for å fullføre stier. Hvis de målrettede nettleserne ikke støtter importmap, må du bruke es-module-shims- prosjektet. Slik fungerer det for 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>

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 .

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

Siden alternativer kan sendes via dataattributter eller JavaScript, kan du legge til et alternativnavn til data-bs-, som i data-bs-animation="{value}". Sørg for å endre sakstypen for alternativnavnet fra " camelCase " til " kebab-case " når du sender alternativene via dataattributter. Bruk for eksempel i data-bs-custom-class="beautifier"stedet for data-bs-customClass="beautifier".

Fra Bootstrap 5.2.0 støtter alle komponenter et eksperimentelt reservert dataattributt data-bs-configsom kan inneholde enkel komponentkonfigurasjon 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 titleverdien være 456og de separate dataattributtene vil overstyre verdier gitt på data-bs-config. I tillegg kan eksisterende dataattributter inneholde JSON-verdier som data-bs-delay='{"show":0,"hide":150}'.

Velgere

Vi bruker native querySelectorog querySelectorAllmetodene for å spørre etter DOM-elementer av ytelsesgrunner, så du må bruke gyldige velgere . Hvis du bruker spesielle velgere som collapse:Example, sørg for å unnslippe dem.

arrangementer

Bootstrap gir tilpassede hendelser for de fleste plugins unike handlinger. Generelt 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().

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 godtar et valgfritt opsjonsobjekt eller ingenting (som starter en plugin med standard oppførsel):

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 vil ha en bestemt plugin-forekomst, viser hver plugin en getInstancemetode. For eksempel, for å hente en forekomst direkte fra et element:

bootstrap.Popover.getInstance(myPopoverEl)

Denne metoden kommer tilbake nullhvis en forekomst ikke startes over det forespurte elementet.

Alternativt getOrCreateInstancekan den brukes til å få instansen knyttet til et DOM-element, eller opprette en ny i tilfelle den ikke ble initialisert.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

I tilfelle en forekomst ikke ble initialisert, kan den godta og bruke et valgfritt konfigurasjonsobjekt som andre argument.

CSS-velgere i konstruktører

I tillegg til metodene getInstanceog getOrCreateInstancekan alle plugin-konstruktører godta et DOM-element eller en gyldig CSS-velger som det første argumentet. Plugin-elementer finnes med querySelectormetoden siden våre plugins kun støtter ett 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 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.

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

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

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

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

Selv om det kan virke riktig å bruke disposemetoden umiddelbart etter hide(), vil det føre til feil resultater. Her er et eksempel på problembruken:

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

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

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

Metoder og egenskaper

Hver Bootstrap-plugin avslører følgende metoder og statiske egenskaper.

Metode Beskrivelse
dispose Ødelegger et elements modal. (Fjerner lagrede data på DOM-elementet)
getInstance Statisk metode som lar deg få den modale forekomsten assosiert med et DOM-element.
getOrCreateInstance Statisk metode som lar deg få den modale forekomsten assosiert med et DOM-element, eller opprette en ny i tilfelle den ikke ble initialisert.
Statisk egenskap Beskrivelse
NAME Returnerer pluginnavnet. (Eksempel: bootstrap.Tooltip.NAME)
VERSION Versjonen av hver av Bootstraps plugin-moduler kan nås via VERSIONegenskapen til plugin-konstruktøren (eksempel: bootstrap.Tooltip.VERSION)

Sanitizer

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

Standardverdien 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 legge til nye verdier til denne standarden allowList, kan du gjø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å desinficeringsmiddelet vårt fordi du foretrekker å bruke et dedikert bibliotek, for eksempel DOMPurify , bør du gjøre følgende:

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

Eventuelt ved å bruke jQuery

Du trenger ikke jQuery i Bootstrap 5 , 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 lar deg gjø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 gjelder våre andre komponenter.

Ingen konflikt

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.

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

Bootstrap støtter ikke offisielt tredjeparts JavaScript-biblioteker som Prototype eller jQuery UI. Til tross for .noConflicthendelser med navneavstand, kan det være kompatibilitetsproblemer som du må fikse på egen hånd.

jQuery-hendelser

Bootstrap vil oppdage jQuery hvis jQuerydet er tilstede i windowobjektet og det ikke er noe data-bs-no-jqueryattributt satt til <body>. Hvis jQuery blir funnet, vil Bootstrap sende ut hendelser takket være jQuerys hendelsessystem. Så hvis du vil lytte til Bootstraps hendelser, må du bruke jQuery-metodene ( .on, .one) i stedet for addEventListener.

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

Deaktivert JavaScript

Bootstraps plugins har ingen spesiell reserve 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.