דלג לתוכן הראשי דלג לניווט במסמכים
in English

עובר לגרסה 5

עקוב אחר שינויים בקובצי המקור, התיעוד והרכיבים של Bootstrap כדי לעזור לך לעבור מ-v4 ל-v5.

בעמוד זה

תלות

  • הורד את jQuery.
  • שודרג מ-Popper v1.x ל-Popper v2.x.
  • החליף את Libsass ב-Dart Sass שכן מהדר Sass שלנו בהינתן Libsass הוצא משימוש.
  • היגר מג'קיל להוגו בשביל לבנות את התיעוד שלנו

תמיכה בדפדפן

  • הסיר את Internet Explorer 10 ו-11
  • ירד Microsoft Edge < 16 (Legacy Edge)
  • ירד Firefox < 60
  • נפילת Safari < 12
  • הורד את iOS Safari < 12
  • הורד את Chrome < 60

שינויים בתיעוד

  • דף הבית, פריסת המסמכים והכותרת התחתונה עוצבו מחדש.
  • נוסף מדריך חבילות חדש .
  • נוסף סעיף התאמה אישית חדש , החלפת דף הנושאים של v4 , עם פרטים חדשים על Sass, אפשרויות תצורה גלובליות, ערכות צבעים, משתני CSS ועוד.
  • ארגנו מחדש את כל תיעוד הטפסים למקטע טפסים חדש , ופיצל את התוכן לדפים ממוקדים יותר.
  • באופן דומה, עדכן את סע��ף הפריסה , כדי לעצב את תוכן הרשת בצורה ברורה יותר.
  • שונה שם עמוד הרכיב "Navs" ל"Navs & Tabs".
  • שונה שם הדף "צ'קים" ל"צ'קים ומכשירי רדיו".
  • עיצבו מחדש את סרגל הניווט והוסיפו תת ניווט חדש כדי להקל על ההתמצאות באתרים ובגרסאות המסמכים שלנו.
  • קיצור מקשים חדש נוסף עבור שדה החיפוש: Ctrl + /.

סאס

  • הסרנו את מיזוג ברירת המחדל של מפת Sass כדי להקל על הסרת ערכים מיותרים. זכור שעליך להגדיר את כל הערכים במפות Sass כמו $theme-colors. בדוק כיצד להתמודד עם מפות Sass .

  • שְׁבִירָהשמה שונה color-yiq()לפונקציה ומשתנים קשורים לכיוון color-contrast()שהיא כבר לא קשורה למרחב הצבעים YIQ. ראה #30168.

    • $yiq-contrasted-thresholdשונה שם ל $min-contrast-ratio.
    • $yiq-text-darkושם $yiq-text-lightשונה בהתאמה ל- $color-contrast-darkו $color-contrast-light.

  • שְׁבִירָהפרמטרי שילוב שאילתות מדיה השתנו לגישה הגיונית יותר.

    • media-breakpoint-down()משתמש בנקודת העצירה עצמה במקום בנקודת העצירה הבאה (למשל, media-breakpoint-down(lg)במקום media-breakpoint-down(md)יעדי תצוגה קטנים מ- lg).
    • באופן דומה, הפרמטר השני ב- media-breakpoint-between()משתמש גם בנקודת העצירה עצמה במקום בנקודת העצירה הבאה (למשל, media-between(sm, lg)במקום media-breakpoint-between(sm, md)יעדי תצוגה בין smלבין lg).

  • שְׁבִירָההוסרו סגנונות הדפסה $enable-print-stylesומשתנים. שיעורי תצוגת הדפס עדיין קיימים. ראה #28339 .

  • שְׁבִירָהירד color(), theme-color(), gray()ופונקציות לטובת משתנים. ראה #29083 .

  • שְׁבִירָהשמה שונה theme-color-level()לפונקציה color-level()ועכשיו היא מקבלת כל צבע שתרצו במקום רק $theme-colorצבעים. ראה #29083 היזהרו: color-level() הוכנס מאוחר יותר v5.0.0-alpha3.

  • שְׁבִירָהשונה שם $enable-prefers-reduced-motion-media-queryואל $enable-pointer-cursor-for-buttonsולקיצור $enable-reduced-motion.$enable-button-pointers

  • שְׁבִירָההוציא את bg-gradient-variant()המיקסין. השתמש .bg-gradientבמחלקה כדי להוסיף מעברי צבע לאלמנטים במקום .bg-gradient-*למחלקות שנוצרו.

  • שְׁבִירָה מיקסים שהוסרו בעבר:

    • hover, hover-focus, plain-hover-focusוhover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(הפיל גם את מחלקת השירות המשויכת, .text-hide)
    • visibility()
    • form-control-focus()

  • שְׁבִירָהשמה שונה scale-color()לפונקציה כדי shift-color()למנוע התנגשות עם פונקציית קנה המידה של Sass עצמה.

  • box-shadowmixins מאפשרים כעת nullערכים ויורדים noneממספר ארגומנטים. ראה #30394 .

  • למיקסין border-radius()יש כעת ערך ברירת מחדל.

