עובר לגרסה 5

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

בעמוד זה

v5.2.0

עיצוב מרענן

Bootstrap v5.2.0 כולל עדכון עיצובי עדין עבור קומץ רכיבים ומאפיינים ברחבי הפרויקט, בעיקר באמצעות border-radiusערכים מעודנים בלחצנים ופקדי טופס . התיעוד שלנו עודכן גם עם דף בית חדש, פריסת מסמכים פשוטה יותר שאינה מכווצת עוד חלקים בסרגל הצד, ודוגמאות בולטות יותר של אייקוני Bootstrap .

משתני CSS נוספים

עדכנו את כל הרכיבים שלנו לשימוש במשתני CSS. בעוד ש-Sass עדיין עומד בבסיס הכל, כל רכיב עודכן כך שיכלול משתני CSS במחלקות הבסיס של הרכיבים (למשל, .btn), מה שמאפשר התאמה אישית יותר בזמן אמת של Bootstrap. במהדורות הבאות, נמשיך להרחיב את השימוש שלנו במשתני CSS לתוך הפריסה, הטפסים, המסייעים וכלי השירות שלנו. קרא עוד על משתני CSS בכל רכיב בדפי התיעוד שלהם.

השימוש במשתנה ה-CSS שלנו יהיה חלקי במידה מסוימת עד Bootstrap 6. למרות שנשמח ליישם אותם באופן מלא בכל רחבי הלוח, הם מסתכנים לגרום לשינויים שבורים. לדוגמה, הגדרה $alert-border-width: var(--bs-border-width)בקוד המקור שלנו שוברת Sass פוטנציאלי בקוד שלך אם עשית זאת $alert-border-width * 2מסיבה כלשהי.

ככזה, בכל מקום אפשרי, נמשיך לדחוף לעבר משתני CSS נוספים, אך שים לב שהיישום שלנו עשוי להיות מוגבל מעט בגרסה 5.

חָדָשׁ`_maps.scss`

Bootstrap v5.2.0 הציג קובץ Sass חדש עם _maps.scss. זה שולף כמה מפות של Sass _variables.scssכדי לתקן בעיה שבה עדכונים למפה מקורית לא הוחלו על מפות משניות שמרחיבות אותן. לדוגמה, עדכונים של $theme-colorsלא הוחלו על מפות ערכות נושא אחרות שהסתמכו על $theme-colors, מה ששברו את זרימות העבודה העיקריות של התאמה אישית. בקיצור, ל-Sass יש מגבלה שבה ברגע שנעשה שימוש במשתנה ברירת מחדל או מפה , לא ניתן לעדכן אותם. יש חסרון דומה במשתני CSS כאשר הם משמשים לחיבור משתני CSS אחרים.

זו הסיבה שהתאמות אישיות משתנות ב-Bootstrap צריכות לבוא אחרי @import "functions", אבל לפני @import "variables"ושאר ערימת הייבוא שלנו. אותו דבר חל על מפות Sass - עליך לעקוף את ברירות המחדל לפני שהם מתרגלים. המפות הבאות הועברו למפות החדשות _maps.scss:

$theme-colors-rgb
$utilities-colors
$utilities-text
$utilities-text-colors
$utilities-bg
$utilities-bg-colors
$negative-spacers
$gutters

בניית ה- Bootstrap CSS המותאמים אישית שלך אמורה כעת להיראות בערך כך עם ייבוא מפות נפרד.

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

כלי עזר חדשים

font-weightכלי עזר מורחבים לכלול .fw-semiboldעבור גופנים בולטים למחצה.
border-radiusכלי עזר מורחבים כדי לכלול שני גדלים חדשים, .rounded-4וכן .rounded-5, לאפשרויות נוספות.

שינויים נוספים

