JavaScript

Väck Bootstrap till liv med våra valfria JavaScript-plugins. Lär dig mer om varje plugin, våra data- och programmatiska API-alternativ och mer.

På den här sidan

Individuell eller sammanställd

Plugins kan inkluderas individuellt (med Bootstraps individuella js/dist/*.js), eller alla på en gång genom att använda bootstrap.jseller minifierade bootstrap.min.js(inkluderar inte båda).

Om du använder en bundler (Webpack, Parcel, Vite...) kan du använda /js/dist/*.jsfiler som är UMD-klara.

Användning med JavaScript-ramverk

Även om Bootstrap CSS kan användas med vilket ramverk som helst, är Bootstrap JavaScript inte helt kompatibelt med JavaScript-ramverk som React, Vue och Angular som förutsätter full kunskap om DOM. Både Bootstrap och ramverket kan försöka mutera samma DOM-element, vilket resulterar i buggar som rullgardinsmenyer som har fastnat i "öppen" position.

Ett bättre alternativ för de som använder den här typen av ramverk är att använda ett ramspecifikt paket istället för Bootstrap JavaScript. Här är några av de mest populära alternativen:

React: React Bootstrap
Vue: BootstrapVue (för närvarande stöder endast Vue 2 och Bootstrap 4)
Kantig: ng-bootstrap

Använder Bootstrap som en modul

Prova själv! Ladda ner källkoden och arbetsdemon för att använda Bootstrap som en ES-modul från twbs/examples repository . Du kan också öppna exemplet i StackBlitz .

Vi tillhandahåller en version av Bootstrap byggd som ESM( bootstrap.esm.jsoch bootstrap.esm.min.js) som gör att du kan använda Bootstrap som en modul i webbläsaren, om dina riktade webbläsare stöder det .

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

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

Jämfört med JS-buntlare kräver användning av ESM i webbläsaren att du använder hela sökvägen och filnamnet istället för modulnamnet. Läs mer om JS-moduler i webbläsaren. Det är därför vi använder 'bootstrap.esm.min.js'istället för 'bootstrap'ovan. Detta kompliceras dock ytterligare av vårt Popper-beroende, som importerar Popper till vårt JavaScript så här:

import * as Popper from "@popperjs/core"

Om du försöker det här som det är, kommer du att se ett fel i konsolen som följande:

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

För att fixa detta kan du använda en importmapför att lösa de godtyckliga modulnamnen för att slutföra sökvägar. Om dina inriktade webbläsare inte stöder importmapmåste du använda es-module-shims- projektet. Så här fungerar det för Bootstrap och 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>

Beroenden

Vissa plugins och CSS-komponenter är beroende av andra plugins. Om du inkluderar insticksprogram individuellt, se till att kontrollera dessa beroenden i dokumenten.

Våra rullgardinsmenyer, popovers och verktygstips är också beroende av Popper .

Dataattribut

Nästan alla Bootstrap-plugins kan aktiveras och konfigureras enbart genom HTML med dataattribut (vårt föredragna sätt att använda JavaScript-funktionalitet). Se till att bara använda en uppsättning dataattribut på ett enda element (t.ex. kan du inte utlösa ett verktygstips och modal från samma knapp.)

Eftersom alternativ kan skickas via dataattribut eller JavaScript kan du lägga till ett alternativnamn till data-bs-, som i data-bs-animation="{value}". Se till att ändra fallets typ av alternativnamnet från " camelCase " till " kebab-case " när du skickar alternativen via dataattribut. Använd till exempel data-bs-custom-class="beautifier"istället för data-bs-customClass="beautifier".

Från och med Bootstrap 5.2.0 stöder alla komponenter ett experimentellt reserverat dataattribut data-bs-configsom kan hysa enkel komponentkonfiguration som en JSON-sträng. När ett element har data-bs-config='{"delay":0, "title":123}'och data-bs-title="456"attribut kommer det slutliga titlevärdet att vara 456och de separata dataattributen kommer att åsidosätta värden som ges på data-bs-config. Dessutom kan befintliga dataattribut innehålla JSON-värden som data-bs-delay='{"show":0,"hide":150}'.

Väljare

Vi använder de ursprungliga querySelectoroch querySelectorAllmetoderna för att fråga DOM-element av prestandaskäl, så du måste använda giltiga väljare . Om du använder speciella väljare som collapse:Example, se till att undvika dem.

evenemang

Bootstrap tillhandahåller anpassade händelser för de flesta plugins unika åtgärder. Generellt kommer dessa i en infinitiv och participform - där infinitiv (ex. show) utlöses i början av en händelse, och dess participform (ex. shown) utlöses vid fullbordandet av en handling.

Alla infinitiva händelser ger preventDefault()funktionalitet. Detta ger möjlighet att stoppa utförandet av en åtgärd innan den startar. Att returnera falskt från en händelsehanterare kommer också att anropas automatiskt preventDefault().

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

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

Programmatisk API

Alla konstruktörer accepterar ett valfritt alternativobjekt eller ingenting (som initierar ett plugin med dess standardbeteende):

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

Om du vill ha en viss plugin-instans, exponerar varje plugin en getInstancemetod. Till exempel, för att hämta en instans direkt från ett element:

bootstrap.Popover.getInstance(myPopoverEl)

Denna metod kommer tillbaka nullom en instans inte initieras över det begärda elementet.

Alternativt getOrCreateInstancekan den användas för att få instansen associerad med ett DOM-element, eller skapa en ny om den inte initierades.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

Om en instans inte initierades kan den acceptera och använda ett valfritt konfigurationsobjekt som andra argument.

CSS-väljare i konstruktörer

Förutom metoderna getInstanceoch getOrCreateInstancekan alla plugin-konstruktörer acceptera ett DOM-element eller en giltig CSS-väljare som det första argumentet. Plugin-element hittas med querySelectormetoden eftersom våra plugins bara stöder ett enda 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')

Asynkrona funktioner och övergångar

Alla programmatiska API-metoder är asynkrona och återgår till den som ringer när övergången har startat, men innan den slutar . För att utföra en åtgärd när övergången är klar kan du lyssna på motsvarande händelse.

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

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

Dessutom kommer ett metodanrop på en övergångskomponent att ignoreras .

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

`dispose`metod

Även om det kan verka korrekt att använda disposemetoden direkt efter hide(), kommer det att leda till felaktiga resultat. Här är ett exempel på problemanvändning:

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

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

Standardinställningar

Du kan ändra standardinställningarna för en plugin genom att ändra pluginens Constructor.Defaultobjekt:

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

Metoder och egenskaper

Varje Bootstrap-plugin avslöjar följande metoder och statiska egenskaper.

Metod	Beskrivning
`dispose`	Förstör ett elements modal. (Tar bort lagrad data på DOM-elementet)
`getInstance`	Statisk metod som låter dig få den modala instansen associerad med ett DOM-element.
`getOrCreateInstance`	Statisk metod som låter dig få den modala instansen associerad med ett DOM-element, eller skapa en ny om den inte initierades.

Statisk egenskap	Beskrivning
`NAME`	Returnerar pluginnamnet. (Exempel: `bootstrap.Tooltip.NAME`)
`VERSION`	Versionen av var och en av Bootstraps plugin-program kan nås via `VERSION`egendomen för plugin-konstruktören (Exempel: `bootstrap.Tooltip.VERSION`)

Saneringsmedel

Tooltips och Popovers använder vår inbyggda desinficering för att sanera alternativ som accepterar HTML.

Standardvärdet allowListär följande:

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

Om du vill lägga till nya värden till denna standard allowListkan du göra följande:

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)

Om du vill kringgå vår desinficering för att du föredrar att använda ett dedikerat bibliotek, till exempel DOMPurify , bör du göra följande:

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

Valfritt med hjälp av jQuery

Du behöver inte jQuery i Bootstrap 5 , men det är fortfarande möjligt att använda våra komponenter med jQuery. Om Bootstrap upptäcker jQueryi windowobjektet kommer det att lägga till alla våra komponenter i jQuerys pluginsystem. Detta låter dig göra följande:

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

Detsamma gäller våra andra komponenter.

Ingen konflikt

Ibland är det nödvändigt att använda Bootstrap-plugins med andra UI-ramverk. Under dessa omständigheter kan namnutrymmeskollisioner ibland inträffa. Om detta händer kan du anropa .noConflictplugin-programmet du vill återställa värdet på.

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

Bootstrap stöder inte officiellt JavaScript-bibliotek från tredje part som Prototype eller jQuery UI. Trots .noConflictoch namnavgränsade händelser kan det finnas kompatibilitetsproblem som du måste åtgärda på egen hand.

jQuery-händelser

Bootstrap kommer att upptäcka jQuery om det jQueryfinns i windowobjektet och det inte finns något data-bs-no-jqueryattribut inställt på <body>. Om jQuery hittas kommer Bootstrap att sända ut händelser tack vare jQuerys händelsesystem. Så om du vill lyssna på Bootstraps händelser måste du använda jQuery-metoderna ( .on, .one) istället för addEventListener.

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

Inaktiverat JavaScript

Bootstraps plugins har ingen speciell reserv när JavaScript är inaktiverat. Om du bryr dig om användarupplevelsen i det här fallet, använd <noscript>för att förklara situationen (och hur du återaktiverar JavaScript) för dina användare och/eller lägg till dina egna anpassade reservalternativ.