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

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

אויף דעם בלאַט

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

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

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

באַניץ מיט דזשאַוואַסקריפּט פראַמעוואָרקס

בשעת די Bootstrap CSS קענען זיין געוויינט מיט קיין פריימווערק, די Bootstrap דזשאַוואַסקריפּט איז נישט גאָר קאַמפּאַטאַבאַל מיט דזשאַוואַסקריפּט פראַמעוואָרקס ווי React, Vue און Angular וואָס נעמען פול וויסן פון די DOM. ביידע באָאָטסטראַפּ און די פריימווערק קען פּרווון צו מיוטייט די זעלבע DOM עלעמענט, ריזאַלטינג אין באַגז ווי דראָפּדאָוונס וואָס זענען סטאַק אין די "עפענען" שטעלע.

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

רעאַגירן: רעאַגירן באָאָטסטראַפּ
Vue: BootstrapVue (דערווייַל בלויז שטיצט Vue 2 און Bootstrap 4)
ווינקלדיק: ng-bootstrap

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

פּרוּווט עס זיך! אראפקאפיע די מקור קאָד און ארבעטן דעמאָ פֿאַר ניצן Bootstrap ווי אַן ES מאָדולע פֿון די twbs / ביישפילן ריפּאַזאַטאָרי . איר קענט אויך עפֿענען דעם ביישפּיל אין StackBlitz .

מיר צושטעלן אַ ווערסיע פון 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>

קאַמפּערד מיט JS בונדלערס, ניצן ESM אין דעם בלעטערער ריקווייערז איר צו נוצן די פול דרך און טעקע נאָמען אַנשטאָט פון די מאָדולע נאָמען. לייענען מער וועגן JS מאַדזשולז אין דעם בלעטערער. אַז ס וואָס מיר נוצן 'bootstrap.esm.min.js'אַנשטאָט פון 'bootstrap'אויבן. אָבער, דאָס איז מער קאָמפּליצירט דורך אונדזער פּאָפּער דעפּענדענסי, וואָס ימפּאָרץ פּאָפּער אין אונדזער דזשאַוואַסקריפּט ווי אַזוי:

import * as Popper from "@popperjs/core"

אויב איר פּרובירן דעם ווי-איז, איר וועט זען אַ טעות אין די קאַנסאָול ווי די פאלגענדע:

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

צו פאַרריכטן דעם, איר קענען נוצן אַן importmapצו באַשליסן די אַרביטראַריש מאָדולע נעמען צו פאַרענדיקן פּאַטס. אויב דיין טאַרגעטעד בראַוזערז שטיצן נישט importmap, איר דאַרפֿן צו נוצן די es-module-shims פּרויעקט. דאָ ס ווי עס אַרבעט פֿאַר באָאָטסטראַפּ און פּאָפּער:

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

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

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

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

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

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

ווי אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט, איר קענען לייגן אַן אָפּציע נאָמען צו data-bs-, ווי אין data-bs-animation="{value}". מאַכן זיכער צו טוישן די פאַל טיפּ פון די אָפּציע נאָמען פון " camelCase " צו " קעבאַב-פאַל " ווען איר פאָרן די אָפּציעס דורך דאַטן אַטריביוץ. פֿאַר בייַשפּיל, נוצן data-bs-custom-class="beautifier"אַנשטאָט פון data-bs-customClass="beautifier".

זינט Bootstrap 5.2.0, אַלע קאַמפּאָונאַנץ שטיצן אַן יקספּערמענאַל רעזערווירט דאַטן אַטריביוט data-bs-configוואָס קענען זיין אַ פּשוט קאָמפּאָנענט קאַנפיגיעריישאַן ווי אַ JSON שטריקל. ווען אַן עלעמענט האט data-bs-config='{"delay":0, "title":123}'און data-bs-title="456"אַטריביוץ, די לעצט titleווערט וועט זיין 456און די באַזונדער דאַטן אַטריביוץ וועט אָווועררייד וואַלועס געגעבן אויף data-bs-config. אין אַדישאַן, די יגזיסטינג דאַטן אַטריביוץ זענען ביכולת צו הויז JSON וואַלועס ווי data-bs-delay='{"show":0,"hide":150}'.

סעלעקטערז

מיר נוצן די געבוירן querySelectorאון querySelectorAllמעטהאָדס צו אָנפרעג DOM עלעמענטן פֿאַר פאָרשטעלונג סיבות, אַזוי איר מוזן נוצן גילטיק סעלעקטאָרס . אויב איר נוצן ספּעציעל סעלעקטאָרס ווי collapse:Example, זיין זיכער צו אַנטלויפן זיי.

געשעענישן

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

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

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

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

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

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

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

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

bootstrap.Popover.getInstance(myPopoverEl)

דער אופֿן וועט צוריקקומען nullאויב אַ בייַשפּיל איז נישט ינישיייטיד איבער די געבעטן עלעמענט.

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

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

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

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

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

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

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

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

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

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

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

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`אופֿן

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

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

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

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

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

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

מעטהאָדס און פּראָפּערטיעס

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

מעטאָד	באַשרייַבונג
`dispose`	דיסטרויז אַן עלעמענט ס מאָדאַל. (רימוווז סטאָרד דאַטן אויף די DOM עלעמענט)
`getInstance`	סטאַטיק אופֿן וואָס אַלאַוז איר צו באַקומען די מאָדאַל בייַשפּיל פֿאַרבונדן מיט אַ DOM עלעמענט.
`getOrCreateInstance`	סטאַטיק אופֿן וואָס אַלאַוז איר צו באַקומען די מאָדאַל בייַשפּיל פֿאַרבונדן מיט אַ DOM עלעמענט, אָדער שאַפֿן אַ נייַע אין פאַל עס איז נישט יניטיאַלייזד.

סטאַטיק פאַרמאָג	באַשרייַבונג
`NAME`	קערט די פּלוגין נאָמען. (בייַשפּיל `bootstrap.Tooltip.NAME`:)
`VERSION`	די ווערסיע פון יעדער פון באָאָטסטראַפּ ס פּלוגינס קענען זיין אַקסעסט דורך די `VERSION`פאַרמאָג פון די פּלוגין ס קאַנסטראַקטער (בייַשפּיל: `bootstrap.Tooltip.VERSION`)

סאַניטיזער

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

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

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

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

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)

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

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

אָפּטיאָנאַללי ניצן jQuery

איר טאָן ניט דאַרפֿן jQuery אין Bootstrap 5 , אָבער עס איז נאָך מעגלעך צו נוצן אונדזער קאַמפּאָונאַנץ מיט jQuery. אויב באָאָטסטראַפּ דיטעקץ jQueryדי windowכייפעץ, עס וועט לייגן אַלע אונדזער קאַמפּאָונאַנץ אין jQuery ס פּלוגין סיסטעם. דאָס אַלאַוז איר צו טאָן די פאלגענדע:

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

דער זעלביקער גייט פֿאַר אונדזער אנדערע קאַמפּאָונאַנץ.

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

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

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

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

jQuery events

באָאָטסטראַפּ וועט דעטעקט דזשקווערי אויב עס jQueryאיז פאָרשטעלן אין די windowכייפעץ און עס איז קיין data-bs-no-jqueryאַטריביוט שטעלן אויף <body>. אויב jQuery איז געפֿונען, Bootstrap וועט אַרויסלאָזן events דאַנק צו jQuery ס געשעעניש סיסטעם. אַזוי אויב איר ווילן צו הערן צו Bootstrap ס events, איר וועט האָבן צו נוצן די jQuery מעטהאָדס ( .on, .one) אַנשטאָט פון addEventListener.

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

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

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