JavaScript

Bring Bootstrap til live med vores valgfri JavaScript-plugins bygget på jQuery. Lær om hvert plugin, vores data- og programmatiske API-muligheder og mere.

Individuel eller samlet

Plugins kan inkluderes individuelt (ved at bruge Bootstraps individuelle js/dist/*.js), eller alle på én gang ved at bruge bootstrap.jseller de minificerede bootstrap.min.js(medtag ikke begge).

Hvis du bruger en bundler (Webpack, Rollup...), kan du bruge /js/dist/*.jsfiler, der er UMD-klare.

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. Bemærk også, at alle plugins afhænger af jQuery (dette betyder, at jQuery skal inkluderes før plugin-filerne). Se vorespackage.json for at se, hvilke versioner af jQuery der understøttes.

Vores dropdowns, popovers og værktøjstip afhænger også af Popper.js .

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

I nogle situationer kan det dog være ønskeligt at deaktivere denne funktionalitet. For at deaktivere dataattributten API skal du fjerne bindingen til alle hændelser på dokumentet med navneafstand data-apisom sådan:

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

Alternativt, for at målrette mod et specifikt plugin, skal du blot inkludere plugin's navn som et navneområde sammen med data-api navneområdet som dette:

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

Begivenheder

Bootstrap leverer tilpassede begivenheder til de fleste plugins' unikke handlinger. Generelt kommer disse i en infinitiv og en perfektum form - hvor infinitiv (eks. show) udløses ved starten af ​​en begivenhed, og dens participiumform (eks. 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().

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

Programmatisk API

Vi mener også, at du skal være i stand til at bruge alle Bootstrap-plugins udelukkende gennem JavaScript API. Alle offentlige API'er er enkeltstående, kædebare metoder og returnerer den indsamling, der blev handlet på.

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

Alle metoder bør acceptere et valgfrit option-objekt, en streng, der er målrettet mod en bestemt metode, eller ingenting (som starter et plugin med standardadfærd):

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

Hvert plugin afslører også sin rå konstruktør på en Constructoregenskab: $.fn.popover.Constructor. Hvis du gerne vil have en bestemt plugin-instans, skal du hente den direkte fra et element: $('[rel="popover"]').data('popover').

Asynkrone funktioner og overgange

Alle programmatiske API-metoder er asynkrone og vender tilbage til kalderen, 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.

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

Derudover vil et metodekald på en overgangskomponent blive ignoreret .

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

Standardindstillinger

Du kan ændre standardindstillingerne for et plugin ved at ændre pluginets Constructor.Defaultobjekt:

$.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to false

Ingen konflikt

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 .noConflicttil 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 ​​hver af Bootstraps jQuery-plugins kan tilgås via VERSIONegenskaben af ​​plugin-konstruktøren. For eksempel til værktøjstip-plugin:

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

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.

Util

Alle Bootstraps JavaScript-filer afhænger af, util.jsog det skal inkluderes sammen med de andre JavaScript-filer. Hvis du bruger det kompilerede (eller minificerede) bootstrap.js, er det ikke nødvendigt at inkludere dette – det er der allerede.

util.jsomfatter hjælpefunktioner og en grundlæggende hjælper til transitionEndbegivenheder samt en CSS-overgangsemulator. Det bruges af de andre plugins til at tjekke for CSS overgangsunderstøttelse og til at fange hængende overgange.