מערכת צבע

  • מערכת הצבעים שעבדה color-level()והוסרה $theme-color-intervalלטובת מערכת צבעים חדשה. כל הפונקציות lighten()והפונקציות darken()בבסיס הקוד שלנו מוחלפות ב- tint-color()ו shade-color(). פונקציות אלו יערבבו את הצבע עם לבן או שחור במקום לשנות את הבהירות שלו בכמות קבועה. הגוון shift-color()או יגוון צבע תלוי אם פרמטר המשקל שלו חיובי או שלילי. ראה #30622 לפרטים נוספים.

  • הוספת גוונים וגוונים חדשים לכל צבע, תוך מתן תשעה צבעים נפרדים לכל צבע בסיס, כמשתני Sass חדשים.

  • ניגודיות צבע משופרת. יחס ניגודיות צבע חבוט מ-3:1 ל-4.5:1 וצבעים מעודכנים של כחול, ירוק, ציאן וורוד כדי להבטיח ניגודיות WCAG 2.1 AA. שינו גם את צבע ניגודיות הצבע שלנו מ- $gray-900ל $black.

  • כדי לתמוך במערכת הצבעים שלנו, הוספנו התאמה אישית ופונקציות חדשות tint-color()כדי shade-color()לערבב את הצבעים שלנו בצורה מתאימה.

עדכוני רשת

  • נקודת שבירה חדשה! נוספה xxlנקודת עצירה חדשה עבור 1400pxומעלה. אין שינויים בכל נקודות השבירה האחרות.

  • מרזבים משופרים. המרזבים מוגדרים כעת ב-rems והם צרים יותר מ-v4 ( 1.5rem, או בערך 24px, למטה מ- 30px). זה מיישר את המרזבים של מערכת הרשת שלנו עם כלי המרווח שלנו.

    • נוספה מחלקת מרזבים חדשה ( .g-*, .gx-*, ו .gy-*) כדי לשלוט על מרזבים אופקיים/אנכיים, מרזבים אופקיים ומרזבים אנכיים.
    • שְׁבִירָההשם שונה .no-guttersל .g-0כדי להתאים לכלי עזר חדשים למרזב.

  • עמודות כבר לא position: relativeהוחלו, אז ייתכן שיהיה עליך להוסיף .position-relativeלכמה אלמנטים כדי לשחזר את ההתנהגות הזו.

  • שְׁבִירָהירד מספר .order-*שיעורים שלעתים קרובות לא נעשה בהם שימוש. כעת אנו מספקים רק .order-1ליציאה .order-5מהקופסה.

  • שְׁבִירָההורד את .mediaהרכיב מכיוון שניתן לשכפל אותו בקלות עם כלי עזר. ראה את #28265 ואת דף עזרי הגמישות לדוגמא .

  • שְׁבִירָה bootstrap-grid.cssכעת חל רק box-sizing: border-boxעל העמודה במקום לאפס את גודל התיבה הגלובלי. בדרך זו, ניתן להשתמש בסגנונות הרשת שלנו במקומות נוספים ללא הפרעות.

  • $enable-grid-classesכבר לא משבית את היצירה של מחלקות מיכל. ראה #29146.

  • עדכן את make-colהמיקסין לברירת המחדל לעמודות שוות ללא גודל מוגדר.

