JavaScript

בודדים או מורכבים

ניתן לכלול תוספים בנפרד (באמצעות ה-Individual של Bootstrap js/dist/*.js), או בבת אחת באמצעות bootstrap.jsה-Minified bootstrap.min.js(אל תכלול את שניהם).

אם אתה משתמש ב-Bundler (Webpack, Rollup...), אתה יכול להשתמש /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>

תלות

תוספים מסוימים ורכיבי CSS תלויים בתוספים אחרים. אם אתה כולל תוספים בנפרד, הקפד לבדוק את התלות הללו במסמכים.

התפריטים הנפתחים, הפופ-אוברים וטיפים שלנו תלויים גם ב- Popper .

עדיין רוצה להשתמש ב-jQuery? זה אפשרי!

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

תכונות נתונים

ניתן להפעיל ולהגדיר כמעט את כל התוספים של Bootstrap באמצעות HTML בלבד עם תכונות נתונים (הדרך המועדפת עלינו להשתמש בפונקציונליות JavaScript). הקפד להשתמש רק בקבוצה אחת של תכונות נתונים ברכיב בודד (לדוגמה, אינך יכול להפעיל תיאור כלים ומודאל מאותו כפתור).

אירועים

Bootstrap מספק אירועים מותאמים אישית עבור הפעולות הייחודיות של רוב התוספים. בדרך כלל, אלה באים בצורה אינפינטיבית וחלק עבר - כאשר האינפיניטיב (לדוגמה show) מופעל בתחילת אירוע, וצורת חלק העבר שלו (לדוגמה shown) מופעלת עם השלמת פעולה.

כל האירועים האינסופיים מספקים preventDefault()פונקציונליות. זה מספק את היכולת לעצור את ביצוע הפעולה לפני שהיא מתחילה. החזרת false ממטפל באירועים תקרא גם אוטומטית 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...
})

API פרוגרמטי

כל הבנאים מקבלים אובייקט אופציונלי אופציונלי או כלום (מה שמפעיל תוסף עם התנהגות ברירת המחדל שלו):

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

פונקציות ומעברים אסינכרוניים

כל שיטות ה-API התוכנותיות הן אסינכרוניות וחוזרות למתקשר ברגע שהמעבר מתחיל אך לפני שהוא מסתיים .

על מנת לבצע פעולה לאחר השלמת המעבר, ניתן להאזין לאירוע המתאים.

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

מספרי גרסה

ניתן לגשת לגרסה של כל אחד מהפלאגינים של Bootstrap דרך VERSIONהמאפיין של בנאי התוסף. לדוגמה, עבור הפלאגין 'טיפ כלים':

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

אין נפילות מיוחדות כאשר JavaScript מושבת

התוספים של Bootstrap אינם נופלים אחורה בחן במיוחד כאשר JavaScript מושבת. אם אכפת לך מחוויית המשתמש במקרה זה, השתמש <noscript>כדי להסביר את המצב (וכיצד להפעיל מחדש את JavaScript) למשתמשים שלך, ו/או הוסף החזרות מותאמות אישית משלך.

מחטא

עצות כלים ו-Popovers משתמשים בחומר החיטוי המובנה שלנו כדי לחטא אפשרויות שמקבלות 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)
  }
})