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

$('#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:

$.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to 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.2.1"

Ingen spesielle fallbacks når JavaScript er deaktivert

Bootstrap’s plugins don’t fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use <noscript> to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.

Util

All Bootstrap’s JavaScript files depend on util.js and it has to be included alongside the other JavaScript files. If you’re using the compiled (or minified) bootstrap.js, there is no need to include this—it’s already there.

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.