תוכן, אתחול מחדש וכו'

  • RFS מופעל כעת כברירת מחדל. כותרות המשתמשותfont-size()במיקסין יתאימו באופן אוטומטי אתfont-sizeקנה המידה שלהן עם יציאת התצוגה. תכונה זו בוצעה בעבר ב-v4.

  • שְׁבִירָהשיפץ את טיפוגרפיית התצוגה שלנו כדי להחליף את $display-*המשתנים שלנו $display-font-sizesובמפת Sass. כמו כן הוסרו את $display-*-weightהמשתנים הבודדים עבור s יחיד $display-font-weightומותאם font-size.

  • נוספו שני .display-*גדלי כותרות חדשים, .display-5ו- .display-6.

  • קישורים מסומנים בקו תחתון כברירת מחדל (לא רק עם ריחוף), אלא אם הם חלק מרכיבים ספציפיים.

  • טבלאות עיצבו מחדש כדי לרענן את הסגנונות שלהן ולבנות אותן מחדש עם משתני CSS לשליטה רבה יותר בעיצוב.

  • שְׁבִירָהטבלאות מקוננות כבר לא יורשות סגנונות.

  • שְׁבִירָה .thead-lightוהם .thead-darkנשמטים לטובת .table-*מחלקות הווריאציות שניתן להשתמש בהן עבור כל רכיבי הטבלה ( thead, tbody, tfoot, trו- ) th.td

  • שְׁבִירָההשם של table-row-variant()המיקסין שונה table-variant()ומקבל רק 2 פרמטרים: $color(שם צבע) ו- $value(קוד צבע). צבע הגבול וצבעי ההדגשה מחושבים אוטומטית על סמך משתני גורם הטבלה.

  • פיצול משתני ריפוד תא טבלה ל- -yו -x.

  • שְׁבִירָהירד .pre-scrollableשיעור. ראה #29135

  • שְׁבִירָה .text-*כלי עזר לא מוסיפים מצבי ריחוף ומיקוד לקישורים יותר. .link-*ניתן להשתמש בשיעורי עוזרים במקום זאת. ראה #29267

  • שְׁבִירָהירד .text-justifyשיעור. ראה #29793

  • padding-leftאפס את ברירת המחדל האופקי מופעל <ul>ורכיבים <ol>מברירת המחדל של הדפדפן 40pxל 2rem.

  • נוסף $enable-smooth-scroll, אשר חל scroll-behavior: smoothבאופן גלובלי - למעט משתמשים המבקשים תנועה מופחתת באמצעות prefers-reduced-motionשאילתת מדיה. ראה #31877

RTL

  • שמם של משתנים, כלי עזר ומיקסינים ספציפיים לכיוון אופקי, כולם שונו לשימוש במאפיינים לוגיים כמו אלה שנמצאים בפריסות flexbox - למשל , startובמקום ו .endleftright

טפסים

  • נוספו טפסים צפים חדשים! קידמנו את דוגמת התוויות הצפות לרכיבי טופס נתמכים במלואם. עיין בדף התוויות הצפות החדש.

  • שְׁבִירָה מאוחדים רכיבי טופס מקוריים ומותאמים אישית. תיבות סימון, מכשירי רדיו, נבחרים וכניסות אחרות שהיו להן מחלקות מקוריות ומותאמות אישית ב-v4 אוחדו. כעת כמעט כל רכיבי הטופס שלנו מותאמים לחלוטין, רובם ללא צורך ב-HTML מותאם אישית.

    • .custom-checkהוא עכשיו .form-check.
    • .custom-check.custom-switchהוא עכשיו .form-check.form-switch.
    • .custom-selectהוא עכשיו .form-select.
    • .custom-fileוהוחלפו .form-fileבסגנונות מותאמים אישית על גבי .form-control.
    • .custom-rangeהוא עכשיו .form-range.
    • ירד יליד .form-control-fileו .form-control-range.

  • שְׁבִירָהירד .input-group-appendו .input-group-prepend. כעת אתה יכול פשוט להוסיף כפתורים וכילדים .input-group-textישירים של קבוצות הקלט.

  • רדיוס הגבול החסר הוותיק בקבוצת קלט עם באג משוב אימות תוקן לבסוף על ידי הוספת .has-validationמחלקה נוספת לקבוצות קלט עם אימות.

  • שְׁבִירָה הוסר שיעורי פריסה ספציפיים לטופס עבור מערכת הרשת שלנו. השתמש ברשת ובכלי השירות שלנו במקום .form-group, .form-row, או .form-inline.

  • שְׁבִירָהתוויות טופס דורשות כעת .form-label.

  • שְׁבִירָה .form-textכבר לא מגדיר display, מה שמאפשר לך ליצור טקסט עזרה מוטבע או לחסום כרצונך רק על ידי שינוי רכיב ה-HTML.

  • סמלי אימות אינם מוחלים עוד על <select>s עם multiple.

  • קבצי מקור Sass מסודרים מחדש תחת scss/forms/, כולל סגנונות קבוצת קלט.

