JavaSkript

Bring Bootstrap ta libben mei ús opsjonele JavaScript-plugins. Learje oer elke plugin, ús gegevens en programmatyske API-opsjes, en mear.

Op dizze side

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, Parcel, Vite ...), kinne jo /js/dist/*.jsbestannen brûke dy't UMD klear binne.

Gebrûk mei JavaScript-frames

Wylst de Bootstrap CSS kin wurde brûkt mei elk ramt, is de Bootstrap JavaScript net folslein kompatibel mei JavaScript-ramten lykas React, Vue, en Angular dy't folsleine kennis fan 'e DOM oannimme. Sawol Bootstrap as it ramt kinne besykje itselde DOM-elemint te mutearjen, wat resulteart yn bugs lykas dropdowns dy't yn 'e "iepen" posysje sitte.

In better alternatyf foar dyjingen dy't dit type kaders brûke, is in ramtspesifyk pakket te brûken ynstee fan it Bootstrap JavaScript. Hjir binne guon fan 'e populêrste opsjes:

Reagearje: Reagearje Bootstrap
Vue: BootstrapVue (op it stuit stipet allinich Vue 2 en Bootstrap 4)
Hoekich: ng-bootstrap

Mei help fan Bootstrap as module

Besykje it sels! Download de boarnekoade en wurkdemo foar it brûken fan Bootstrap as in ES-module fan it twbs / foarbylden repository . Jo kinne it foarbyld ek iepenje yn StackBlitz .

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 'e 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>

Yn ferliking mei JS-bundlers fereasket it brûken fan ESM yn 'e browser dat jo it folsleine paad en de triemnamme brûke ynstee fan de modulenamme. Lês mear oer JS-modules yn 'e browser. Dêrom brûke wy 'bootstrap.esm.min.js'ynstee fan 'bootstrap'boppesteande. Dit wurdt lykwols fierder komplisearre troch ús Popper-ôfhinklikens, dy't Popper ymportearret yn ús JavaScript sa:

import * as Popper from "@popperjs/core"

As jo dit as-is besykje, sille jo in flater sjen yn 'e konsole lykas de folgjende:

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

Om dit te reparearjen, kinne jo in importmapbrûke om de willekeurige modulenammen op te lossen om paden te foltôgjen. As jo rjochte browsers net stypje importmap, moatte jo it es-module-shims- projekt brûke. Hjir is hoe't it wurket foar Bootstrap en 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-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" 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>

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 .

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

As opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript, kinne jo in opsjenamme tafoegje oan data-bs-, lykas yn data-bs-animation="{value}". Soargje derfoar dat jo it gefaltype fan 'e opsjenamme feroarje fan " camelCase " nei " kebab-case " as jo de opsjes trochjaan fia gegevensattributen. Brûk bygelyks data-bs-custom-class="beautifier"ynstee fan data-bs-customClass="beautifier".

Fanôf Bootstrap 5.2.0 stypje alle komponinten in eksperiminteel reservearre data-attribút data-bs-configdat ienfâldige komponintkonfiguraasje as in JSON-string kin herbergje. As in elemint hat data-bs-config='{"delay":0, "title":123}'en data-bs-title="456"attributen, de definitive titlewearde sil wêze 456en de aparte gegevens attributen sille oerskriuwe wearden jûn op data-bs-config. Derneist kinne besteande gegevensattributen JSON-wearden lykas data-bs-delay='{"show":0,"hide":150}'.

Selektors

Wy brûke de native querySelectoren querySelectorAllmetoaden om DOM-eleminten te freegjen foar prestaasjesredenen, dus jo moatte jildige selectors brûke . As jo spesjale selectors brûke lykas collapse:Example, wês dan wis dat jo se ûntkomme.

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

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

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

Programmatyske API

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

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

As jo in bepaalde plugin-eksimplaar wolle krije, sil elke plugin in getInstancemetoade bleatstelle. Bygelyks om in eksimplaar direkt fan in elemint op te heljen:

bootstrap.Popover.getInstance(myPopoverEl)

Dizze metoade sil weromkomme nullas in eksimplaar net is inisjearre oer it frege elemint.

As alternatyf, getOrCreateInstancekin brûkt wurde om de eksimplaar te krijen dy't assosjeare is mei in DOM-elemint, of meitsje in nij foar it gefal dat it net inisjalisearre is.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

As in eksimplaar net inisjalisearre is, kin it in opsjoneel konfiguraasjeobjekt as twadde argumint akseptearje en brûke.

CSS-selektors yn konstruktors

Neist de getInstanceen getOrCreateInstancemetoaden kinne alle plugin constructors akseptearje in DOM elemint of in jildich CSS selector as de earste argumint. Plugin-eleminten wurde fûn mei de querySelectormetoade, om't ús plugins allinich ien elemint stypje.

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

Asynchrone funksjes en transysjes

Alle programmatyske API-metoaden binne asynchronous 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.

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

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

Derneist sil in metoadeoprop op in oergongskomponint wurde negearre .

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`metoade

Wylst it miskien lykje korrekt te brûken de disposemetoade fuortendaliks nei hide(), it sil liede ta ferkearde resultaten. Hjir is in foarbyld fan it probleemgebrûk:

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

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

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

Metoaden en eigenskippen

Elke Bootstrap-plugin bleat de folgjende metoaden en statyske eigenskippen.

Metoade	Beskriuwing
`dispose`	Ferneatiget in elemint syn modal. (Ferwidert bewarre gegevens op it DOM-elemint)
`getInstance`	Statyske metoade wêrmei jo de modale eksimplaar kinne krije ferbûn mei in DOM-elemint.
`getOrCreateInstance`	Statyske metoade wêrmei jo de modale eksimplaar kinne krije dy't ferbûn is mei in DOM-elemint, of in nij oanmeitsje foar it gefal dat it net inisjalisearre is.

Statyske eigendom	Beskriuwing
`NAME`	Jout de plugin namme werom. (foarbyld `bootstrap.Tooltip.NAME`:)
`VERSION`	De ferzje fan elk fan Bootstrap's plugins kin tagonklik wurde fia it `VERSION`eigendom fan 'e plugin's constructor (foarbyld: `bootstrap.Tooltip.VERSION`)

Sanitizer

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

De standertwearde allowListis de folgjende:

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

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

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)

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

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

Opsjoneel mei help fan jQuery

Jo hawwe gjin jQuery yn Bootstrap 5 nedich , 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. Hjirmei kinne jo it folgjende dwaan:

$('[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

Itselde jildt foar ús oare komponinten.

Gjin konflikt

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.

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

Bootstrap stipet gjin offisjeel JavaScript-biblioteken fan tredden lykas Prototype of jQuery UI. Nettsjinsteande .noConflictbarrens mei nammen, kinne d'r kompatibiliteitsproblemen wêze dy't jo sels moatte reparearje.

jQuery eveneminten

Bootstrap sil detect jQuery as jQueryis oanwêzich yn it windowfoarwerp en der is gjin data-bs-no-jqueryattribút ynsteld op <body>. As jQuery wurdt fûn, sil Bootstrap eveneminten útstjoere troch it evenemintsysteem fan jQuery. Dus as jo nei de eveneminten fan Bootstrap harkje wolle, moatte jo de jQuery-metoaden ( .on, .one) brûke ynstee fan addEventListener.

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

JavaScript útskeakele

De plugins fan Bootstrap hawwe gjin spesjale fallback 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.