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

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

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

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

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

  • פארווארפן 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-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.

  • ריעריינדזשד מקור סאַס טעקעס אונטער 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"אַטריביוט שטעלן ווען די פּאַזישאַנינג פון די דראָפּדאָוון איז סטאַטיק און data-bs-popper="none"ווען דראָפּדאָוון איז אין די נאַוובאַר. דאָס איז צוגעגעבן דורך אונדזער דזשאַוואַסקריפּט און העלפּס אונדז צו נוצן מנהג שטעלע סטיילז אָן ינטערפירינג מיט פּאָפּער ס פּאַזישאַנינג.

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

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

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

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

רשימה גרופּע

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

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

פּאַ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 סעלעקטאָר צו שאַפֿן אַ נייַע בייַשפּיל פון דעם פּלוגין:

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

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

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

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