JavaScript

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.

Použití Bootstrap jako modulu

Poskytujeme verzi Bootstrapu vytvořenou jako ESM( bootstrap.esm.jsa bootstrap.esm.min.js), která vám umožňuje používat Bootstrap jako modul ve vašem prohlížeči, pokud to vaše cílené prohlížeče podporují .

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

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.

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

Stále chcete používat jQuery? Je to možné!

Bootstrap 5 je navržen pro použití bez jQuery, ale stále je možné používat naše komponenty s jQuery. Pokud Bootstrap detekuje jQueryv windowobjektu , přidá všechny naše komponenty do systému zásuvných modulů jQuery; to znamená, že budete moci $('[data-bs-toggle="tooltip"]').tooltip()povolit popisky. Totéž platí pro naše další komponenty.

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

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

var myModal = document.getElementById('myModal')

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

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

Programové rozhraní API

Všechny konstruktory přijímají volitelný objekt voleb nebo nic (což spouští plugin s jeho výchozím chováním):

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

Pokud chcete získat konkrétní instanci pluginu, každý plugin odhaluje getInstancemetodu. Chcete-li jej načíst přímo z prvku, postupujte takto: bootstrap.Popover.getInstance(myPopoverEl).

CSS selektory v konstruktorech

Můžete také použít selektor CSS jako první argument místo prvku DOM k inicializaci pluginu. V současné době je prvek pro plugin nalezen querySelectormetodou, protože naše pluginy podporují pouze jeden prvek.

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

Asynchronní funkce a přechody

Všechny metody programového rozhraní API jsou asynchronní a vracejí se k volajícímu, jakmile je přechod zahájen, 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.

var myCollapseEl = document.getElementById('myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

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

var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', function (event) {
  carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
carousel.to('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:

// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false

Žádný konflikt (pouze pokud používáte jQuery)

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 modulu Bootstrap je přístupná prostřednictvím VERSIONvlastnosti konstruktoru pluginu. Například pro plugin tooltip:

bootstrap.Tooltip.VERSION // => "5.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í.

Sanitizer

Popisky a vyskakovací okna používají náš vestavěný dezinfekční prostředek k dezinfekci možností, které přijímají HTML.

Výchozí allowListhodnota je následující:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultAllowlist = {
  // 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: []
}

Pokud chcete k tomuto výchozímu nastavení přidat nové hodnoty allowList, můžete provést následující:

var myDefaultAllowList = bootstrap.Tooltip.Default.allowList

// To allow table elements
myDefaultAllowList.table = []

// To allow td elements and data-bs-option attributes on td elements
myDefaultAllowList.td = ['data-bs-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-]+/
myDefaultAllowList['*'].push(myCustomRegex)

Pokud chcete obejít náš dezinfekční prostředek, protože dáváte přednost použití vyhrazené knihovny, například DOMPurify , měli byste udělat následující:

var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})