האָפּקען צו הויפּט אינהאַלט האָפּקען צו דאָקס נאַוויגאַציע
Check
in English

מיגרייטינג צו v5

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

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

v5.2.0

דערקוויקט פּלאַן

Bootstrap v5.2.0 פֿעיִקייטן אַ סאַטאַל פּלאַן דערהייַנטיקן פֿאַר אַ האַנדפול פון קאַמפּאָונאַנץ און פּראָפּערטיעס איבער די פּרויעקט, דער הויפּט דורך ראַפינירט border-radiusוואַלועס אויף קנעפּלעך און פאָרעם קאָנטראָלס . אונדזער דאַקיומענטיישאַן איז אויך דערהייַנטיקט מיט אַ נייַע האָמעפּאַגע, סימפּלער דאָקומענטן אויסלייג וואָס ניט מער קאַלאַפּסיז סעקשאַנז פון די סיידבאַר און מער באַוווסט ביישפילן פון Bootstrap Icons .

מער CSS וועריאַבאַלז

מיר האָבן דערהייַנטיקט אַלע אונדזער קאַמפּאָונאַנץ צו נוצן CSS וועריאַבאַלז. בשעת Sass נאָך אַנדערפּינס אַלץ, יעדער קאָמפּאָנענט איז דערהייַנטיקט צו אַרייַננעמען CSS וועריאַבאַלז אויף די קאָמפּאָנענט באַזע קלאסן (למשל, .btn), אַלאַוינג פֿאַר מער פאַקטיש-צייט קוסטאָמיזאַטיאָן פון באָאָצטראַפּ. אין סאַבסאַקוואַנט ריליסיז, מיר וועלן פאָרזעצן צו יקספּאַנד אונדזער נוצן פון CSS וועריאַבאַלז אין אונדזער אויסלייג, פארמען, העלפּערס און יוטילאַטיז. לייענען מער וועגן CSS וועריאַבאַלז אין יעדער קאָמפּאָנענט אויף זייער ריספּעקטיוו דאַקיומענטיישאַן בלעטער.

אונדזער CSS וועריאַבאַל באַניץ וועט זיין עפּעס דערענדיקט ביז באָאָצטראַפּ 6. כאָטש מיר וואָלט ווי צו גאָר ינסטרומענט די איבער די ברעט, זיי לויפן די ריזיקירן פון קאָזינג ברייקינג ענדערונגען. פֿאַר בייַשפּיל, באַשטעטיקן $alert-border-width: var(--bs-border-width)אין אונדזער מקור קאָד ברייקס פּאָטענציעל סאַס אין דיין אייגן קאָד אויב איר טאָן $alert-border-width * 2פֿאַר עטלעכע סיבה.

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

ניו_maps.scss