הוצגה $enable-container-classesאפשרות חדשה. - כעת בעת ההצטרפות לפריסת ה-CSS Grid הניסיונית, .container-*המחלקות עדיין יקומפלו, אלא אם אפשרות זו מוגדרת ל- false. מיכלים גם שומרים כעת על ערכי המרזב שלהם.
לרכיב Offcanvas יש כעת וריאציות רספונסיביות . המחלקה המקורית .offcanvasנשארת ללא שינוי - היא מסתירה תוכן בכל נקודות התצוגה. כדי להפוך אותו לרספונסיבי, שנה את .offcanvasהמחלקה הזו לכל .offcanvas-{sm|md|lg|xl|xxl}מחלקה.
מחיצות שולחן עבות יותר ניתנות כעת להצטרפות. — הסרנו את הגבול העבה יותר והקשה יותר לעקוף בין קבוצות טבלאות והעברנו אותו למחלקה אופציונלית שתוכל להחיל, .table-group-divider. עיין במסמכי הטבלה לדוגמא.
Scrollspy נכתב מחדש לשימוש ב-Intersection Observer API , מה שאומר שאינך צריך עוד עטיפות אב יחסיות, מבטלoffsetאת התצורה ועוד. חפש שיישומי Scrollspy שלך יהיו מדויקים ועקביים יותר בהדגשת הניווט שלהם.
Popovers וטיפים כלים משתמשים כעת במשתני CSS. כמה משתני CSS עודכנו מעמיתיהם Sass כדי לצמצם את מספר המשתנים. כתוצאה מכך, שלושה משתנים הוצאו משימוש במהדורה זו: $popover-arrow-color, $popover-arrow-outer-color, ו $tooltip-arrow-color.
נוספו .text-bg-{color}עוזרים חדשים. במקום להגדיר אינדיבידואלים .text-*וכלי .bg-*עזר, כעת אתה יכול להשתמש בעזרים כדי להגדיר.text-bg-* עם background-colorחזית מנוגדת color.
הוספת .form-check-reverseשינוי כדי להפוך את סדר התוויות ותיבות הסימון/מכשירי הרדיו המשויכים.
נוספה תמיכה בעמודות פסים לטבלאות דרך .table-striped-columnsהמחלקה החדשה.

לרשימה מלאה של שינויים, עיין בפרויקט v5.2.0 ב-GitHub .

v5.1.0

נוספה תמיכה ניסיונית לפריסת CSS Grid . - זוהי עבודה בתהליך, והיא עדיין לא מוכנה לשימוש בייצור, אבל אתה יכול להצטרף לתכונה החדשה דרך Sass. כדי להפעיל אותו, השבת את רשת ברירת המחדל, על ידי הגדרה $enable-grid-classes: falseוהפעל את רשת ה-CSS על ידי הגדרה $enable-cssgrid: true.
סרגלי ניווט מעודכנים כדי לתמוך מחוץ לקנבס. - הוסף מגירות offcanvas בכל ניווט עם .navbar-expand-*המחלקות הרספונסיביות וקצת סימון offcanvas.
נוסף רכיב מציין מיקום חדש . - הרכיב החדש ביותר שלנו, דרך לספק חסימות זמניות במקום תוכן אמיתי כדי לעזור לציין שמשהו עדיין נטען באתר או באפליקציה שלך.
הפלאגין כיווץ תומך כעת בכיווסה אופקית . — הוסף .collapse-horizontalלשלך .collapseכדי לכווץ את ה- widthבמקום את ה- height. הימנע מצביעה מחדש של הדפדפן על ידי הגדרת min-heightאו height.
נוספו עוזרי ערימה וכלל אנכיים חדשים. - החל במהירות מאפייני flexbox מרובים כדי ליצור במהירות פריסות מותאמות אישית עם ערימות . בחר מתוך ערימות אופקיות ( .hstack) ואנכיות ( ). .vstackהוסף חוצצים אנכיים הדומים <hr>לאלמנטים בעזרת העוזרים החדשים.vr .
נוספו :rootמשתני CSS גלובליים חדשים. - הוסיפו כמה משתני CSS חדשים :rootלרמה לשליטה <body>בסגנונות. עוד עובדים, כולל בכל כלי השירות והרכיבים שלנו, אך לעת עתה קרא את משתני ה-CSS בקטע התאמה אישית .
שיפצו כלי עזר לצבע ורקע לשימוש במשתני CSS, והוסיפו כלי עזר חדשים לאטימות טקסט ואטימות רקע . - .text-* וכלי .bg-*עזר בנויים כעת עם משתני CSS rgba()וערכי צבע, המאפשרים לך להתאים בקלות כל כלי עזר עם כלי עזר חדשים לאטימות.
נוספו דוגמאות חדשות המבוססות על קטעי קוד כדי להראות כיצד להתאים אישית את הרכיבים שלנו. - משוך מוכן לשימוש ברכיבים מותאמים אישית ודפוסי עיצוב נפוצים אחרים עם דוגמאות Snippets החדשות שלנו . כולל כותרות תחתונות , תפריטים נפתחים , קבוצות רשימות ומודרים .
הוסרו סגנונות מיקום שאינם בשימוש מפופ-אובר וטיפים כלים שכן אלה מטופלים אך ורק על ידי Popper. $tooltip-marginהוצא משימוש והוגדר nullבתהליך.

רוצה מידע נוסף? קרא את פוסט הבלוג v5.1.0.

שלום! שינויים במהדורה העיקרית הראשונה שלנו של Bootstrap 5, v5.0.0, מתועדים להלן. הם אינם משקפים את השינויים הנוספים המוצגים למעלה.

תלות

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