רכיבים

  • ערכים מאוחדים paddingלהתראות, פירורי לחם, כרטיסים, תפריטים נפתחים, קבוצות רשימות, מודלים, חלונות קופצים וטיפים לכלים שיתבססו על $spacerהמשתנה שלנו. ראה #30564 .

אַקוֹרדִיוֹן

התראות

  • להתראות יש כעת דוגמאות עם סמלים .

  • הוסרו סגנונות מותאמים אישית עבור <hr>s בכל התראה מכיוון שהם כבר משתמשים ב- currentColor.

תגים

  • שְׁבִירָההורד את כל .badge-*מחלקות הצבע עבור כלי עזר ברקע (למשל, השתמש .bg-primaryבמקום .badge-primary).

  • שְׁבִירָהירד .badge-pill- השתמש בכלי .rounded-pillהשירות במקום זאת.

  • שְׁבִירָההוסרו סגנונות ריחוף ומיקוד עבור <a>ואלמנטים <button>.

  • ריפוד מוגבר של ברירת המחדל עבור תגים מ .25em/ .5emאל .35em/ .65em.

  • פישט את מראה ברירת המחדל של פירורי לחם על ידי הסרה padding, background-color, ו border-radius.

  • נוסף מאפיין מותאם אישית חדש של CSS --bs-breadcrumb-dividerלהתאמה אישית קלה ללא צורך בהידור מחדש של CSS.

כפתורים

  • שְׁבִירָה לחצני החלפה , עם תיבות סימון או מכשירי רדיו, אינם דורשים עוד JavaScript ויש להם סימון חדש. אנחנו כבר לא דורשים אלמנט עטיפה, מוסיפים.btn-checkל-<input>, ומצמידים אותו.btnלשיעורים כלשהם ב-<label>. ראה #30650 . המסמכים עבור זה עברו מדף הלחצנים שלנו למדור הטפסים החדש.

  • שְׁבִירָה ירד .btn-blockעבור שירותים. במקום להשתמש .btn-blockב- .btn, עטוף את הכפתורים שלך עם .d-gridכלי .gap-*עזר כדי לרווח אותם לפי הצורך. עבור לשיעורים רספונסיביים לקבלת שליטה רבה יותר עליהם. קרא את המסמכים לכמה דוגמאות.

  • עדכנו את שלנו button-variant()ואת button-outline-variant()המיקסים כדי לתמוך בפרמטרים נוספים.

  • כפתורים מעודכנים כדי להבטיח ניגודיות מוגברת במצבי ריחוף ופעילים.

  • לחצנים מושבתים יש כעת pointer-events: none;.

כַּרְטִיס

  • שְׁבִירָהירד .card-deckלטובת הרשת שלנו. עטפו את הקלפים שלכם במחלקות עמודות והוסיפו .row-cols-*מיכל אב כדי ליצור מחדש חפיסות קלפים (אבל עם שליטה רבה יותר על יישור תגובה).

  • שְׁבִירָהירד .card-columnsלטובת בנייה. ראה #28922 .

  • שְׁבִירָההחליף את .cardהאקורדיון המבוסס ברכיב אקורדיון חדש .

  • נוספה .carousel-darkגרסה חדשה עבור טקסט כהה, פקדים ומחוונים (מעולה עבור רקעים בהירים יותר).

  • הוחלפו סמלי שברון עבור בקרות קרוסלה ב-SVGs חדשים מבית Bootstrap Icons .

כפתור סגירה

  • שְׁבִירָהשונה .closeלשם .btn-closeלשם פחות כללי.

  • כפתורי סגירה משתמשים כעת ב- background-imageSVG (מוטבע) במקום &times;ב-HTML, מה שמאפשר התאמה אישית קלה יותר ללא צורך לגעת בסימון שלך.

  • נוספה .btn-close-whiteגרסה חדשה שמשתמשת filter: invert(1)לאפשר ביטול סמלים בניגודיות גבוהה יותר על רקע כהה יותר.