Bootstrap v5.2.0 ינטראָודוסט אַ נייַע Sass טעקע מיט _maps.scss. עס פּולז אויס עטלעכע סאַס מאַפּס _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 גריד אויסלייג, .container-*קלאסן וועט נאָך זיין קאַמפּיילד, סייַדן די אָפּציע איז באַשטימט צו false. קאַנטיינערז אויך איצט האַלטן זייער רוץ וואַלועס.

  • אָפקאַנוואַס קאָמפּאָנענט איצט האט אָפּרופיק ווערייישאַנז . דער אָריגינעל .offcanvasקלאַס בלייבט אַנטשיינדזשד - עס כיידז אינהאַלט אין אַלע וויופּאָרץ. צו מאַכן עס אָפּרופיק, טוישן די .offcanvasקלאַס צו קיין .offcanvas-{sm|md|lg|xl|xxl}קלאַס.

  • טיקער טיש דיווידערס זענען איצט אַפּט-אין. — מיר האבן אראפגענומען די געדיכטע און שװערער צו איבעררײםן גרעניץ צװישן טיש־גרופן און זי אריבערגעפארן אין אן אפציאנעלער קלאס, װאס איר קענט צולייגן, .table-group-divider. זען די טיש דאָקס פֿאַר אַ בייַשפּיל.

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

  • פּאָפּאָווערס און מכשירים איצט נוצן CSS וועריאַבאַלז. עטלעכע CSS וועריאַבאַלז זענען דערהייַנטיקט פֿון זייער סאַסס קאַונערפּאַרץ צו רעדוצירן די נומער פון וועריאַבאַלז. ווי אַ רעזולטאַט, דריי וועריאַבאַלז זענען דיפּרישיייטיד אין דעם מעלדונג: $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 גריד אויסלייג . - דאָס איז אַ אַרבעט אין פּראָגרעס און איז נאָך נישט גרייט פֿאַר פּראָדוקציע נוצן, אָבער איר קענען אַפּט אין די נייַע שטריך דורך Sass. צו געבן עס, דיסייבאַל די פעליקייַט גריד דורך באַשטעטיקן $enable-grid-classes: falseאון געבן די CSS גריד דורך באַשטעטיקן $enable-cssgrid: true.

  • דערהייַנטיקט נאַוובאַרס צו שטיצן אָפקאַנוואַס. - לייג אָפקאַנוואַס גאַטקעס אין קיין נאַוובאַר מיט די אָפּרופיק .navbar-expand-*קלאסן און עטלעכע אָפקאַנוואַס מאַרקאַפּ.

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

  • ייַנבראָך פּלוגין איצט שטיצט האָריזאָנטאַל קאַלאַפּסינג . - לייג .collapse-horizontalצו דיין .collapseצו ייַנבראָך די widthאַנשטאָט פון די height. ויסמיידן בלעטערער ריפּיינטינג דורך באַשטעטיקן אַ min-heightאָדער height.

  • צוגעגעבן נייַ אָנלייגן און ווערטיקאַל הערשן העלפּערס. - געשווינד צולייגן קייפל פלעקסבאָקס פּראָפּערטיעס צו געשווינד מאַכן מנהג לייאַוץ מיט סטאַקס . קלייַבן פון האָריזאָנטאַל ( .hstack) און ווערטיקאַל ( .vstack) סטאַקס. לייג ווערטיקאַל דיווידערס ענלעך צו <hr>עלעמענטן מיט די נייַע .vrהעלפּערס .

  • צוגעגעבן נייַ גלאבאלע :rootCSS וועריאַבאַלז. - צוגעגעבן עטלעכע נייַע CSS וועריאַבאַלז צו די :rootמדרגה פֿאַר קאַנטראָולינג <body>סטיילז. מער זענען אין די אַרבעט, אַרייַנגערעכנט איבער אונדזער יוטילאַטיז און קאַמפּאָונאַנץ, אָבער איצט לייענען אַרויף CSS וועריאַבאַלז אין די קאַסטאַמייז אָפּטיילונג .

  • אָוווערכאָלעד קאָליר און הינטערגרונט יוטילאַטיז צו נוצן CSS וועריאַבאַלז, און צוגעגעבן נייַ טעקסט אָופּאַסאַטי און הינטערגרונט אָופּאַסאַטי יוטילאַטיז. - .text-* און .bg-*יוטילאַטיז זענען איצט געבויט מיט CSS וועריאַבאַלז און rgba()קאָליר וואַלועס, אַלאַוינג איר צו לייכט קאַסטאַמייז קיין נוצן מיט נייַע אָופּאַסאַטי יוטילאַטיז.

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

  • אַוועקגענומען אַניוזד פּאַזישאַנינג סטיילז פון פּאָפּאָווערס און מכשירים, ווייַל זיי זענען כאַנדאַלד בלויז דורך פּאָפּער. $tooltip-marginאיז דיפּרישיייטיד און באַשטימט nullאין דעם פּראָצעס.

ווילן מער אינפֿאָרמאַציע? לייענען די v5.1.0 בלאָג פּאָסטן.

א גוטן! ענדערונגען צו אונדזער ערשטער הויפּט מעלדונג פון Bootstrap 5, v5.0.0, זענען דאַקיומענטאַד אונטן. זיי פאַרטראַכטנ זיך נישט די נאָך ענדערונגען געוויזן אויבן.

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

  • פארווארפן jQuery.
  • אַפּגריידיד פון פּאָפּער וו1.קס צו פּאָפּער וו2.קס.
  • ריפּלייסט Libsass מיט Dart Sass ווי אונדזער Sass קאַמפּיילער געגעבן Libsass איז געווען דיפּרישיייטיד.
  • מיגרייטיד פון Jekyll צו הוגאָ פֿאַר בויען אונדזער דאַקיומענטיישאַן

