JavaScript

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

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.

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. Notéiert och datt all Plugins op jQuery hänken (dat heescht datt jQuery muss virun de Plugin Dateien abegraff sinn). Consultéiert eispackage.json fir ze kucken wéi eng Versioune vu jQuery ënnerstëtzt ginn.

Eis Dropdowns, Popovers an Tooltips hänkt och vu Popper.js 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 och ëmmer, an e puer Situatiounen kann et wënschenswäert sinn dës Funktionalitéit auszeschalten. Fir d'Datenattributer API auszeschalten, unbinden all Eventer am Dokument mam Nummberäich mat data-apiesou:

$(document).off('.data-api')

Alternativ, fir e spezifesche Plugin ze zielen, gitt just den Numm vum Plugin als Nummraum zesumme mam Data-APi Nummraum wéi dëst:

$(document).off('.alert.data-api')

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

$('#myModal').on('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

Programmatesch API

Mir gleewen och datt Dir sollt fäeg sinn all Bootstrap Plugins reng duerch d'JavaScript API ze benotzen. All ëffentlech APIen sinn eenzel, chainable Methoden, a gitt d'Kollektioun zréck.

$('.btn.danger').button('toggle').addClass('fat')

All Methode sollen en optionalen Optiounsobjekt akzeptéieren, eng String déi eng bestëmmte Method zielt, oder näischt (wat e Plugin mam Standardverhalen initiéiert):

$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately

All Plugin weist och säi roude Konstruktor op enger ConstructorImmobilie aus $.fn.popover.Constructor:. Wann Dir eng bestëmmte Plugin Instanz wëllt kréien, recuperéieren se direkt vun engem Element $('[rel="popover"]').data('popover'):.

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.

$('#myCollapse').on('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 .

$('#myCarousel').on('slid.bs.carousel', function (event) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('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
$.fn.modal.Constructor.Default.keyboard = false

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.

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 jiddereng vun Bootstrap's jQuery Plugins kann iwwer d' VERSIONEegeschafte vum Konstruktor vum Plugin zougänglech sinn. Zum Beispill, fir den Tooltip Plugin:

$.fn.tooltip.Constructor.VERSION // => "4.6.2"

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.

Util

All Bootstrap's JavaScript Dateien hänkt dovun of util.jsan et muss niewent deenen anere JavaScript Dateien abegraff sinn. Wann Dir déi kompiléiert (oder minifizéiert) benotzt bootstrap.js, ass et net néideg dëst matzemaachen - et ass schonn do.

util.jsenthält Utilityfunktiounen an e Basishëllefer fir transitionEndEventer wéi och en CSS Iwwergangsemulator. Et gëtt vun den anere Plugins benotzt fir no CSS Iwwergangssupport ze kontrolléieren an hängend Iwwergäng ze fangen.

Sanitizer

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

De Standardwäert whiteListass déi folgend:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // 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, whiteListkënnt Dir déi folgend maachen:

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-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-]+/
myDefaultWhiteList['*'].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:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})