JavaScript

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 Bundler benotzt (Webpack, Rollup ...), kënnt Dir /js/dist/*.jsDateien benotzen déi UMD prett sinn.

Benotzt Bootstrap als Modul

Mir bidden eng Versioun vu Bootstrap gebaut als ESM( bootstrap.esm.jsan bootstrap.esm.min.js) déi Iech erlaabt Bootstrap als Modul an Ärem 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>

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änkt och vum Popper of .

Wëllt Dir ëmmer nach jQuery benotzen? Et ass méiglech!

Bootstrap 5 ass entwéckelt fir ouni jQuery benotzt ze ginn, awer et ass ëmmer nach méiglech eis Komponente mat jQuery ze benotzen. Wann Bootstrap jQueryam windowObjet erkennt, füügt et all eis Komponenten am jQuery's Plugin System; dat heescht datt Dir fäeg ass $('[data-bs-toggle="tooltip"]').tooltip()Tooltip z'aktivéieren. Dat selwecht gëllt fir eis aner Komponenten.

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

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

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

Programmatesch API

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

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

Wann Dir e bestëmmte Plugin-Instanz wëllt kréien, weist all Plugin eng getInstanceMethod aus. Fir et direkt vun engem Element ze recuperéieren, maacht dat bootstrap.Popover.getInstance(myPopoverEl):.

CSS Selektor bei Konstruktoren

Dir kënnt och e CSS Selector als éischt Argument benotzen anstatt en DOM Element fir de Plugin ze initialiséieren. De Moment gëtt d'Element fir de Plugin vun der querySelectorMethod fonnt, well eis Plugins nëmmen en eenzegt Element ënnerstëtzen.

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

Asynchrone Funktiounen an Iwwergäng

All programmatesch API Methoden sinn asynchron a ginn zréck an den Uruffer wann den Iwwergang 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.

var myCollapseEl = document.getElementById('myCollapse')

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

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

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

Kee Konflikt (nëmme wann Dir jQuery benotzt)

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.

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

Versioun Zuelen

D'Versioun vun all Bootstrap's Plugins kann iwwer d' VERSIONEegeschafte vum Konstruktor vum Plugin zougänglech sinn. Zum Beispill, fir den Tooltip Plugin:

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

Keng speziell Réckfall wann JavaScript behënnert ass

Bootstrap's Plugins falen net besonnesch graziéis zréck 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.

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:

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

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

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)

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:

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