הִתמוֹטְטוּת

  • הוסר עיגון גלילה לאקורדיונים.

  • נוספה .dropdown-menu-darkוריאציה חדשה ומשתנים משויכים לתפריטים נפתחים כהים לפי דרישה.

  • נוסף משתנה חדש עבור $dropdown-padding-x.

  • הכהה את המחיצה הנפתחת לשיפור הניגודיות.

  • שְׁבִירָהכל האירועים עבור התפריט הנפתח מופעלים כעת בלחצן החלפת התפריט הנפתח ולאחר מכן מועברים לרכיב האב.

  • לתפריטים הנפתחים יש כעת data-bs-popper="static"תכונה מוגדרת כאשר המיקום של התפריט הנפתח הוא סטטי data-bs-popper="none"וכאשר התפריט הנפתח נמצא בסרגל הניווט. זה מתווסף על ידי ה-JavaScript שלנו ועוזר לנו להשתמש בסגנונות מיקום מותאמים אישית מבלי להפריע למיצוב של פופר.

  • שְׁבִירָהנשמטה flipאפשרות עבור תוסף נפתח לטובת תצורת Popper מקורית. כעת תוכל להשבית את התנהגות ההיפוך על ידי העברת מערך ריק fallbackPlacementsלאפשרות ב- Flip Modifier.

  • כעת ניתן ללחוץ על תפריטים נפתחים עם autoCloseאפשרות חדשה לטיפול בהתנהגות הסגירה האוטומטית . אתה יכול להשתמש באפשרות זו כדי לקבל את הלחיצה בתוך או מחוץ לתפריט הנפתח כדי להפוך אותו לאינטראקטיבי.

  • תפריטים נפתחים תומכים כעת ב- .dropdown-items עטוף ב- <li>s.

ג'מבוטרון

קבוצת רשימה

  • נוספו nullמשתנים חדשים עבור font-size, font-weight, color, :hover colorולמחלקה .nav-link.
  • שְׁבִירָהסרגלי Navbar דורשים כעת מיכל בתוכו (כדי לפשט באופן דרסטי את דרישות המרווח ו-CSS נדרש).

Offcanvas

דִפּוּף

  • לקישורי עימוד יש כעת התאמה אישית margin-leftאשר מעוגלים באופן דינמי בכל הפינות כשהם מופרדים זה מזה.

  • נוספו transitions לקישורי עימוד.

פופ-אוברים

  • שְׁבִירָההשם שונה .arrowלתבנית .popover-arrowברירת המחדל שלנו לפופ-אובר.

  • שונה שם whiteListהאפשרות ל allowList.

ספינרים

  • ספינרים מכבדים כעת prefers-reduced-motion: reduceעל ידי האטת האנימציות. ראה #31882 .

  • יישור אנכי משופר של הספינר.

טוסטים

  • כעת ניתן למקם טוסטים ב- a .toast-containerבעזרת כלי עזר למיקום .

  • משך ברירת המחדל של הטוסט שונה ל-5 שניות.

  • הוסר overflow: hiddenמטוסטים והוחלף ב- border-radiuss ראוי עם calc()פונקציות.

עצות כלים

  • שְׁבִירָההשם שונה .arrowלתבנית .tooltip-arrowברירת המחדל שלנו להסבר הכלים.

  • שְׁבִירָהערך ברירת המחדל עבור fallbackPlacementsמשתנה ['top', 'right', 'bottom', 'left']למיקום טוב יותר של רכיבי פופר.

  • שְׁבִירָהשונה שם whiteListהאפשרות ל allowList.

כלי עזר

  • שְׁבִירָהשונה שמות של מספר כלי שירות לשימוש בשמות מאפיינים לוגיים במקום בשמות כיוונים בתוספת תמיכה ב-RTL:

    • שונה שם .left-*ול- .right-*ו .start-*..end-*
    • שונה שם .float-leftול- .float-rightו .float-start..float-end
    • שונה שם .border-leftול- .border-rightו .border-start..border-end
    • שונה שם .rounded-leftול- .rounded-rightו .rounded-start..rounded-end
    • שונה שם .ml-*ול- .mr-*ו .ms-*..me-*
    • שונה שם .pl-*ול- .pr-*ו .ps-*..pe-*
    • שונה שם .text-leftול- .text-rightו .text-start..text-end

  • שְׁבִירָהשוליים שליליים מושבתים כברירת מחדל.

  • נוספה .bg-bodyמחלקה חדשה להגדרה מהירה <body>של הרקע של רכיבים נוספים.

  • נוספו כלי עזר חדשים למיקום עבור top, right, bottomו left. הערכים כוללים 0, 50%, 100%ועבור כל נכס.

  • נוספו כלי עזר חדשים .translate-middle-xלמרכז .translate-middle-yאופקית או אנכית אלמנטים במיקום מוחלט/קבוע.

  • נוספו border-widthכלי עזר חדשים .

  • שְׁבִירָהשונה שם .text-monospaceל .font-monospace.

  • שְׁבִירָההוסר .text-hideמכיוון שזו שיטה מיושנת להסתרת טקסט שאין להשתמש בו יותר.

  • נוספו כלי עזר .fs-*עבור כלי font-sizeעזר (עם RFS מופעל). אלה משתמשים באותו קנה מידה כמו כותרות ברירת המחדל של HTML (1-6, גדול עד קטן), וניתן לשנות אותם באמצעות מפת Sass.

  • שְׁבִירָהשמות .font-weight-*השירותים ששינו .fw-*עבור קוצר ועקביות.

  • שְׁבִירָהשמות .font-style-*השירותים ששינו .fst-*עבור קוצר ועקביות.

  • נוסף .d-gridלתצוגה וכלי gapעזר חדשים ( .gap) עבור פריסות CSS Grid ו-flexbox.

  • שְׁבִירָההוסר .rounded-smו rounded-lg, והציג סולם חדש של כיתות, .rounded-0ל .rounded-3. ראה #31687 .

  • נוספו line-heightכלי עזר חדשים: .lh-1, .lh-sm, .lh-baseו .lh-lg. ראה כאן .

  • העבר את .d-noneכלי השירות ב-CSS שלנו כדי לתת לו משקל רב יותר על פני כלי עזר אחרים לתצוגה.

  • הרחיב את .visually-hidden-focusableהעזר לעבודה גם על מכולות, באמצעות :focus-within.