בלעטערער שטיצן

  • דראַפּט Internet Explorer 10 און 11
  • דראַפּט Microsoft Edge <16 (לעגאַסי עדזש)
  • דראַפּט פירעפאָקס <60
  • דראַפּט סאַפאַרי <12
  • דראַפּט יאָס סאַפאַרי <12
  • דראַפּט קראָום <60

דאַקיומענטיישאַן ענדערונגען

  • רידיזיינד האָמעפּאַגע, דאָקומענטן אויסלייג און פוטער.
  • צוגעגעבן נייַ פּעקל פירער .
  • צוגעלייגט נייַ קאַסטאַמייז אָפּטיילונג , ריפּלייסינג די טהעמינג בלאַט פון V4 , מיט נייַע דעטאַילס אויף Sass, גלאבאלע קאַנפיגיעריישאַן אָפּציעס, קאָליר סקימז, CSS וועריאַבאַלז, און מער.
  • ריאָרגאַנייזד אַלע פאָרעם דאַקיומענטיישאַן אין אַ נייַע פאָרמס אָפּטיילונג , און צעטיילט די אינהאַלט אין מער פאָוקיסט בלעטער.
  • סימילאַרלי, דערהייַנטיקט די אויסלייג אָפּטיילונג , צו מאַכן די גריד אינהאַלט מער קלאר.
  • ריניימד "נאַווס" קאָמפּאָנענט בלאַט צו "נאַווס & טאַבס".
  • ריניימד "טשעקס" בלאַט צו "טשעקס & ראַדיאָס".
  • רידיזיינד די נאַוובאַר און צוגעגעבן אַ נייַע סובנאַוו צו מאַכן עס גרינגער צו באַקומען אַרום אונדזער ווערסיעס פון זייטלעך און דאָקומענטן.
  • צוגעלייגט נייַ קלאַוויאַטור דורכוועג פֿאַר די זוכן פעלד: Ctrl + /.

סאַס

  • מיר האָבן דיטשד די פעליקייַט סאַסס מאַפּע מערדזשיז צו מאַכן עס גרינגער צו באַזייַטיקן יבעריק וואַלועס. האַלטן אין מיינונג אַז איר איצט האָבן צו דעפינירן אַלע וואַלועס אין די 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מיקסינס איצט לאָזן nullוואַלועס און פאַלן noneפון קייפל אַרגומענטן. זען #30394 .

  • די border-radius()מיקסין איצט האט אַ פעליקייַט ווערט.

קאָליר סיסטעם

  • די קאָליר סיסטעם וואָס געארבעט מיט color-level()און $theme-color-intervalאיז אַוועקגענומען אין טויווע פון ​​אַ נייַ קאָליר סיסטעם. אַלע lighten()און darken()פאַנגקשאַנז אין אונדזער קאָדעבאַסע זענען ריפּלייסט דורך tint-color()און shade-color(). די פאַנגקשאַנז וועט מישן די קאָליר מיט ווייַס אָדער שוואַרץ אַנשטאָט פון טשאַנגינג זייַן לייטנאַס דורך אַ פאַרפעסטיקט סומע. די shift-color()קאָלירן וועט זיין טינט אָדער שאָטן דיפּענדינג אויף צי די וואָג פּאַראַמעטער איז positive אָדער נעגאַטיוו. זען #30622 פֿאַר מער דעטאַילס.

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

  • ימפּרוווד קאָליר קאַנטראַסט. באַמפּט קאָליר קאַנטראַסט פאַרהעלטעניש פון 3: 1 צו 4.5: 1 און דערהייַנטיקט בלוי, גרין, ציאַן און ראָזעווע פארבן צו ענשור WCAG 2.1 אַאַ קאַנטראַסט. אויך געביטן אונדזער קאָליר קאַנטראַסט קאָליר פון $gray-900צו $black.

  • צו שטיצן אונדזער קאָליר סיסטעם, מיר האָבן צוגעלייגט נייַע מנהג tint-color()און shade-color()פאַנגקשאַנז צו מישן אונדזער פארבן אַפּראָופּרייטלי.

