JavaScript

Oživte Bootstrap pomocí našich volitelných pluginů JavaScript postavených na jQuery. Přečtěte si o každém pluginu, našich možnostech datového a programového rozhraní API a dalších.

Individuální nebo sestavené

Pluginy mohou být zahrnuty jednotlivě (pomocí Bootstrap's individual js/dist/*.js), nebo všechny najednou pomocí bootstrap.jsnebo minifikované bootstrap.min.js(nezahrnujte obojí).

Pokud používáte bundler (Webpack, Rollup…), můžete použít /js/dist/*.jssoubory, které jsou připraveny na UMD.

Závislosti

Některé pluginy a CSS komponenty závisí na jiných pluginech. Pokud zahrnete pluginy jednotlivě, nezapomeňte zkontrolovat tyto závislosti v dokumentech. Všimněte si také, že všechny pluginy závisí na jQuery (to znamená, že jQuery musí být zahrnuto před soubory pluginů). Chcete-li zjistit, které verze jQuery jsou podporovány, přečtěte si naše .package.json

Naše rozbalovací nabídky, vyskakovací okna a popisky také závisí na Popper.js .

Atributy dat

Téměř všechny zásuvné moduly Bootstrap lze aktivovat a konfigurovat pouze prostřednictvím HTML s datovými atributy (náš preferovaný způsob používání funkcí JavaScriptu). Ujistěte se, že pro jeden prvek používáte pouze jednu sadu atributů dat (např. nemůžete spustit popisek a modal ze stejného tlačítka.)

V některých situacích však může být žádoucí tuto funkci zakázat. Chcete-li zakázat rozhraní API datových atributů, zrušte vazbu všech událostí v dokumentu s jmenným prostorem data-apitakto:

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

Alternativně, chcete-li cílit na konkrétní plugin, stačí zahrnout název pluginu jako jmenný prostor spolu s jmenným prostorem data-api, jako je tento:

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

Události

Bootstrap poskytuje vlastní události pro většinu jedinečných akcí pluginů. Obecně platí, že jsou ve formě infinitivu a minulého příčestí – kde infinitiv (např. show) je spuštěn na začátku události a jeho minulý tvar participia (např. shown) je spuštěn při dokončení akce.

Všechny infinitivní události poskytují preventDefault()funkčnost. To poskytuje možnost zastavit provádění akce před jejím zahájením. Vrácení false z obsluhy události také automaticky zavolá preventDefault().

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

Programové rozhraní API

Také věříme, že byste měli být schopni používat všechny Bootstrap pluginy čistě přes JavaScript API. Všechna veřejná rozhraní API jsou jediné, zřetězitelné metody a vracejí kolekci, podle které se jedná.

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

Všechny metody by měly přijímat volitelný objekt voleb, řetězec, který cílí na konkrétní metodu, nebo nic (což spouští plugin s výchozím chováním):

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

Každý plugin také odhaluje svůj raw konstruktor na Constructorvlastnosti: $.fn.popover.Constructor. Pokud chcete získat konkrétní instanci pluginu, načtěte ji přímo z prvku: $('[rel="popover"]').data('popover').

Asynchronní funkce a přechody

Všechny metody programového rozhraní API jsou asynchronní a vrátí se volajícímu po zahájení přechodu, ale před jeho ukončením .

Chcete-li po dokončení přechodu provést akci, můžete si poslechnout odpovídající událost.

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

Kromě toho bude ignorováno volání metody na přechodové komponentě .

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

Výchozí nastavení

Výchozí nastavení pluginu můžete změnit úpravou objektu pluginu Constructor.Default:

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

Žádný konflikt

Někdy je nutné použít Bootstrap pluginy s jinými UI frameworky. Za těchto okolností může občas dojít ke kolizím oboru názvů. Pokud k tomu dojde, můžete zavolat .noConflictna plugin, jehož hodnotu chcete vrátit.

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

Čísla verzí

Verze každého z pluginů jQuery Bootstrapu jsou přístupné prostřednictvím VERSIONvlastnosti konstruktoru pluginu. Například pro plugin tooltip:

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

Při deaktivaci JavaScriptu nedochází k žádným zvláštním záložním řešením

Pluginy Bootstrapu neustupují nijak zvlášť elegantně, když je zakázán JavaScript. Pokud vám v tomto případě záleží na uživatelském dojmu, použijte <noscript>k vysvětlení situace (a jak znovu povolit JavaScript) svým uživatelům a/nebo přidejte své vlastní záložní.

Util

Všechny soubory JavaScriptu Bootstrapu závisí na util.jsa musí být zahrnuty spolu s ostatními soubory JavaScript. Pokud používáte zkompilovaný (nebo minifikovaný) bootstrap.js, není potřeba toto zahrnout – už to tam je.

util.jsobsahuje pomocné funkce a základního pomocníka pro transitionEndudálosti a také emulátor přechodu CSS. Používají ho ostatní pluginy ke kontrole podpory přechodů CSS a zachycení visících přechodů.