JavaScript

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, Rollup...) kan du använda /js/dist/*.jsfiler som är UMD-klara.

Använder Bootstrap som en modul

Vi tillhandahåller en version av Bootstrap byggd som ESM( bootstrap.esm.jsoch bootstrap.esm.min.js) som låter dig använda Bootstrap som en modul i din webbläsare, om dina inriktade webbläsare stödjer det .

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

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

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 .

Vill du fortfarande använda jQuery? Det är möjligt!

Bootstrap 5 är designad för att användas utan jQuery, 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 betyder att du kommer att kunna göra $('[data-bs-toggle="tooltip"]').tooltip()för att aktivera verktygstips. Detsamma gäller våra andra komponenter.

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

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

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

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

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

Om du vill ha en viss plugin-instans, exponerar varje plugin en getInstancemetod. För att hämta det direkt från ett element, gör så här: bootstrap.Popover.getInstance(myPopoverEl).

CSS-väljare i konstruktörer

Du kan också använda en CSS-väljare som det första argumentet istället för ett DOM-element för att initiera plugin-programmet. För närvarande hittas elementet för plugin av querySelectormetoden eftersom våra plugins endast stöder ett enstaka element.

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

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.

var myCollapseEl = document.getElementById('myCollapse')

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

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

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

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

Ingen konflikt (endast om du använder jQuery)

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

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

Versionsnummer

Versionen av var och en av Bootstraps plugins kan nås via VERSIONegendomen för pluginens konstruktör. Till exempel för verktygstipsplugin:

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

Inga speciella fallbacks när JavaScript är inaktiverat

Bootstraps plugins faller inte tillbaka särskilt graciöst 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.

Saneringsmedel

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

Standardvärdet allowListär följande:

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

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

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)

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:

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