גריד דערהייַנטיקונגען

  • ניו ברייקפּאָינט! צוגעגעבן נייַ xxlברייקפּוינט פֿאַר 1400pxאון אַרויף. קיין ענדערונגען צו אַלע אנדערע ברעאַקפּאָינץ.

  • ימפּרוווד גאַטערז. גוטטערס זענען איצט באַשטימט אין רעמס, און זענען שמאָלער ווי וו4 ( 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סאַס מאַפּע. אויך אַוועקגענומען די יחיד $display-*-weightוועריאַבאַלז פֿאַר אַ איין $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

  • האָריזאָנטאַל ריכטונג ספּעציפיש וועריאַבאַלז, יוטילאַטיז און מיקסינס האָבן שוין ריניימד צו נוצן לאַדזשיקאַל פּראָפּערטיעס ווי די געפֿונען אין פלעקסבאָקס לייאַוץ - למשל, startאון endאין פּלאַץ פון leftאון right.

Forms

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

  • ברייקינג קאָנסאָלידאַטעד געבוירן און מנהג פאָרעם עלעמענטן. טשעקקבאָקסעס, ראַדיאָס, סאַלעקץ און אנדערע ינפּוץ וואָס האָבן געבוירן און מנהג קלאסן אין וו4 האָבן שוין קאַנסאַלאַדייטאַד. איצט כּמעט אַלע אונדזער פאָרעם עלעמענטן זענען גאָר מנהג, רובֿ אָן די נויט פֿאַר מנהג 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.

  • ריעריינדזשד מקור סאַס טעקעס אונטער 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.

קנעפּלעך

  • ברייקינג טאַגאַל קנעפּלעך , מיט טשעקקבאָקסעס אָדער ראַדיאָס, ניט מער דאַרפן דזשאַוואַסקריפּט און האָבן נייַ מאַרקאַפּ. מיר ניט מער דאַרפן אַ ראַפּינג עלעמענט, לייגן.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) אַנשטאָט פון אַ &times;אין HTML, אַלאַוינג פֿאַר גרינגער קוסטאָמיזאַטיאָן אָן די נויט צו פאַרבינדן דיין מאַרקאַפּ.

  • צוגעלייגט נייַ .btn-close-whiteוואַריאַנט וואָס ניצט filter: invert(1)צו געבן העכער קאַנטראַסט אָפּזאָגן ייקאַנז קעגן דאַרקער באַקגראַונדז.

ייַנבראָך

  • אַוועקגענומען מעגילע אַנגקערינג פֿאַר אַקאָרדיאַנז.

  • צוגעגעבן נייַ .dropdown-menu-darkוואַריאַנט און פֿאַרבונדן וועריאַבאַלז פֿאַר פינצטער דראָפּדאָוונס אויף-פאָדערונג.

  • צוגעלייגט נייַ בייַטעוודיק פֿאַר $dropdown-padding-x.

  • דאַרקאַנד די דראָפּדאָוון דיווידער פֿאַר ימפּרוווד קאַנטראַסט.

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

  • דראָפּדאָוון מעניוז איצט האָבן אַ data-bs-popper="static"אַטריביוט שטעלן ווען די פּאַזישאַנינג פון די דראָפּדאָוון איז סטאַטיק, אָדער דראָפּדאָוון איז אין די נאַוובאַר. דאָס איז צוגעגעבן דורך אונדזער דזשאַוואַסקריפּט און העלפּס אונדז צו נוצן מנהג שטעלע סטיילז אָן ינטערפירינג מיט פּאָפּער ס פּאַזישאַנינג.

  • ברייקינגדראַפּט flipאָפּציע פֿאַר דראָפּדאָוון פּלוגין אין טויווע פון ​​געבוירן פּאָפּער קאַנפיגיעריישאַן. איר קענען איצט דיסייבאַל די פליפּינג נאַטור דורך פאָרן אַ ליידיק מענגע פֿאַר fallbackPlacementsאָפּציע אין פליפּ מאָדיפיער.

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

  • דראָפּדאָוונס איצט שטיצן .dropdown-itemס אלנגעוויקלט אין <li>ס.

