JavaScript

Singula vel Composuit

Plugines singillatim includi possunt (singulis Bootstrap utens js/dist/*.js), vel simul utens bootstrap.jsvel minutum bootstrap.min.js(utrumque non includit).

Si fasciculo uteris (Webpack, Rollup…), /js/dist/*.jsfasciculis uti potes quae parata sunt UMD.

Per Bootstrap ut moduli

Praebere versionem Bootstrap aedificatam ESM( bootstrap.esm.jset bootstrap.esm.min.js) qua te permittit uti Bootstrap pro modulo in navigatro tuo, si navigatores tui iaculis sustinent .

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

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

Dependentiae

Quaedam plugins et CSS elementa ab aliis plugins pendent. Si singula plugins includas, fac ut has dependentias in soUicitudo reprimas.

Nostra stillicidia, popoverae et instrumenta etiam ab Popper pendent .

Vis uti jQuery? Suus 'possible!

Bootstrap 5 sine jQuery adhibetur, sed adhuc potest nostris partibus cum jQuery uti. Si Bootstrap jQueryin windowobiecto deprehenderit , omnia nostra membra in jQuery plugin systemate adde; hoc modo facere poteris ut instrumenta $('[data-bs-toggle="tooltip"]').tooltip(). Idem valet de aliis nostris componentibus.

Data attributa

Fere omnia plugins Bootstrap per HTML solum cum attributis data et configurari possunt (praelatus modus utendi JavaScript functionality). Vide tantum ut unum punctum attributorum notitiarum in unico elemento (exempli gratia, instrumenti instrumenti et modalis ex eadem conjunctione felis non potes).

Events

Mores eventus Bootstrap praebet pro pluribus plugins' singularibus actionibus. Fere hae veniunt in forma participii infinitivi et praeteriti - ubi infinitivus (ex. show) utitur in initio eventus, et forma participii praeteriti (ex. shown) utitur ad complementum actionis.

Omnes infinitivi eventus preventDefault()functionem praebent. Hoc praebet facultatem ad executionem actionis antequam incipiat prohibere. Falsus reversus ab eventu tracto etiam automatice vocabit 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...
})

Programma API

Omnes conditores accipiunt optiones libitum obiectum vel nihil (quod plugin cum suis default moribus incipit);

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

Si peculiarem instantiam plugin obtinere velis, unumquodque plugin getInstancemethodum exponit. Ut ab elemento directe capias, hoc fac: bootstrap.Popover.getInstance(myPopoverEl).

CSS selectors in constructors

Potes uti etiam electrix CSS ut prima argumenti loco pro elementi dom ad plugin initialize. Nunc elementum plugin pro ratione invenitur querySelectorcum nostri volutpat elementum unicum sustinent.

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

Asynchronous munera et transitiones

Omnes programma API methodi asynchroni sunt et ad salutatorem redire semel incepit sed antequam finitur transitus .

Ad actionem faciendam semel transitus perfectus est, eventus respondentem audire potes.

var myCollapseEl = document.getElementById('myCollapse')

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

Adde methodus vocabuli componentis transitionis ignorabitur .

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 !!

Default occasus

Default occasus mutare potes pro plugin Constructor.Defaultobiecto obiecto modificato:

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

Nulla conflictio (si modo uteris jQuery)

Aliquando necesse est plugins Bootstrap uti cum aliis UI compagibus. His in adiunctis, spatii spatii nomina interdum fieri possunt. Si hoc accidit, .noConflictplugin vocare voles ad valorem reverti.

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

Numeri versionis

Uniuscuiusque versionis plugins Bootstrap accedere potest per VERSIONproprietatem fabricatoris plugin. Exempli gratia, pro tooltip plugin:

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

Nullus specialis fallbacks cum JavaScript est disabled

Plugini Bootstrap non recedunt praecipue lepide cum JavaScript debilis est. Si experientiam usoris in hoc casu curas, utere <noscript>ad explicandam condicionem (et quomodo re-enable JavaScript) ad usores tuos, et/vel lapsus consuetudinem tuam adde.

Sanitizer

Instrumenta et Popoveri nostris constructis in sanitizer utuntur ad optiones sanitizandas quae HTML recipiunt.

De valore default allowListsequenti est:

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

Si vis novas valores ad hunc defaltam allowListaddere, sequentia facere potes:

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)

Si vis sanitizer praeterire quod mavis bibliotheca dedicata uti, exempli gratia DOMPurify , sequentia debes facere:

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