JavaSkript

Yndividueel of gearstald

Ynstekkers kinne yndividueel opnommen wurde (mei it yndividu fan Bootstrap js/dist/*.js), of allegear tagelyk mei bootstrap.jsof de minifisearre bootstrap.min.js(befette beide net).

As jo ​​​​in bondel brûke (Webpack, Rollup ...), kinne jo /js/dist/*.jsbestannen brûke dy't UMD klear binne.

Mei help fan Bootstrap as module

Wy leverje in ferzje fan Bootstrap boud as ESM( bootstrap.esm.jsen bootstrap.esm.min.js) wêrmei jo Bootstrap kinne brûke as module yn jo browser, as jo rjochte browsers it stypje .

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

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

Ofhinklikens

Guon plugins en CSS-komponinten binne ôfhinklik fan oare plugins. As jo ​​​​plugins yndividueel opnimme, soargje derfoar dat jo dizze ôfhinklikens kontrolearje yn 'e dokuminten.

Us dropdowns, popovers en tooltips binne ek ôfhinklik fan Popper .

Wolle jo jQuery noch brûke? It is mooglik!

Bootstrap 5 is ûntworpen om te brûken sûnder jQuery, mar it is noch altyd mooglik om ús komponinten te brûken mei jQuery. As Bootstrap detektearret jQueryyn it windowobjekt , sil it al ús komponinten tafoegje yn it plugin-systeem fan jQuery; dit betsjut dat jo kinne dwaan $('[data-bs-toggle="tooltip"]').tooltip()om tooltips yn te skeakeljen. Itselde jildt foar ús oare komponinten.

Data attributen

Hast alle Bootstrap-plugins kinne wurde ynskeakele en konfigureare fia HTML allinich mei gegevensattributen (ús foarkommende manier om JavaScript-funksjonaliteit te brûken). Wês der wis fan dat jo mar ien set gegevensattributen brûke op ien elemint (jo kinne bygelyks gjin tooltip en modaal fan deselde knop oansette.)

Eveneminten

Bootstrap leveret oanpaste eveneminten foar de unike aksjes fan de measte plugins. Yn 't algemien komme dizze yn in ynfinityf en doedestiidsfoarm - wêrby't de ynfinityf (bgl. show) oan it begjin fan in barren ynskeakele wurdt, en syn doetiidsfoarm (bgl. shown) wurdt aktivearre by it foltôgjen fan in aksje.

Alle infinitive eveneminten jouwe preventDefault()funksjonaliteit. Dit jout de mooglikheid om de útfiering fan in aksje te stopjen foardat it begjint. It werombringen fan falsk fan in evenemintehanneler sil ek automatysk oproppe 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...
})

Programmatyske API

Alle konstruktors akseptearje in opsjoneel opsjeobjekt of neat (wat in plugin inisjearret mei syn standertgedrach):

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

As jo ​​​​in bepaalde plugin-eksimplaar wolle krije, sil elke plugin in getInstancemetoade bleatstelle. Om it direkt fan in elemint op te heljen, dwaan dit: bootstrap.Popover.getInstance(myPopoverEl).

CSS-selektors yn konstruktors

Jo kinne ek in CSS-selektor brûke as it earste argumint ynstee fan in DOM-elemint om it plugin te inisjalisearjen. Op it stuit wurdt it elemint foar de plugin fûn troch de querySelectormetoade, om't ús plugins allinich ien elemint stypje.

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

Asynchrone funksjes en transysjes

Alle programmatyske API-metoaden binne asynchrone en geane werom nei de beller as de oergong is begon, mar foardat it einiget .

Om in aksje út te fieren as de oergong foltôge is, kinne jo harkje nei it korrespondearjende evenemint.

var myCollapseEl = document.getElementById('myCollapse')

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

Derneist sil in metoadeoprop op in oergongskomponint wurde negearre .

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

Standertynstellings

Jo kinne de standertynstellingen foar in plugin feroarje troch it Constructor.Defaultobjekt fan 'e plugin te feroarjen:

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

Gjin konflikt (allinich as jo jQuery brûke)

Soms is it nedich om Bootstrap-plugins te brûken mei oare UI-kaders. Yn dizze omstannichheden kinne nammeromte botsingen soms foarkomme. As dit bart, kinne jo .noConflictde plugin oanroppe wêrfan jo de wearde weromsette wolle.

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

Ferzje nûmers

De ferzje fan elk fan Bootstrap's plugins kin tagonklik wurde fia it VERSIONeigendom fan 'e plugin's constructor. Bygelyks foar de tooltip-plugin:

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

Gjin spesjale fallbacks as JavaScript is útskeakele

De plugins fan Bootstrap falle net bysûnder sierlik werom as JavaScript is útskeakele. As jo ​​yn dit gefal soarch hawwe oer de brûkersûnderfining, brûk <noscript>dan om de situaasje (en hoe't jo JavaScript opnij ynskeakelje kinne) oan jo brûkers út te lizzen, en/of jo eigen oanpaste fallbacks ta te foegjen.

Sanitizer

Tooltips en Popovers brûke ús ynboude sanitizer om opsjes te sanearjen dy't HTML akseptearje.

De standertwearde allowListis de folgjende:

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

As jo ​​nije wearden taheakje wolle oan dizze standert allowListkinne jo it folgjende dwaan:

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)

As jo ​​​​ús sanitizer wolle omgean om't jo leaver in tawijd bibleteek brûke, bygelyks DOMPurify , moatte jo it folgjende dwaan:

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