תמיכה בדפדפן

הורד את 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
שְׁבִירָה <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ובמקום ו .endleftright

טפסים

נוספו טפסים צפים חדשים! קידמנו את דוגמת התוויות הצפות לרכיבי טופס נתמכים במלואם. עיין בדף התוויות הצפות החדש.
שְׁבִירָה מאוחדים רכיבי טופס מקוריים ומותאמים אישית. תיבות סימון, מכשירי רדיו, נבחרים וכניסות אחרות שהיו להן מחלקות מקוריות ומותאמות אישית ב-v4 אוחדו. כעת כמעט כל רכיבי הטופס שלנו מותאמים לחלוטין, רובם ללא צורך ב-HTML מותאם אישית.
- .custom-control.custom-checkboxהוא עכשיו .form-check.
- .custom-control.custom-custom-radioהוא עכשיו .form-check.
- .custom-control.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.
כבר לא נעשה שימוש בפקדי טפסים קבועים heightבמידת האפשר, אלא נדחה min-heightכדי לשפר התאמה אישית ותאימות עם רכיבים אחרים.
סמלי אימות אינם מוחלים עוד על <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 (מוטבע) במקום ×ב-HTML, מה שמאפשר התאמה אישית קלה יותר ללא צורך לגעת בסימון שלך.
נוספה .btn-close-whiteגרסה חדשה שמשתמשת filter: invert(1)לאפשר ביטול סמלים בניגודיות גבוהה יותר על רקע כהה יותר.

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

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

תפריטים נפתחים

נוספה .dropdown-menu-darkוריאציה חדשה ומשתנים משויכים לתפריטים נפתחים כהים לפי דרישה.
נוסף משתנה חדש עבור $dropdown-padding-x.
הכהה את המחיצה הנפתחת לשיפור הניגודיות.
שְׁבִירָהכל האירועים עבור התפריט הנפתח מופעלים כעת בלחצן החלפת התפריט הנפתח ולאחר מכן מועברים לרכיב האב.
לתפריטים הנפתחים יש כעת data-bs-popper="static"תכונה מוגדרת כאשר המיקום של התפריט הנפתח הוא סטטי, או כאשר התפריט הנפתח נמצא בסרגל הניווט. זה נוסף על ידי ה-JavaScript שלנו ועוזר לנו להשתמש בסגנונות מיקום מותאמים אישית מבלי להפריע למיקום של פופר.
שְׁבִירָהנשמטה flipאפשרות עבור תוסף נפתח לטובת תצורת Popper מקורית. כעת תוכל להשבית את התנהגות ההיפוך על ידי העברת מערך ריק fallbackPlacementsלאפשרות ב- Flip Modifier.
כעת ניתן ללחוץ על תפריטים נפתחים עם autoCloseאפשרות חדשה לטיפול בהתנהגות הסגירה האוטומטית . אתה יכול להשתמש באפשרות זו כדי לקבל את הלחיצה בתוך או מחוץ לתפריט הנפתח כדי להפוך אותו לאינטראקטיבי.
תפריטים נפתחים תומכים כעת ב- .dropdown-items עטוף ב- <li>s.

ג'מבוטרון

שְׁבִירָההפיל את רכיב הג'מבוטרון מכיוון שניתן לשכפל אותו עם כלי עזר. ראה את הדוגמה החדשה של Jumbotron שלנו להדגמה.

קבוצת רשימה

נוסף .list-group-numberedמשנה חדש לקבוצות רשימה.

ניווטים וכרטיסיות

נוספו nullמשתנים חדשים עבור font-size, font-weight, color, :hover colorולמחלקה .nav-link.

Navbars

שְׁבִירָהסרגלי Navbar דורשים כעת מיכל בתוכו (כדי לפשט באופן דרסטי את דרישות המרווח ו-CSS נדרש).
שְׁבִירָה.activeלא ניתן עוד להחיל את המחלקה על .nav-items, יש להחיל אותה ישירות על .nav-links.

Offcanvas

הוסיף את רכיב 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 חוקי כדי ליצור מופע חדש של הפלאגין:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigניתן להעביר כפונקציה שמקבלת את תצורת ברירת המחדל של Popper של Bootstrap כארגומנט, כך שתוכל למזג את תצורת ברירת המחדל הזו בדרכך. חל על תפריטים נפתחים, חלונות קופצים וטיפים לכלים.
ערך ברירת המחדל עבור fallbackPlacementsמשתנה ['top', 'right', 'bottom', 'left']למיקום טוב יותר ש�� רכיבי Popper. חל על תפריטים נפתחים, חלונות קופצים וטיפים לכלים.
קו תחתון הוסר משיטות סטטיות ציבוריות כמו _getInstance()→ getInstance().