JavaScript

Individuálne alebo zostavené

Pluginy môžu byť zahrnuté jednotlivo (pomocou Bootstrap's individual js/dist/*.js), alebo všetky naraz pomocou bootstrap.jsalebo minifikované bootstrap.min.js(nezahŕňajú oboje).

Ak používate balík (Webpack, Rollup…), môžete použiť /js/dist/*.jssúbory, ktoré sú pripravené na UMD.

Použitie Bootstrapu ako modulu

Poskytujeme verziu Bootstrap postavenú ako ESM( bootstrap.esm.jsa bootstrap.esm.min.js), ktorá vám umožňuje používať Bootstrap ako modul vo vašom prehliadači, ak to vaše cieľové prehliadač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

Niektoré doplnky a komponenty CSS závisia od iných doplnkov. Ak zahrniete doplnky jednotlivo, nezabudnite skontrolovať tieto závislosti v dokumentoch.

Od Poppera závisia aj naše rozbaľovacie ponuky, kontextové okná a popisy .

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

Bootstrap 5 je navrhnutý na použitie bez jQuery, ale stále je možné používať naše komponenty s jQuery. Ak Bootstrap zistí jQueryv windowobjekte , pridá všetky naše komponenty do systému zásuvných modulov jQuery; to znamená, že budete môcť $('[data-bs-toggle="tooltip"]').tooltip()povoliť popisy. To isté platí pre naše ostatné komponenty.

Atribúty údajov

Takmer všetky zásuvné moduly Bootstrap je možné aktivovať a konfigurovať iba prostredníctvom HTML s dátovými atribútmi (náš preferovaný spôsob používania funkcií JavaScriptu). Uistite sa, že na jednom prvku používate iba jednu množinu atribútov údajov (napr. nemôžete spustiť popis a modal z toho istého tlačidla.)

Diania

Bootstrap poskytuje vlastné udalosti pre väčšinu jedinečných akcií doplnkov. Vo všeobecnosti sú vo forme infinitívu a minulého príčastia – kde infinitív (napr. show) sa spúšťa na začiatku udalosti a jeho minulá forma príčastia (napr. shown) sa spúšťa pri dokončení akcie.

Všetky nekonečné udalosti poskytujú preventDefault()funkčnosť. To poskytuje možnosť zastaviť vykonávanie akcie pred jej spustením. Vrátenie false z obsluhy udalosti tiež 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é rozhranie API

Všetky konštruktory akceptujú voliteľný objekt volieb alebo nič (čo iniciuje doplnok s jeho predvoleným správaní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

Ak chcete získať konkrétnu inštanciu doplnku, každý doplnok odhaľuje getInstancemetódu. Ak ho chcete získať priamo z prvku, postupujte takto: bootstrap.Popover.getInstance(myPopoverEl).

CSS selektory v konštruktoroch

Môžete tiež použiť selektor CSS ako prvý argument namiesto prvku DOM na inicializáciu doplnku. V súčasnosti sa prvok pre doplnok nachádza querySelectormetódou, pretože naše doplnky podporujú iba jeden prvok.

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

Asynchrónne funkcie a prechody

Všetky metódy programového rozhrania API sú asynchrónne a vrátia sa volajúcemu po spustení prechodu, ale pred jeho ukončením .

Ak chcete po dokončení prechodu vykonať akciu, môžete si vypočuť príslušnú udalosť.

var myCollapseEl = document.getElementById('myCollapse')

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

Okrem toho bude ignorované volanie metódy na prechodový 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 !!

Predvolené nastavenia

Predvolené nastavenia doplnku môžete zmeniť úpravou Constructor.Defaultobjektu doplnku:

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

Žiadny konflikt (iba ak používate jQuery)

Niekedy je potrebné použiť Bootstrap pluginy s inými UI frameworkami. Za týchto okolností môže občas dôjsť ku kolíziám menného priestoru. Ak sa tak stane, môžete zavolať .noConflictna doplnok, ktorého hodnotu chcete vrátiť.

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

Čísla verzií

Verzia každého z doplnkov Bootstrap je prístupná prostredníctvom VERSIONvlastnosti konštruktora doplnku. Napríklad pre doplnok tooltip:

bootstrap.Tooltip.VERSION // => "5.0.2"

Pri zakázanom JavaScripte žiadne špeciálne záložné riešenia

Doplnky Bootstrapu neklesajú obzvlášť elegantne, keď je JavaScript zakázaný. Ak vám v tomto prípade záleží na používateľskej skúsenosti, použite <noscript>na vysvetlenie situácie (a ako znovu povoliť JavaScript) svojim používateľom a/alebo pridajte svoje vlastné záložné.

Dezinfekčný prostriedok

Popisy a kontextové okná používajú náš vstavaný dezinfekčný prostriedok na dezinfekciu možností, ktoré akceptujú HTML.

Predvolená allowListhodnota je nasledovná:

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: []
}

Ak chcete k tejto predvolenej hodnote pridať nové hodnoty allowList, môžete urobiť nasledovné:

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)

Ak chcete obísť náš dezinfekčný prostriedok, pretože uprednostňujete používanie špeciálnej knižnice, napríklad DOMPurify , mali by ste urobiť nasledovné:

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