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. Retur falsk fra en hendelsesbehandler vil også automatisk kalle opp 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 returnerer 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-pluginen:

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

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.