עובר לגרסה 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-shadow
mixins מאפשרים כעת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 -
שְׁבִירָה
<hr>
כעת משתמשים ברכיביםheight
במקוםborder
כדי לתמוך טוב יותרsize
בתכונה. זה גם מאפשר שימוש בכלי ריפוד ליצירת חוצצים עבים יותר (למשל,<hr class="py-1">
). -
padding-left
אפס את ברירת המחדל האופקי מופעל<ul>
ורכיבים<ol>
מברירת המחדל של הדפדפן40px
ל2rem
. -
נוסף
$enable-smooth-scroll
, אשר חלscroll-behavior: smooth
באופן גלובלי - למעט משתמשים המבקשים תנועה מופחתת באמצעותprefers-reduced-motion
שאילתת מדיה. ראה #31877
RTL
- שמם של משתנים, כלי עזר ומיקסינים ספציפיים לכיוון אופקי, כולם שונו לשימוש במאפיינים לוגיים כמו אלה שנמצאים בפריסות flexbox - למשל ,
start
ובמקום ו .end
left
right
טפסים
-
נוספו טפסים צפים חדשים! קידמנו את דוגמת התוויות הצפות לרכיבי טופס נתמכים במלואם. עיין בדף התוויות הצפות החדש.
-
שְׁבִירָה מאוחדים רכיבי טופס מקוריים ומותאמים אישית. תיבות סימון, מכשירי רדיו, נבחרים וכניסות אחרות שהיו להן מחלקות מקוריות ומותאמות אישית ב-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-image
SVG (מוטבע) במקום×
ב-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-item
s עטוף ב-<li>
s.
ג'מבוטרון
- שְׁבִירָההפיל את רכיב הג'מבוטרון מכיוון שניתן לשכפל אותו עם כלי עזר. ראה את הדוגמה החדשה של Jumbotron שלנו להדגמה.
קבוצת רשימה
- נוסף
.list-group-numbered
משנה חדש לקבוצות רשימה.
ניווטים וכרטיסיות
- נוספו
null
משתנים חדשים עבורfont-size
,font-weight
,color
,:hover
color
ולמחלקה.nav-link
.
Navbars
- שְׁבִירָהסרגלי Navbar דורשים כעת מיכל בתוכו (כדי לפשט באופן דרסטי את דרישות המרווח ו-CSS נדרש).
Offcanvas
- הוסיף את רכיב offcanvas החדש .
דִפּוּף
-
לקישורי עימוד יש כעת התאמה אישית
margin-left
אשר מעוגלים באופן דינמי בכל הפינות כשהם מופרדים זה מזה. -
נוספו
transition
s לקישורי עימוד.
פופ-אוברים
-
שְׁבִירָההשם שונה
.arrow
לתבנית.popover-arrow
ברירת המחדל שלנו לפופ-אובר. -
שונה שם
whiteList
האפשרות לallowList
.
ספינרים
-
ספינרים מכבדים כעת
prefers-reduced-motion: reduce
על ידי האטת האנימציות. ראה #31882 . -
יישור אנכי משופר של הספינר.
טוסטים
-
כעת ניתן למקם טוסטים ב- a
.toast-container
בעזרת כלי עזר למיקום . -
משך ברירת המחדל של הטוסט שונה ל-5 שניות.
-
הוסר
overflow: hidden
מטוסטים והוחלף ב-border-radius
s ראוי עם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
אופקית או אנכית אלמנטים במיקום מוחלט/קבוע. -
Added new
border-width
utilities. -
Breaking Renamed
.text-monospace
to.font-monospace
. -
Breaking Removed
.text-hide
as it’s an antiquated method for hiding text that shouldn’t be used anymore. -
Added
.fs-*
utilities forfont-size
utilities (with RFS enabled). These use the same scale as HTML’s default headings (1-6, large to small), and can be modified via Sass map. -
Breaking Renamed
.font-weight-*
utilities as.fw-*
for brevity and consistency. -
Breaking Renamed
.font-style-*
utilities as.fst-*
for brevity and consistency. -
Added
.d-grid
to display utilities and newgap
utilities (.gap
) for CSS Grid and flexbox layouts. -
Breaking Removed
.rounded-sm
androunded-lg
, and introduced a new scale of classes,.rounded-0
to.rounded-3
. See #31687. -
Added new
line-height
utilities:.lh-1
,.lh-sm
,.lh-base
and.lh-lg
. See here. -
Moved the
.d-none
utility in our CSS to give it more weight over other display utilities. -
Extended the
.visually-hidden-focusable
helper to also work on containers, using:focus-within
.
Helpers
-
Breaking Responsive embed helpers have been renamed to ratio helpers with new class names and improved behaviors, as well as a helpful CSS variable.
- Classes have been renamed to change
by
tox
in the aspect ratio. For example,.ratio-16by9
is now.ratio-16x9
. - We’ve dropped the
.embed-responsive-item
and element group selector in favor of a simpler.ratio > *
selector. No more class is needed, and the ratio helper now works with any HTML element. - The
$embed-responsive-aspect-ratios
Sass map has been renamed to$aspect-ratios
and its values have been simplified to include the class name and the percentage as thekey: value
pair. - CSS variables are now generated and included for each value in the Sass map. Modify the
--bs-aspect-ratio
variable on the.ratio
to create any custom aspect ratio.
- Classes have been renamed to change
-
Breaking “Screen reader” classes are now “visually hidden” classes.
- Changed the Sass file from
scss/helpers/_screenreaders.scss
toscss/helpers/_visually-hidden.scss
- Renamed
.sr-only
and.sr-only-focusable
to.visually-hidden
and.visually-hidden-focusable
- Renamed
sr-only()
andsr-only-focusable()
mixins tovisually-hidden()
andvisually-hidden-focusable()
.
- Changed the Sass file from
-
bootstrap-utilities.css
now also includes our helpers. Helpers don’t need to be imported in custom builds anymore.
JavaScript
-
Dropped jQuery dependency and rewrote plugins to be in regular JavaScript.
-
Breaking Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use
data-bs-toggle
instead ofdata-toggle
. -
All plugins can now accept a CSS selector as the first argument. You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin:
var modal = new bootstrap.Modal('#myModal') var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
-
popperConfig
can be passed as a function that accepts the Bootstrap’s default Popper config as an argument, so that you can merge this default configuration in your way. Applies to dropdowns, popovers, and tooltips. -
The default value for the
fallbackPlacements
is changed to['top', 'right', 'bottom', 'left']
for better placement of Popper elements. Applies to dropdowns, popovers, and tooltips. -
קו תחתון הוסר משיטות סטטיות ציבוריות כמו
_getInstance()
→getInstance()
.