עוזרים

  • שְׁבִירָה שמות עוזרי הטמעה רספונסיביים שונו לעוזרי יחס עם שמות מחלקות חדשים והתנהגויות משופרות, כמו גם משתנה CSS מועיל.

    • שמם של המחלקות שונה byליחס xרוחב-גובה. לדוגמה, .ratio-16by9הוא עכשיו .ratio-16x9.
    • הורדנו את .embed-responsive-itemבורר קבוצת ה- ו-אלמנטים לטובת .ratio > *בורר פשוט יותר. אין צורך יותר במחלקה, וה-Ration Helper עובד כעת עם כל אלמנט HTML.
    • השם של $embed-responsive-aspect-ratiosמפת Sass שונה ל- $aspect-ratiosוערכיה פושטו כדי לכלול את שם המחלקה והאחוז בתור key: valueהזוג.
    • משתני CSS נוצרים כעת ונכללים עבור כל ערך במפת Sass. שנה את --bs-aspect-ratioהמשתנה ב- .ratioכדי ליצור כל יחס רוחב-גובה מותאם אישית .

  • שְׁבִירָה כיתות "קורא מסך" הן כעת כיתות "מוסתרות חזותית" .

    • שינה את קובץ Sass מ scss/helpers/_screenreaders.scssלscss/helpers/_visually-hidden.scss
    • שונה שם .sr-onlyואל .sr-only-focusableו.visually-hidden.visually-hidden-focusable
    • שונה שם ומיקסינס ל- sr-only()ו .sr-only-focusable()visually-hidden()visually-hidden-focusable()

  • bootstrap-utilities.cssכולל כעת גם את העוזרים שלנו. אין צורך לייבא עוזרים בבנייה מותאמות אישית יותר.

JavaScript

  • הורידו את התלות ב-jQuery ושכתבו תוספים להיות ב-JavaScript רגיל.

  • שְׁבִירָהתכונות הנתונים עבור כל התוספים של JavaScript מחולקים כעת ברווחי שמות כדי לעזור להבחין בין פונקציונליות Bootstrap לבין צדדים שלישיים ומהקוד שלך. לדוגמה, אנו משתמשים data-bs-toggleבמקום data-toggle.

  • כל התוספים יכולים כעת לקבל בורר CSS כארגומנט הראשון. אתה יכול להעביר אלמנט DOM או כל בורר CSS חוקי כדי ליצור מופע חדש של הפלאגין:

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

  • popperConfigניתן להעביר כפונקציה שמקבלת את תצורת ברירת המחדל של Popper של Bootstrap כארגומנט, כך שתוכל למזג את תצורת ברירת המחדל הזו בדרכך. חל על תפריטים נפתחים, חלונות קופצים וטיפים לכלים.

  • ערך ברירת המחדל עבור fallbackPlacementsמשתנה ['top', 'right', 'bottom', 'left']למיקום טוב יותר של רכיבי Popper. חל על תפריטים נפתחים, חלונות קופצים וטיפים לכלים.

  • קו תחתון הוסר משיטות סטטיות ציבוריות כמו _getInstance()→ getInstance().