JavaScript

Väck Bootstrap till liv med våra valfria JavaScript-plugins byggda på jQuery. Lär dig mer om varje plugin, våra data- och programmatiska API-alternativ och mer.

Individuell eller sammanställd

Plugins kan inkluderas individuellt (med Bootstraps individuella js/dist/*.js), eller alla på en gång genom att använda bootstrap.jseller minifierade bootstrap.min.js(inkluderar inte båda).

Om du använder en bundler (Webpack, Rollup...) kan du använda /js/dist/*.jsfiler som är UMD-klara.

Beroenden

Vissa plugins och CSS-komponenter är beroende av andra plugins. Om du inkluderar insticksprogram individuellt, se till att kontrollera dessa beroenden i dokumenten. Observera också att alla plugins är beroende av jQuery (det betyder att jQuery måste inkluderas före plugin-filerna). Konsultera vårpackage.json för att se vilka versioner av jQuery som stöds.

Våra rullgardinsmenyer, popovers och verktygstips är också beroende av Popper.js .

Dataattribut

Nästan alla Bootstrap-plugins kan aktiveras och konfigureras enbart genom HTML med dataattribut (vårt föredragna sätt att använda JavaScript-funktionalitet). Se till att bara använda en uppsättning dataattribut på ett enda element (t.ex. kan du inte utlösa ett verktygstips och modal från samma knapp.)

I vissa situationer kan det dock vara önskvärt att inaktivera denna funktionalitet. För att inaktivera dataattributet API, koppla bort alla händelser i dokumentet med namnintervall med data-apiså här:

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

Alternativt, för att rikta in sig på ett specifikt plugin, inkludera bara pluginens namn som ett namnområde tillsammans med data-api-namnområdet så här:

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

evenemang

Bootstrap tillhandahåller anpassade händelser för de flesta plugins unika åtgärder. Generellt kommer dessa i en infinitiv och participform - där infinitiv (ex. show) utlöses i början av en händelse, och dess participform (ex. shown) utlöses vid fullbordandet av en handling.

Alla infinitiva händelser ger preventDefault()funktionalitet. Detta ger möjlighet att stoppa utförandet av en åtgärd innan den startar. Att returnera falskt från en händelsehanterare kommer också att anropas automatiskt preventDefault().

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

Programmatisk API

Vi tror också att du bör kunna använda alla Bootstrap-plugins enbart genom JavaScript API. Alla offentliga API:er är enkla, kedjabara metoder och returnerar den samling som åtgärdats.

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

Alla metoder bör acceptera ett valfritt alternativobjekt, en sträng som riktar sig mot en viss metod, eller ingenting (som initierar en plugin med standardbeteende):

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

Varje plugin exponerar också sin råkonstruktör på en Constructoregenskap: $.fn.popover.Constructor. Om du vill skaffa en viss plugin-instans, hämta den direkt från ett element: $('[rel="popover"]').data('popover').

Asynkrona funktioner och övergångar

Alla programmatiska API-metoder är asynkrona och återgår till den som ringer när övergången har startat men innan den slutar .

För att utföra en åtgärd när övergången är klar kan du lyssna på motsvarande händelse.

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

Dessutom kommer ett metodanrop på en övergångskomponent att ignoreras .

$('#myCarousel').on('slid.bs.carousel', function (event) {
  $('#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 !!

Standardinställningar

Du kan ändra standardinställningarna för en plugin genom att ändra pluginens Constructor.Defaultobjekt:

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

Ingen konflikt

Ibland är det nödvändigt att använda Bootstrap-plugins med andra UI-ramverk. Under dessa omständigheter kan namnutrymmeskollisioner ibland inträffa. Om detta händer kan du anropa .noConflictplugin-programmet du vill återställa värdet på.

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

Versionsnummer

Versionen av var och en av Bootstraps jQuery-plugin-program kan nås via VERSIONegendomen hos plugin-konstruktören. Till exempel för verktygstipsplugin:

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

Inga speciella fallbacks när JavaScript är inaktiverat

Bootstraps plugins faller inte tillbaka särskilt graciöst när JavaScript är inaktiverat. Om du bryr dig om användarupplevelsen i det här fallet, använd <noscript>för att förklara situationen (och hur du återaktiverar JavaScript) för dina användare och/eller lägg till dina egna anpassade reservalternativ.

Util

Alla Bootstraps JavaScript-filer är beroende av util.jsoch det måste inkluderas tillsammans med de andra JavaScript-filerna. Om du använder det kompilerade (eller minifierade) bootstrap.jsbehöver du inte inkludera detta – det finns redan där.

util.jsinnehåller verktygsfunktioner och en grundläggande hjälpare för transitionEndevenemang samt en CSS-övergångsemulator. Det används av andra plugins för att söka efter CSS-övergångsstöd och för att fånga hängande övergångar.

Saneringsmedel

Tooltips och Popovers använder vår inbyggda desinficering för att sanera alternativ som accepterar HTML.

Standardvärdet whiteListär följande:

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', 'srcset', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Om du vill lägga till nya värden till denna standard whiteListkan du göra följande:

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)

Om du vill kringgå vår desinficering för att du föredrar att använda ett dedikerat bibliotek, till exempel DOMPurify , bör du göra följande:

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