דזשאַוואַסקריפּט

יחיד אָדער צונויפגעשטעלט

פּלוגינס קענען זיין ינקלודעד ינדיווידזשואַלי (ניצן באָאָטסטראַפּ ס יחיד js/dist/*.js), אָדער אַלע אין אַמאָל ניצן bootstrap.jsאָדער די מיניפיעד bootstrap.min.js(טאָן ניט אַרייַננעמען ביידע).

אויב איר נוצן אַ באַנדלער (וועבפּאַקק, ראָללופּ ...), איר קענען נוצן /js/dist/*.jsטעקעס וואָס זענען UMD גרייט.

ניצן Bootstrap ווי אַ מאָדולע

מיר צושטעלן אַ ווערסיע פון ​​Bootstrap געבויט ווי ESM( bootstrap.esm.jsאון bootstrap.esm.min.js) וואָס אַלאַוז איר צו נוצן Bootstrap ווי אַ מאָדולע אין דיין בלעטערער אויב דיין טאַרגעטעד בראַוזערז שטיצן עס .

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

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

דעפּענדענסעס

עטלעכע פּלוגינס און קסס קאַמפּאָונאַנץ אָפענגען אויף אנדערע פּלוגינס. אויב איר ינקלודז פּלוגינס ינדיווידזשואַלי, מאַכן זיכער צו קאָנטראָלירן פֿאַר די דיפּענדאַנסיז אין די דאָקומענטן.

אונדזער דראָפּדאָוונס, פּאָפּאָווערס און טאָאָלטיפּס אויך אָפענגען אויף פּאָפּער .

נאָך ווילן צו נוצן jQuery? עס איז מעגלעך!

Bootstrap 5 איז דיזיינד צו זיין געוויינט אָן jQuery, אָבער עס איז נאָך מעגלעך צו נוצן אונדזער קאַמפּאָונאַנץ מיט jQuery. אויב באָאָטסטראַפּ דיטעקץ jQueryאין די windowכייפעץ , עס וועט לייגן אַלע אונדזער קאַמפּאָונאַנץ אין jQuery ס פּלוגין סיסטעם; דאָס מיינט אַז איר וועט קענען $('[data-bs-toggle="tooltip"]').tooltip()צו געבן מכשירים. דער זעלביקער גייט פֿאַר אונדזער אנדערע קאַמפּאָונאַנץ.

דאַטן אַטריביוץ

קימאַט אַלע באָאָטסטראַפּ פּלוגינס קענען זיין ענייבאַלד און קאַנפיגיערד דורך HTML אַליין מיט דאַטן אַטריביוץ (אונדזער בילכער וועג צו נוצן דזשאַוואַסקריפּט פאַנגקשאַנאַליטי). זייט זיכער צו נוצן בלויז איין גאַנג פון דאַטן אַטריביוץ אויף אַ איין עלעמענט (למשל, איר קענען נישט צינגל אַ טאָאָלטיפּ און מאָדאַל פֿון דער זעלביקער קנעפּל.)

געשעענישן

Bootstrap גיט מנהג events פֿאַר די יינציק אַקשאַנז פון רובֿ פּלוגינס. בכלל, די קומען אין אַ ינפיניטיווע און פאַרגאַנגענהייט באַטייליקונג פאָרעם - ווו די ינפיניטיווע (למשל show) איז טריגערד אין די אָנהייב פון אַ געשעעניש, און זיין פאַרגאַנגענהייט פּאַרטיסיפּול פאָרעם (למשל shown) איז טריגערד אויף די קאַמפּלישאַן פון אַ קאַמף.

כל ינפיניטיווע געשעענישן צושטעלן preventDefault()פאַנגקשאַנאַליטי. דאָס גיט די פיייקייט צו האַלטן די דורכפירונג פון אַ קאַמף איידער עס סטאַרץ. צוריקקומען פאַלש פון אַ געשעעניש האַנדלער וועט אויך אויטאָמאַטיש רופן 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...
})

פּראָגראַממאַטיק אַפּי

כל קאַנסטראַקטערז אָננעמען אַן אַפּשאַנאַל אָפּציעס כייפעץ אָדער גאָרנישט (וואָס ינישיאַץ אַ פּלוגין מיט זיין פעליקייַט נאַטור):

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

אויב איר'ד ווי צו באַקומען אַ באַזונדער פּלוגין בייַשפּיל, יעדער פּלוגין יקספּאָוזיז אַ getInstanceאופֿן. אין סדר צו צוריקקריגן עס גלייַך פון אַן עלעמענט, טאָן דאָס: bootstrap.Popover.getInstance(myPopoverEl).

CSS סעלעקטערז אין קאַנסטראַקטערז

איר קענט אויך נוצן אַ CSS סעלעקטאָר ווי דער ערשטער אַרגומענט אַנשטאָט פון אַ DOM עלעמענט צו ינישאַלייז די פּלוגין. דערווייַל דער עלעמענט פֿאַר די פּלוגין איז געפֿונען דורך דעם querySelectorאופֿן זינט אונדזער פּלוגינס שטיצן בלויז אַ איין עלעמענט.

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

אַסינטשראָנאָוס פאַנגקשאַנז און טראַנזישאַנז

אַלע פּראָגראַממאַטיק אַפּי מעטהאָדס זענען ייסינגקראַנאַס און צוריקקומען צו די קאַללער אַמאָל די יבערגאַנג איז סטאַרטעד אָבער איידער עס ענדס .

אין סדר צו ויספירן אַ קאַמף אַמאָל די יבערגאַנג איז גאַנץ, איר קענען הערן צו די קאָראַספּאַנדינג געשעעניש.

var myCollapseEl = document.getElementById('myCollapse')

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

אין דערצו, אַ מעטאָד רופן אויף אַ יבערגאַנג קאָמפּאָנענט וועט זיין איגנאָרירט .

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

פעליקייַט סעטטינגס

איר קענען טוישן די פעליקייַט סעטטינגס פֿאַר אַ פּלוגין דורך מאָדיפיצירן די פּלוגין ס Constructor.Defaultכייפעץ:

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

קיין קאָנפליקט (בלויז אויב איר נוצן jQuery)

מאל עס איז נייטיק צו נוצן Bootstrap פּלוגינס מיט אנדערע וי פראַמעוואָרקס. אין די צושטאנדן, נאַמעספּאַסע קאַליזשאַנז קענען טייל מאָל פּאַסירן. אויב דאָס כאַפּאַנז, איר קענט רופן .noConflictדעם פּלוגין וואָס איר ווילט צוריקקריגן די ווערט פון.

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

ווערסיע נומערן

די ווערסיע פון ​​יעדער פון באָאָטסטראַפּ ס פּלוגינס קענען זיין אַקסעסט דורך די VERSIONפאַרמאָג פון די פּלוגין ס קאַנסטראַקטער. פֿאַר בייַשפּיל, פֿאַר די טאָאָלטיפּ פּלוגין:

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

קיין ספּעציעל פאָלבאַקס ווען דזשאַוואַסקריפּט איז פאַרקריפּלט

באָאָטסטראַפּ ס פּלוגינס טאָן ניט פאַלן צוריק ספּעציעל גראַציעז ווען דזשאַוואַסקריפּט איז פאַרקריפּלט. אויב איר זאָרגן וועגן די באַניצער דערפאַרונג אין דעם פאַל, נוצן <noscript>צו דערקלערן די סיטואַציע (און ווי צו געבן דזשאַוואַסקריפּט) צו דיין יוזערז, און / אָדער לייגן דיין אייגענע מנהג פאָלבאַקס.

סאַניטיזער

מכשירים און פּאָפּאָווערס נוצן אונדזער געבויט-אין סאַניטיזער צו סאַניטיזירן אָפּציעס וואָס אָננעמען HTML.

די פעליקייַט allowListווערט איז די פאלגענדע:

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

אויב איר ווילן צו לייגן נייַ וואַלועס צו דעם פעליקייַט, allowListאיר קענען טאָן די פאלגענדע:

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)

אויב איר ווילט בייפּאַס אונדזער סאַניטיזער ווייַל איר בעסער וועלן צו נוצן אַ דעדאַקייטאַד ביבליאָטעק, למשל DOMPurify , איר זאָל טאָן די פאלגענדע:

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