JavaScript
Bring Bootstrap til live med vores valgfri JavaScript-plugins. Lær om hvert plugin, vores data- og programmatiske API-muligheder og mere.
Individuelt eller samlet
Plugins kan inkluderes individuelt (ved at bruge Bootstraps individuelle js/dist/*.js
), eller alle på én gang ved at bruge bootstrap.js
eller de minificerede bootstrap.min.js
(medtag ikke begge).
Hvis du bruger en bundler (Webpack, Rollup...), kan du bruge /js/dist/*.js
filer, der er UMD-klare.
Brug af Bootstrap som et modul
Vi leverer en version af Bootstrap bygget som ESM
( bootstrap.esm.js
og 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>
Inkompatible plugins
På grund af browserbegrænsninger kan nogle af vores plugins, nemlig Dropdown, Tooltip og Popover plugins, ikke bruges i et <script>
tag med module
type, fordi de afhænger af Popper. For mere information om problemet se her .
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 jQuery
i window
objektet , 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).
Vælgere
For at forespørge DOM-elementer bruger vi i øjeblikket de native metoder querySelector
og querySelectorAll
af ydeevnemæssige årsager, så du skal bruge gyldige vælgere . Hvis du f.eks. bruger specielle vælgere: collapse:Example
Sørg for at undslippe dem.
Begivenheder
Bootstrap leverer tilpassede begivenheder til de fleste plugins' unikke handlinger. Generelt kommer disse i en infinitiv og past participium form - hvor infinitiv (eks. show
) udløses i starten af en begivenhed, og dens participium form (ex. 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
}
})
jQuery begivenheder
Bootstrap vil registrere jQuery, hvis jQuery
det er til stede i window
objektet, og der ikke er nogen data-bs-no-jquery
attribut 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', 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 getInstance
metode. 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 querySelector
metoden, 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.Default
objekt:
// 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 .noConflict
til 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 VERSION
egenskaben af plugin's konstruktør. For eksempel til værktøjstip-plugin:
bootstrap.Tooltip.VERSION // => "5.0.2"
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.
Tredjeparts biblioteker
Bootstrap understøtter ikke officielt tredjeparts JavaScript-biblioteker som Prototype eller jQuery UI. På trods .noConflict
af begivenheder med navneafstand kan der være kompatibilitetsproblemer, som du skal løse på egen hånd.
Saneringsmiddel
Værktøjstip og popovers bruger vores indbyggede desinfektionsmiddel til at rense muligheder, der accepterer HTML.
Standardværdien allowList
er 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)
}
})