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.
Plugins kan inkluderas individuellt (med Bootstraps individuella *.js
filer), eller alla på en gång genom att använda bootstrap.js
eller de minifierade bootstrap.min.js
(inkluderar inte båda).
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 .
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-api
så här:
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:
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()
.
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.
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):
Varje plugin exponerar också sin råkonstruktör på en Constructor
egenskap: $.fn.popover.Constructor
. Om du vill skaffa en viss plugin-instans, hämta den direkt från ett element: $('[rel="popover"]').data('popover')
.
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.
Dessutom kommer ett metodanrop på en övergångskomponent att ignoreras .
Du kan ändra standardinställningarna för en plugin genom att ändra pluginens Constructor.Default
objekt:
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 .noConflict
plugin-programmet du vill återställa värdet på.
Versionen av var och en av Bootstraps jQuery-plugin-program kan nås via VERSION
egendomen hos plugin-konstruktören. Till exempel för verktygstipsplugin:
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.
Tredjepartsbibliotek
Bootstrap stöder inte officiellt JavaScript-bibliotek från tredje part som Prototype eller jQuery UI. Trots .noConflict
och namnavgränsade händelser kan det finnas kompatibilitetsproblem som du måste åtgärda på egen hand.
Alla Bootstraps JavaScript-filer är beroende av util.js
och det måste inkluderas tillsammans med de andra JavaScript-filerna. Om du använder det kompilerade (eller minifierade) bootstrap.js
behöver du inte inkludera detta – det finns redan där.
util.js
innehåller verktygsfunktioner och en grundläggande hjälpare för transitionEnd
evenemang 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.