JavaScript

Bréngt Bootstrap zum Liewen mat eisen optionalen JavaScript Plugins. Léiert iwwer all Plugin, eis Daten a programmatesch API Optiounen, a méi.

Op dëser Säit

Individuell oder zesummegesat

Plugins kënnen individuell abegraff ginn (benotzt dem Bootstrap säin individuellen js/dist/*.js), oder all gläichzäiteg benotzt bootstrap.jsoder déi minifizéiert bootstrap.min.js(net béid enthalen).

Wann Dir e Bündler benotzt (Webpack, Parcel, Vite ...), kënnt Dir /js/dist/*.jsDateien benotzen déi UMD prett sinn.

Benotzt mat JavaScript Kaderen

Wärend de Bootstrap CSS mat all Kader benotzt ka ginn, ass de Bootstrap JavaScript net voll kompatibel mat JavaScript Kaderen wéi React, Vue, a Angular déi voll Wëssen iwwer d'DOM iwwerhuelen. Béid Bootstrap an de Kader kënne probéieren datselwecht DOM-Element ze mutéieren, wat zu Käfere wéi Dropdowns resultéiert déi an der "oppener" Positioun hänke bleiwen.

Eng besser Alternativ fir déi, déi dës Aart vu Kaderen benotzen, ass e Kader-spezifesche Package ze benotzen amplaz vum Bootstrap JavaScript. Hei sinn e puer vun de populäersten Optiounen:

Reaktioun: Reagéiert Bootstrap
Vue: BootstrapVue (aktuell ënnerstëtzt nëmmen Vue 2 a Bootstrap 4)
Angular: ng-bootstrap

Benotzt Bootstrap als Modul

Probéiert et selwer! Luet de Quellcode an d'Aarbechtsdemo erof fir Bootstrap als ES Modul aus dem twbs/examples Repository ze benotzen . Dir kënnt och d'Beispill op StackBlitz opmaachen .

Mir bidden eng Versioun vu Bootstrap gebaut als ESM( bootstrap.esm.jsan bootstrap.esm.min.js) déi Iech erlaabt Bootstrap als Modul am Browser ze benotzen, wann Är gezielte Browser et ënnerstëtzen .

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

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

Am Verglach mat JS-Bundler, benotzt ESM am Browser erfuerdert datt Dir de komplette Wee an de Dateinumm benotzt amplaz vum Modulnumm. Liest méi iwwer JS Moduler am Browser. Dofir benotze mir 'bootstrap.esm.min.js'amplaz vun 'bootstrap'uewen. Wéi och ëmmer, dëst ass weider komplizéiert vun eiser Popper Ofhängegkeet, déi Popper an eise JavaScript importéiert esou:

import * as Popper from "@popperjs/core"

Wann Dir dëst probéiert wéi et ass, gesitt Dir e Feeler an der Konsole wéi folgend:

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

Fir dëst ze fixéieren, kënnt Dir e importmapbenotzen fir déi arbiträr Modulnamen ze léisen fir Weeër ze kompletéieren. Wann Är gezielte Browser net ënnerstëtzen importmap, musst Dir den es-module-shims Projet benotzen. Hei ass wéi et funktionnéiert fir Bootstrap a 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>

Ofhängegkeeten

E puer Plugins an CSS Komponenten hänke vun anere Plugins of. Wann Dir Plugins individuell enthält, gitt sécher fir dës Ofhängegkeeten an den Dokumenter ze kontrolléieren.

Eis Dropdowns, Popovers an Tooltips hänken och vum Popper of .

Daten Attributer

Bal all Bootstrap Plugins kënnen duerch HTML eleng mat Datenattributer aktivéiert a konfiguréiert ginn (eis léifste Manéier fir JavaScript Funktionalitéit ze benotzen). Gitt sécher datt Dir nëmmen e Set vun Dateattributer op engem eenzegen Element benotzt (zB Dir kënnt net e Tooltip a Modal vum selwechte Knäppchen ausléisen.)

Wéi Optiounen kënnen iwwer Dateattributer oder JavaScript weidergeleet ginn, kënnt Dir en Optiounsnumm op data-bs-, wéi an data-bs-animation="{value}". Vergewëssert Iech de Falltyp vum Optiounsnumm vun " camelCase " op " Kebab-Case " z'änneren wann Dir d'Optiounen iwwer Datenattributer passéiert. Zum Beispill benotzt data-bs-custom-class="beautifier"amplaz data-bs-customClass="beautifier".

Zënter Bootstrap 5.2.0 ënnerstëtzen all Komponenten en experimentellen reservéierten Dateattribut, data-bs-configdeen eng einfach Komponentkonfiguratioun als JSON-String kann ënnerhuelen. Wann en Element data-bs-config='{"delay":0, "title":123}'an data-bs-title="456"Attributer huet, gëtt de Finale titleWäert 456an déi getrennten Dateattributter iwwerschreiden Wäerter, déi op data-bs-config. Zousätzlech kënnen existent Datenattributer JSON Wäerter wéi data-bs-delay='{"show":0,"hide":150}'.

Wieler

Mir benotzen déi gebierteg querySelectora querySelectorAllMethoden fir DOM Elementer aus Leeschtungsgrënn ze froen, also musst Dir valabel Selektor benotzen . Wann Dir speziell Selektorer benotzt wéi collapse:Example, gitt sécher se ze entkommen.

Evenementer

Bootstrap bitt personaliséiert Eventer fir déi meescht Plugins eenzegaarteg Aktiounen. Allgemeng kommen dës an enger Infinitiv- a Vergaangenheetsform - wou den Infinitiv (ex. show) am Ufank vun engem Event ausgeléist gëtt, a seng Partizipform (ex. shown) ausgeléist gëtt beim Ofschloss vun enger Handlung.

All infinitiv Eventer bidden preventDefault()Funktionalitéit. Dëst bitt d'Fäegkeet d'Ausféierung vun enger Aktioun ze stoppen ier se ufänkt. Falsch zréckginn vun engem Event Handler wäert och automatesch ruffen preventDefault().

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

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

Programmatesch API

All Konstruktoren akzeptéieren en optionalen Optiounsobjekt oder näischt (wat e Plugin mat sengem Standardverhalen initiéiert):

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

Wann Dir e bestëmmte Plugin-Instanz wëllt kréien, weist all Plugin eng getInstanceMethod aus. Zum Beispill, fir eng Instanz direkt vun engem Element ze recuperéieren:

bootstrap.Popover.getInstance(myPopoverEl)

Dës Method gëtt zréck nullwann eng Instanz net iwwer dat ugefrote Element initiéiert gëtt.

Alternativ getOrCreateInstancekann benotzt ginn fir d'Instanz mat engem DOM-Element assoziéiert ze kréien, oder eng nei ze kreéieren am Fall wou se net initialiséiert gouf.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

Am Fall wou eng Instanz net initialiséiert gouf, kann se en optionalen Konfiguratiounsobjekt als zweet Argument akzeptéieren a benotzen.

CSS Selektor bei Konstruktoren

Zousätzlech zu de Methoden getInstancea getOrCreateInstancekënnen all Pluginkonstruktoren en DOM-Element oder e valabele CSS-selektor als éischt Argument akzeptéieren. Plugin Elementer gi mat der querySelectorMethod fonnt well eis Plugins nëmmen en eenzegt Element ënnerstëtzen.

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 Funktiounen an Iwwergäng

All programmatesch API Methoden sinn asynchron a ginn zréck an den Uruffer nodeems den Iwwergank ugefaang ass, awer ier en eriwwer ass . Fir eng Handlung auszeféieren nodeems den Iwwergank fäerdeg ass, kënnt Dir op dat entspriechend Event lauschteren.

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

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

Zousätzlech gëtt e Methodruff op eng Iwwergangskomponent ignoréiert .

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

Och wann et richteg ka schéngen d' disposeMethod direkt no hide()ze benotzen, wäert et zu falsche Resultater féieren. Hei ass e Beispill vun der Benotzung vum Problem:

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

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

Default Astellunge

Dir kënnt d'Standardastellunge fir e Plugin änneren andeems Dir den Constructor.DefaultObjet vum Plugin ännert:

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

Methoden an Eegeschaften

All Bootstrap Plugin enthält déi folgend Methoden a statesch Eegeschaften.

Method	Beschreiwung
`dispose`	Zerstéiert d'Modal vun engem Element. (läscht gespäichert Daten am DOM Element)
`getInstance`	Statesch Method déi Iech erlaabt d'modal Instanz mat engem DOM Element assoziéiert ze kréien.
`getOrCreateInstance`	Statesch Method déi Iech erlaabt d'modal Instanz mat engem DOM Element assoziéiert ze kréien, oder eng nei ze kreéieren am Fall wou se net initialiséiert gouf.

statesch Propriétéit	Beschreiwung
`NAME`	Gitt de Plugin Numm zréck. (Beispill `bootstrap.Tooltip.NAME`:)
`VERSION`	D'Versioun vun jiddereng vun Bootstrap's Plugins kann iwwer d' `VERSION`Eegeschafte vum Plugin's Konstruktor zougänglech sinn (Beispill: `bootstrap.Tooltip.VERSION`)

Sanitizer

Tooltips a Popovers benotzen eisen agebaute Sanitizer fir Optiounen ze desinfizéieren déi HTML akzeptéieren.

De Standardwäert allowListass déi folgend:

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

Wann Dir nei Wäerter zu dësem Standard addéiere wëllt, allowListkënnt Dir déi folgend maachen:

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)

Wann Dir eise Sanitizer ëmgoe wëllt well Dir léiwer eng speziell Bibliothéik benotze wëllt, zum Beispill DOMPurify , sollt Dir déi folgend maachen:

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

Optional benotzt jQuery

Dir braucht net jQuery am Bootstrap 5 , awer et ass nach ëmmer méiglech eis Komponente mat jQuery ze benotzen. Wann Bootstrap jQueryam windowObjet erkennt, füügt et all eis Komponenten am jQuery Plugin System. Dëst erlaabt Iech déi folgend ze maachen:

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

Dat selwecht gëllt fir eis aner Komponenten.

Kee Konflikt

Heiansdo ass et néideg Bootstrap Plugins mat anere UI Kaderen ze benotzen. An dësen Ëmstänn kënnen Nummraumkollisiounen heiansdo optrieden. Wann dat passéiert, kënnt Dir .noConflictde Plugin uruffen, deen Dir wëllt de Wäert zrécksetzen.

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

Bootstrap ënnerstëtzt net offiziell Drëtt Partei JavaScript Bibliothéike wéi Prototyp oder jQuery UI. Trotz .noConflictan Namespaced Eventer kënnen et Kompatibilitéitsproblemer sinn déi Dir eleng muss fixéieren.

jQuery Evenementer

Bootstrap erkennt jQuery wann jQueryet am windowObjet präsent ass an et gëtt keen data-bs-no-jqueryAttribut op <body>. Wann jQuery fonnt gëtt, wäert Bootstrap Eventer emittéieren dank dem jQuery Event System. Also wann Dir op Bootstrap d'Evenementer lauschtere wëllt, musst Dir d'jQuery Methoden benotzen ( .on, .one) amplaz addEventListener.

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

JavaScript behënnert

Bootstrap's Plugins hu kee spezielle Fallback wann JavaScript deaktivéiert ass. Wann Dir Iech ëm d'Benotzererfarung an dësem Fall këmmert, benotzt <noscript>fir d'Situatioun z'erklären (a wéi Dir JavaScript erëm aktivéiert) fir Är Benotzer, an / oder Är eege personaliséiert Réckfall derbäi.