דזשאַמבאָטראָן

רשימה גרופּע

  • צוגעלייגט נייַ nullוועריאַבאַלז פֿאַר font-size, font-weight, color, און :hover colorצו די .nav-linkקלאַס.
  • ברייקינגנאַוובאַרס איצט דאַרפן אַ קאַנטיינער ין (צו דראַסטיקלי פאַרפּאָשעטערן ספּייסינג רעקווירעמענץ און CSS פארלאנגט).
  • ברייקינגדי .activeקלאַס קענען ניט מער זיין געווענדט צו .nav-items, עס מוזן זיין געווענדט גלייַך אויף .nav-links.

אָפקאַנוואַס

פּאַginיישאַן

  • פּאַginיישאַן פֿאַרבינדונגען איצט האָבן קוסטאָמיזאַבלע margin-leftוואָס זענען דינאַמיקאַללי ראַונדיד אויף אַלע עקן ווען אפגעשיידט פון איין אנדערן.

  • צוגעגעבן transitions צו פּאַדזשאַניישאַן לינקס.

פּאָפּאָווערס

  • ברייקינגריניימד .arrowצו .popover-arrowאונדזער פעליקייַט פּאָפּאָווער מוסטער.

  • ריניימד whiteListאָפּציע צו allowList.

ספּיננערס

  • ספּיננערס איצט כּבֿוד prefers-reduced-motion: reduceדורך סלאָוינג אַנאַמיישאַנז. זען #31882 .

  • ימפּרוווד ווערטיקאַל אַליינמאַנט פון ספּיננער.

טאָסט

  • טאָוסט קענען איצט זיין פּאַזישאַנד אין אַ .toast-containerמיט די הילף פון פּאַזישאַנינג יוטילאַטיז .

  • פארענדערט פעליקייַט טאָסט געדויער צו 5 סעקונדעס.

  • אַוועקגענומען overflow: hiddenפון טאָסט און ריפּלייסט מיט געהעריק border-radiusס מיט 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 גריד און פלעקסבאָקס לייאַוץ.

  • ברייקינגאַוועקגענומען .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 > *סעלעקטאָר. ניט מער קלאַס איז דארף, און די פאַרהעלטעניש העלפּער איצט אַרבעט מיט קיין HTML עלעמענט.
    • די $embed-responsive-aspect-ratiosסאַסס מאַפּע איז ריניימד צו $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איצט אויך כולל אונדזער העלפּערס. העלפּערס טאָן ניט דאַרפֿן צו זיין ימפּאָרטיד אין מנהג בויען ענימאָר.

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

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

  • ברייקינגדאַטאַ אַטריביוץ פֿאַר אַלע דזשאַוואַסקריפּט פּלוגינס זענען איצט נאַמעספּאַסעד צו העלפֿן ויסטיילן 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קענען זיין דורכגעגאנגען ווי אַ פֿונקציע וואָס אַקסעפּץ די באָאָטסטראַפּ ס פעליקייַט פּאָפּער קאַנפיגיעריישאַן ווי אַן אַרגומענט, אַזוי איר קענען צונויפגיסן דעם פעליקייַט קאַנפיגיעריישאַן אין דיין וועג. אַפּלייז צו דראָפּדאָוונס, פּאָפּאָווערס און מכשירים.

  • די פעליקייַט ווערט פֿאַר די fallbackPlacementsאיז פארענדערט צו ['top', 'right', 'bottom', 'left']פֿאַר בעסער פּלייסמאַנט פון פּאָפּער עלעמענטן. אַפּלייז צו דראָפּדאָוונס, פּאָפּאָווערס און מכשירים.

  • אַוועקגענומען אַנדערסקאָר פון ציבור סטאַטיק מעטהאָדס ווי _getInstance()→ getInstance().