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

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

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

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

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

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

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

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

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

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

אָבער, אין עטלעכע סיטואַטיאָנס עס קען זיין דיזייראַבאַל צו דיסייבאַל דעם פאַנגקשאַנאַליטי. צו דיסייבאַל די דאַטן אַטריביוט אַפּי, ונבינד אַלע געשעענישן אויף דעם דאָקומענט מיט די נאָמען data-apiווי אַזוי:

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

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

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

געשעענישן

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

כל ינפיניטיווע געשעענישן צושטעלן preventDefault()פאַנגקשאַנאַליטי. דאָס גיט די פיייקייט צו האַלטן די דורכפירונג פון אַ קאַמף איידער עס סטאַרץ. צוריקקומען פאַלש פון אַ געשעעניש האַנדלער וועט אויך אויטאָמאַטיש רופן preventDefault().

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

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

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

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

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

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

יעדער פּלוגין אויך יקספּאָוזיז זיין רוי קאַנסטראַקטער אויף אַ Constructorפאַרמאָג: $.fn.popover.Constructor. אויב איר'ד ווי צו באַקומען אַ באַזונדער פּלוגין בייַשפּיל, צוריקקריגן עס גלייַך פֿון אַן עלעמענט: $('[rel="popover"]').data('popover').

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

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

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

$('#myCollapse').on('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

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

$('#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 !!

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

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

// changes default for the modal plugin's `keyboard` option to false
$.fn.modal.Constructor.Default.keyboard = false

קיין קאָנפליקט

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

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

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

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

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

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

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

וטיל

אַלע באָאָטסטראַפּ ס דזשאַוואַסקריפּט טעקעס אָפענגען אויף util.jsאון עס מוזן זיין אַרייַנגערעכנט צוזאמען די אנדערע דזשאַוואַסקריפּט טעקעס. אויב איר נוצן די קאָמפּילעד (אָדער מינאַפייד) bootstrap.js, עס איז ניט דאַרפֿן צו אַרייַננעמען דעם - עס איז שוין דאָרט.

util.jsכולל יוטילאַטיז פאַנגקשאַנז און אַ יקערדיק העלפּער פֿאַר transitionEndגעשעענישן ווי געזונט ווי אַ CSS יבערגאַנג עמולאַטאָר. עס איז געניצט דורך די אנדערע פּלוגינס צו קאָנטראָלירן פֿאַר CSS יבערגאַנג שטיצן און צו כאַפּן כאַנגגינג טראַנזישאַנז.

סאַניטיזער

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

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

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

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

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)

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

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