in English

JavaScript

Afferte Bootstrap ad vitam cum JavaScript plugins nostra libitum. Disce de singulis plugin, notitias nostras et programma API optiones, et plura.

In hac pagina

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, Parcel, Vite…), /js/dist/*.jsfasciculis uti potes quae parata sunt UMD.

Usus cum JavaScript frameworks

Dum Bootstrap CSS adhiberi potest cum quavis compage, JavaScript Bootstrap plene compatitur cum JavaScript compagibus sicut React, Vue, et Angularis, quae plenam notitiam de Domo assumunt. Ambo Bootstrap et compage idem elementum dom mutare conari possunt, inde in cimices sicut guttae quae in positione "aperto" infixae sunt.

Melior alternatio eorum qui hoc genus compagum utentes est, utendum est involucro compage speciali loco JavaScript de Bootstrap. Hic sunt aliquae optiones populares:

React: React Bootstrap
Vue: BootstrapVue (currently only supports Vue 2 and Bootstrap 4)
Angularis: ng-bootstrap

Per Bootstrap ut moduli

Te ipsum proba! Download source code and working demo for using Bootstrap as an ES module from the twbs/exempla repository . Exemplum etiam aperire potes in StackBlitz .

Praebere versionem Bootstrap aedificatam ESM( bootstrap.esm.jset bootstrap.esm.min.js) quae sinit te uti Bootstrap pro modulo in navigatro, 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>

Comparatus ad JS bundlers, usus ESM in navigatro te requirit ut iter plenam ac filename loco moduli nomine utaris. Plura de JS modulis in navigatro legas. 'bootstrap.esm.min.js'Hinc loco utimur 'bootstrap'supra. Sed haec adhuc implicata est per dependentiam nostram Popper, quae popperum importat in JavaScript sicut sic:

import * as Popper from "@popperjs/core"

Si hoc probas ut-est, errorem videbis in consolatorio sicut in his:

Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../".

Ad hoc figere, uti potes importmapad nomina modulorum arbitraria resolvenda ad semitas perficiendas. Si iaculis navigatores tui non sustinent importmap, opust ut project es modulis-shims . Ecce quomodo operatur pro Bootstrap et Popper:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <title>Hello, modularity!</title>
  </head>
  <body>
    <h1>Hello, modularity!</h1>
    <button id="popoverButton" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>

    <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script>
    <script type="importmap">
    {
      "imports": {
        "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
        "bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.min.js"
      }
    }
    </script>
    <script type="module">
      import * as bootstrap from 'bootstrap'

      new bootstrap.Popover(document.getElementById('popoverButton'))
    </script>
  </body>
</html>

Dependentiae

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

Etiam guttae, popoverae et instrumenta nostra a Popper pendent .

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

Cum optiones transeantur per data attributa vel JavaScript, potes appendere nomen optionis data-bs-, ut in data-bs-animation="{value}". Fac mutare casus genus optionis nominis ab " camelCase " ad " kebab-casum " cum transeundo optiones per data attributa. Exempli gratia data-bs-custom-class="beautifier"loco data-bs-customClass="beautifier".

Sicut de Bootstrap 5.2.0, omnia membra experimentalem datam reservatam sustinent data-bs-configquae figuram simplicem componentem sicut chorda JSON domum habere potest. Cum elementum habet data-bs-config='{"delay":0, "title":123}'et data-bs-title="456"attributa, valor finalis titleerit 456et attributa separata data valores supra datos vincent data-bs-config. Praeterea exsistentes notitiae attributae possunt domum JSON valores similes data-bs-delay='{"show":0,"hide":150}'.

Selectors

Utimur indigenis querySelectoret rationibus ad interrogationes dom elementa ad rationes perficiendas, selectoribus validisquerySelectorAll uti debetis . Si selectis specialibus placet , cave eos effugere.collapse:Example

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

const myModal = document.querySelector('#myModal')

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

Programma API

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

const myModalEl = document.querySelector('#myModal')

const modal = new bootstrap.Modal(myModalEl) // initialized with defaults

const configObject = { keyboard: false }
const modal1 = new bootstrap.Modal(myModalEl, configObject) // initialized with no keyboard

Si peculiarem instantiam plugin obtinere velis, unumquodque plugin getInstancemethodum exponit. Exempli gratia, instantiam directe recuperare ab elemento;

bootstrap.Popover.getInstance(myPopoverEl)

Haec methodus reddet nullsi instantiae non initiatur super elementum petitum.

Vel, getOrCreateInstanceadhiberi potest ut instantia cum elementum dom coniungitur, vel novum efficiat in casu non initialized.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

In casu instantiae initialis non factae, potest accipere et uti obiecto configuratione ad libitum ut alterum argumentum.

CSS selectors in constructors

Praeter methodos getInstanceac getOrCreateInstancemodos, omnes plugin conditores elementum domnum vel validum CSS electorem ut primum argumentum accipere possunt. Plugin elementa cum methodo reperiuntur querySelectorquoniam nostri plugins unicum elementum sustinent.

const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
const offcanvas = bootstrap.Offcanvas.getInstance('#myOffcanvas')
const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')

Asynchronous munera et transitiones

Omnes programma API methodi asynchroni sunt et ad RECENS statim transitus incepit, sed antequam finitur . Ad actionem faciendam semel transitus perfectus est, congruentem eventum audire potes.

const myCollapseEl = document.querySelector('#myCollapse')

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

Methodus praeterea in transitus transeuntis ignorabitur .

const myCarouselEl = document.querySelector('#myCarousel')
const carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', 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 !!

`dispose`methodo

Dum recte utendi disposemethodo statim post hide()videatur , ad inhonestos eventus deducet . Hic est exemplum problema uti:

const myModal = document.querySelector('#myModal')
myModal.hide() // it is asynchronous

myModal.addEventListener('shown.bs.hidden', event => {
  myModal.dispose()
})

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

Methodi et possessiones

Omnis Bootstrap plugin excludit methodos sequentes et proprietates statices.

Methodus	Descriptio
`dispose`	Modalis elementum destruit. (Recondita removet data in dom elementum)
`getInstance`	Ratio static, quae te permittit ut instantia modalis cum elemento DOM coniungitur.
`getOrCreateInstance`	Statica methodus, quae te permittit ut instantia modalis cum elemento DOM coniungitur, vel novum crea in casu non initialized erat.

Statica proprietas	Descriptio
`NAME`	Nomen plugin refert. (Exemplum: `bootstrap.Tooltip.NAME`)
`VERSION`	Uniuscuiusque versio plugins Bootstrap accessed potest per `VERSION`proprietatem scriptoris plugin (Exempli: `bootstrap.Tooltip.VERSION`)

Sanitizer

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

De valore default allowListsequenti est:

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

const 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
const myCustomRegex = /^data-my-app-[\w-]+/
myDefaultAllowList['*'].push(myCustomRegex)

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

const yourTooltipEl = document.querySelector('#yourTooltip')
const tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn(content) {
    return DOMPurify.sanitize(content)
  }
})

Optionally using jQuery

Non opus est jQuery in Bootstrap 5 , sed adhuc potest nostris partibus uti cum jQuery. Si Bootstrap jQueryin windowobiecto deprehenderit, omnia nostra membra in systemate plugin jQuery adde. Hoc tibi permittit ut sequentia facias;

$('[data-bs-toggle="tooltip"]').tooltip() // to enable tooltips, with default configuration

$('[data-bs-toggle="tooltip"]').tooltip({ boundary: 'clippingParents', customClass: 'myClass' }) // to initialize tooltips with given configuration

$('#myTooltip').tooltip('show') // to trigger `show` method

Idem valet de aliis nostris componentibus.

Non conflictus

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.

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

Bootstrap tertio-pars JavaScript bibliothecas publice sustinet sicut Prototypum vel jQuery UI. Quamvis .noConflictet nomina spatiis interiectis, compatibilitas problemata exstare potest quam in tuo proprio figere debes.

jQuery events

Bootstrap deprehendet jQuery si jQueryin windowobiecto adsit et nulla data-bs-no-jqueryattributa apposita est <body>. Si jQuery invenitur, Bootstrap eventa emittet agens cum systemate eveni Query. Si igitur eventus Bootstrap audire vis , habebis modos jQuery ( .on, .one) loco addEventListener.

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

Disabled JavaScript

Bootstrap's plugins speciales casus nullum habent 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.