JavaScript

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

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, Rollup...), kan du bruke /js/dist/*.jsfiler som er UMD-klare.

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ær også oppmerksom på at alle plugins er avhengige av jQuery (dette betyr at jQuery må inkluderes før plugin-filene). Se vårpackage.json for å se hvilke versjoner av jQuery som støttes.

Våre rullegardiner, popovers og verktøytips avhenger også av Popper.js .

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

I noen situasjoner kan det imidlertid være ønskelig å deaktivere denne funksjonaliteten. For å deaktivere dataattributtet API, fjern bindingen til alle hendelser på dokumentet med navneavstand data-apislik:

$(document).off('.data-api')

Alternativt, for å målrette mot et spesifikt plugin, inkluderer du bare pluginens navn som et navneområde sammen med data-api navneområdet slik:

$(document).off('.alert.data-api')

arrangementer

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

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) {
    return e.preventDefault() // stops modal from being shown
  }
})

Programmatisk API

Vi mener også at du bør kunne bruke alle Bootstrap-plugins rent gjennom JavaScript API. Alle offentlige API-er er enkle, kjedebare metoder, og returnerer samlingen som ble utført.

$('.btn.danger').button('toggle').addClass('fat')

Alle metoder bør godta et valgfritt alternativobjekt, en streng som retter seg mot en bestemt metode, eller ingenting (som starter en plugin med standard oppførsel):

$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately

Hvert plugin viser også sin råkonstruktør på en Constructoregenskap: $.fn.popover.Constructor. Hvis du vil ha en bestemt plugin-forekomst, kan du hente den direkte fra et element: $('[rel="popover"]').data('popover').

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.

$('#myCollapse').on('shown.bs.collapse', function (e) {
  // Action to execute once the collapsible area is expanded
})

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

$('#myCarousel').on('slid.bs.carousel', function (e) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

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
$.fn.modal.Constructor.Default.keyboard = false

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.

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

Versjonsnummer

Versjonen av hver av Bootstraps jQuery-plugins kan nås via VERSIONegenskapen til plugin-konstruktøren. For eksempel for verktøytips-plugin:

$.fn.tooltip.Constructor.VERSION // => "4.4.1"

Ingen spesielle fallbacks når JavaScript er deaktivert

Bootstraps plugins faller ikke spesielt elegant tilbake 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.

Utnytt

Alle Bootstraps JavaScript-filer er avhengige av util.js, og de må inkluderes sammen med de andre JavaScript-filene. Hvis du bruker den kompilerte (eller minifiserte) bootstrap.js, er det ikke nødvendig å inkludere dette – det er der allerede.

util.jsinkluderer verktøyfunksjoner og en grunnleggende hjelper for transitionEndarrangementer samt en CSS-overgangsemulator. Den brukes av de andre pluginene for å se etter støtte for CSS-overganger og for å fange hengende overganger.

Sanitizer

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

Standardverdien whiteLister følgende:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // 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', '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 whiteList, kan du gjøre følgende:

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-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-]+/
myDefaultWhiteList['*'].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:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})