ئاساسلىق مەزمۇنغا ئاتلاڭ Docs يول باشلاش
Check
in English

V5 غا كۆچۈش

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 ئۆزگەرگۈچى مىقدارغا قاراپ ئىلگىرىلەيمىز ، ئەمما v5 دا يولغا قويۇلۇشىمىزنىڭ سەل چەكلىك بولۇشى مۇمكىنلىكىنى تونۇپ يېتىڭ.

يېڭى_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. جەدۋەل ھۆججىتىنى مىسال ئۈچۈن كۆرۈڭ.

  • كېسىشمە كۆزەتكۈچى API نى ئىشلىتىش ئۈچۈن Scrollspy قايتا يېزىلدى ، يەنى سىز ئەمدى ئاتا-ئانىلارنىڭ ئورالمىسىغا ئېھتىياجلىق ئەمەس ،offsetسەپلىمىنى ئەمەلدىن قالدۇرىدۇ ۋە باشقىلار. Scrolllspy نىڭ ئىجرا قىلىنىشلىرىنى ئۇلارنىڭ يورۇتۇشتا تېخىمۇ توغرا ۋە ئىزچىل بولۇشى ئۈچۈن ئىزدەڭ.

  • Popovers ۋە قورال قوراللىرى ھازىر CSS ئۆزگەرگۈچى مىقدارنى ئىشلىتىدۇ. ئۆزگەرگۈچى مىقدار سانىنى ئازايتىش ئۈچۈن بەزى CSS ئۆزگەرگۈچى مىقدارلىرى Sass كەسىپداشلىرىدىن يېڭىلاندى. نەتىجىدە ، بۇ نەشرىدە ئۈچ خىل ئۆزگەرگۈچى مىقدارنىڭ ۋاقتى ئۆتتى: $popover-arrow-color، $popover-arrow-outer-colorۋە $tooltip-arrow-color.

  • يېڭى .text-bg-{color}ياردەمچىلەر قوشۇلدى. .text-*يەككە ۋە ئاممىۋى ئەسلىھەلەرنى تەڭشەشنىڭ ئورنىغا ، ھازىر.bg-* ياردەمچىلەردىن سېلىشتۇرما ئالدىنقى ئورۇنغا قويسىڭىز بولىدۇ..text-bg-*background-colorcolor

  • .form-check-reverseبەلگە ۋە مۇناسىۋەتلىك تەكشۈرۈش رامكىسى / رادىئونىڭ تەرتىپىنى ئۆزگەرتىش ئۈچۈن ئۆزگەرتكۈچ قوشۇلدى .

  • يېڭى سىنىپ ئارقىلىق جەدۋەلگە سىزىقلىق ستونلار قوشۇلدى ..table-striped-columns

ئۆزگەرتىشلەرنىڭ تولۇق تىزىملىكى ئۈچۈن GitHub دىكى v5.2.0 تۈرىنى كۆرۈڭ .

v5.1.0

  • CSS Grid ئورۇنلاشتۇرۇشىغا تەجرىبە ياردىمى قوشۇلدى . - بۇ ئىش داۋاملىشىۋاتقان خىزمەت ، تېخى ئىشلەپچىقىرىشقا تەييار ئەمەس ، ئەمما سىز Sass ئارقىلىق يېڭى ئىقتىدارنى تاللىسىڭىز بولىدۇ. ئۇنى قوزغىتىش ئۈچۈن كۆڭۈلدىكى تورنى چەكلەڭ ، تەڭشەش $enable-grid-classes: falseئارقىلىق CSS تورىنى قوزغىتىڭ $enable-cssgrid: true.

  • Offcanvas نى قوللاش ئۈچۈن دېڭىز ئارمىيىسى بالداقلىرى يېڭىلاندى. - ئىنكاسچان دەرسلەر ۋە بىر قىسىم offcanvas بەلگىسى بار ھەر قانداق دېڭىز ستونىغا offcanvas تارتقۇچ قوشۇڭ ..navbar-expand-*

  • يېڭى ئورۇن ئىگىلىرى زاپچاسلىرى قوشۇلدى . - بىزنىڭ ئەڭ يېڭى زاپچاسلىرىمىز ، تور بېتىڭىز ياكى ئەپىڭىزدە يەنىلا بىر نەرسە يۈكلىنىۋاتقانلىقىنى كۆرسىتىشكە ياردەم بېرىدىغان ھەقىقىي مەزمۇننىڭ ئورنىغا ۋاقىتلىق توسۇش ئۇسۇلى.

  • قىستۇرما قىستۇرما ھازىر گورىزونتال يىمىرىلىشىنى قوللايدۇ . - ئۇنىڭ ئورنىغا يىمىرىلىش .collapse-horizontalئۈچۈن قوشۇڭ . ياكى . _.collapsewidthheightmin-heightheight

  • يېڭى تىرەك ۋە تىك قائىدە ياردەمچىلىرى قوشۇلدى. - تېزلىكتە كۆپ ئەۋرىشىم خۇسۇسىيەتنى ئىشلىتىپ ، تېزلىكتە خاسلاشتۇرۇلغان ئورۇنلاشتۇرۇشلارنى ھاسىل قىلىڭ . .hstackگورىزونتال ( ) ۋە تىك ( ) تىپىنى تاللاڭ .vstack. يېڭى ياردەمچى<hr> بىلەن ئېلېمېنتلارغا ئوخشاش تىك بۆلگۈچ قوشۇڭ ..vr

  • يېڭى يەرشارى :rootCSS ئۆزگەرگۈچى مىقدار قوشۇلدى. - ئۇسلۇبنى :rootكونترول قىلىش سەۋىيىسىگە بىر قانچە يېڭى CSS ئۆزگەرگۈچى مىقدار قوشۇلدى . <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 بىلەن ئالماشتۇردى ، بىزنىڭ Libsass بېرىلگەن Sass تۈزگۈچىمىز ئەمەلدىن قالدۇرۇلدى.
  • ھۆججەتلىرىمىزنى قۇرۇش ئۈچۈن جېكىلدىن خۇگوغا كۆچۈپ كەلدى

توركۆرگۈنى قوللاش

  • Internet Explorer 10 ۋە 11 نى تاشلىدى
  • Microsoft Edge نى تاشلىدى <16 (Legacy Edge)
  • تاشلانغان Firefox <60
  • تاشلانغان سافارى <12
  • IOS Safari نى تاشلىدى <12
  • تاشلانغان Chrome <60

ھۆججەت ئۆزگەرتىش

  • باش بەت ، ھۆججەتلەرنىڭ ئورۇنلاشتۇرۇلۇشى ۋە بەت ئاستى.
  • يېڭى پوسۇلكا يېتەكچىسى قوشۇلدى .
  • يېڭى خاسلاشتۇرۇش بۆلىكى قوشۇلدى ، v4 نىڭ تېما بېتىنىڭ ئورنىنى Sass ، يەرشارى سەپلىمە تاللانمىلىرى ، رەڭ لايىھىسى ، CSS ئۆزگەرگۈچى مىقدار ۋە باشقا تەپسىلاتلار بىلەن ئالماشتۇردى.
  • بارلىق جەدۋەل ھۆججەتلىرىنى يېڭى جەدۋەل بۆلىكىگە قايتا تەشكىللەپ ، مەزمۇننى تېخىمۇ مۇھىم بەتلەرگە ئايرىدى.
  • ئوخشاشلا ، Layout بۆلىكىنى يېڭىلاپ ، تور مەزمۇنىنى تېخىمۇ ئېنىقلاشتۇردى.
  • «Navs» زاپچاس بېتىنىڭ نامىنى «Navs & Tabs» غا ئۆزگەرتتى.
  • «تەكشۈرۈش» بېتىگە «تەكشۈرۈش ۋە رادىئو» دەپ ئۆزگەرتىلدى.
  • توربېتىمىزنى قايتىدىن لايىھىلەپ ، يېڭى subnav نى قوشۇپ تور بېكىتىمىز ۋە ھۆججەت نۇسخىلىرىمىزنى ئايلىنىپ چىقىشقا قولايلىق يارىتىمىز.
  • ئىزدەش مەيدانىغا يېڭى كۇنۇپكا تاختىسى تېزلەتمىسى قوشۇلدى : Ctrl + /.

Sass

  • ئارتۇقچە قىممەتلەرنى چىقىرىۋېتىشكە قۇلايلىق بولسۇن ئۈچۈن سۈكۈتتىكى Sass خەرىتىسىنى بىرلەشتۈردۇق. ئېسىڭىزدە تۇتۇڭ ، ھازىر Sass خەرىتىسىدىكى بارلىق قىممەتلەرنى ئېنىقلىشىڭىز $theme-colorsكېرەك. Sass خەرىتىسىنى قانداق بىر تەرەپ قىلىشنى تەكشۈرۈپ بېقىڭ .

  • Breakingcolor-yiq()فۇنكسىيە ۋە مۇناسىۋەتلىك ئۆزگەرگۈچى مىقدارلارنىڭ ئىسمى YIQ color-contrast()رەڭ بوشلۇقى بىلەن مۇناسىۋەتلىك ئەمەس. # 30168 گە قاراڭ.

    • $yiq-contrasted-thresholdغا ئۆزگەرتىلدى $min-contrast-ratio.
    • $yiq-text-darkھەمدە $yiq-text-lightئايرىم-ئايرىم ھالدا $color-contrast-darkۋە $color-contrast-light.

  • Breakingمېدىيا سۈرۈشتۈرۈش ئارىلاش پارامېتىرلىرى تېخىمۇ لوگىكىلىق ئۇسۇل ئۈچۈن ئۆزگەردى.

    • media-breakpoint-down()كېيىنكى بۆسۈش نۇقتىسىنىڭ ئورنىغا بۆسۈش نۇقتىسىنى ئۆزى ئىشلىتىدۇ (مەسىلەن ، كىچىكرەك نىشان كۆرۈنۈشنىڭ media-breakpoint-down(lg)ئورنىغا ).media-breakpoint-down(md)lg
    • ئوخشاشلا ، ئىككىنچى پارامېتىرمۇ media-breakpoint-between()كېيىنكى بۆسۈش ئېغىزىنىڭ ئورنىغا بۆسۈش نۇقتىسىنى ئىشلىتىدۇ (مەسىلەن ، نىشان نىشان كۆرۈنۈشنىڭ media-between(sm, lg)ئورنىغا ).media-breakpoint-between(sm, md)smlg

  • Breakingباسما ئۇسلۇبى ۋە $enable-print-stylesئۆزگەرگۈچى مىقدار چىقىرىۋېتىلدى. بېسىش كۆرسىتىش دەرسلىرى ھازىرمۇ بار. # 28339 غا قاراڭ .

  • Breakingئۆزگەرتىلگەن color()ۋە ئۆزگەرگۈچى مىقدارلارغا پايدىلىق ئىقتىدارلار theme-color(). # 29083 گە قاراڭ .gray()

  • Breakingtheme-color-level()فۇنكسىيەگە ئۆزگەرتىلگەن color-level()ۋە ھازىر سىز خالىغان رەڭنىلا قوبۇل قىلىدۇ $theme-color. # 29083 قاراڭ : دىققەت color-level() قىلىڭ v5.0.0-alpha3.

  • Breakingئۆزگەرتىلگەن $enable-prefers-reduced-motion-media-queryۋە $enable-pointer-cursor-for-buttonsقىسقارتىلغان . $enable-reduced-motion_$enable-button-pointers

  • Breakingئارىلاشما دېتالنى bg-gradient-variant()ئېلىۋەتتى. سىنىپتىن .bg-gradientھاسىل قىلىنغان .bg-gradient-*دەرسلەرنىڭ ئورنىغا ئېلېمېنتلارغا رېشاتكا قوشۇڭ.

  • Breaking ئىلگىرى كونىراپ كەتكەن ئارىلاشمىلار چىقىرىۋېتىلدى:

    • 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()

  • BreakingSass نىڭ ئۆزىنىڭ رەڭنى كىچىكلىتىش ئىقتىدارى بىلەن سوقۇلۇپ كېتىشتىن ساقلىنىش ئۈچۈن scale-color()فۇنكسىيە ئۆزگەرتىلدى.shift-color()

  • box-shadowmixins ھازىر nullقىممەتكە يول قويىدۇ ۋە noneكۆپ خىل تالاش-تارتىشلاردىن چۈشۈپ قالىدۇ. # 30394 گە قاراڭ .

  • border-radius()ئارىلاشتۇرۇشنىڭ سۈكۈتتىكى قىممىتى بار .

رەڭ سىستېمىسى

  • ئىشلەيدىغان color-level()ۋە $theme-color-intervalچىقىرىۋېتىلگەن رەڭ سىستېمىسى يېڭى رەڭ سىستېمىسىغا پايدىلىق. كود يەشكۈچتىكى بارلىق ئىقتىدارلار lighten()ۋە . بۇ ئىقتىدارلار نۇرنى مۇقىم مىقداردا ئۆزگەرتىشنىڭ ئورنىغا ئاق ياكى قارا رەڭنى ئارىلاشتۇرىدۇ. ئىرادە ئۇنىڭ ئېغىرلىق پارامېتىرىنىڭ مۇسبەت ياكى مەنپىي بولۇشىغا قاراپ رەڭ بېرىدۇ ياكى سايە بېرىدۇ. تېخىمۇ كۆپ تەپسىلاتلارنى # 30622 دىن كۆرۈڭ.darken()tint-color()shade-color()shift-color()

  • ھەر بىر رەڭگە يېڭى رەڭ ۋە سايە قوشۇلدى ، يېڭى Sass ئۆزگەرگۈچى مىقدار سۈپىتىدە ھەر بىر ئاساسىي رەڭ ئۈچۈن توققۇز خىل رەڭ تەمىنلەندى.

  • رەڭ سېلىشتۇرمىسى ياخشىلاندى. سوقۇلغان رەڭ سېلىشتۇرما نىسبىتى 3: 1 دىن 4.5: 1 گىچە يېڭىلىنىپ ، كۆك ، يېشىل ، سېرىق ۋە ھالرەڭ رەڭلەر يېڭىلاندى ، WCAG 2.1 AA سېلىشتۇرمىسىغا كاپالەتلىك قىلىندى. $gray-900رەڭ سېلىشتۇرما رەڭگىمىزنىمۇ ئۆزگەرتتى $black.

  • tint-color()رەڭ سىستېمىسىمىزنى قوللاش ئۈچۈن ، رەڭلىرىمىزنى مۇۋاپىق ئارىلاشتۇرۇش ئۈچۈن يېڭى ئادەت ۋە shade-color()ئىقتىدارلارنى قوشتۇق .

كاتەكچە يېڭىلاش

  • يېڭى بۆسۈش! يۇقىرى ۋە يۇقىرىغا يېڭى xxlبۆسۈش قوشۇلدى. 1400pxباشقا بارلىق بۆسۈشلەردە ئۆزگىرىش يوق.

  • ئۆستەڭ ياخشىلاندى. ئۆستەڭلەر ھازىر رېلىسقا ئورۇنلاشتۇرۇلغان بولۇپ ، v4 ( 1.5remياكى 24pxتۆۋەندىن تۆۋەنگە 30px) دىن تار. بۇ تور سىستېمىمىزنىڭ ئۆستەڭلىرىنى بوشلۇق ئەسلىھەلىرىمىز بىلەن ماسلاشتۇرىدۇ.

    • گورىزونتال / تىك ئۆستەڭ ، توغرىسىغا ئۆستەڭ ۋە تىك ئۆستەڭنى كونترول قىلىش ئۈچۈن يېڭى ئۆستەڭ سىنىپى ( .g-*، .gx-*ۋە ) قوشۇلدى..gy-*
    • Breakingيېڭى ئۆستەڭ ئەسلىھەلىرىگە ماسلاشتۇرۇلغان .no-gutters..g-0

  • ستونلار ئەمدى قوللىنىلمىدى ، شۇڭا بۇ ھەرىكەتنى ئەسلىگە كەلتۈرۈش ئۈچۈن بەزى ئېلېمېنتلارغا position: relativeقوشۇشىڭىز مۇمكىن ..position-relative

  • Breaking.order-*دائىم ئىشلىتىلمەيدىغان بىر قانچە دەرسنى تاشلىدى. بىز ھازىر پەقەت .order-1رامكىنىلا تەمىنلەيمىز .order-5.

  • Breakingزاپچاسنى تاشلىدى ، چۈنكى ئۇنى ئاممىۋى .mediaئەسلىھەلەر بىلەن ئاسانلا كۆپەيتكىلى بولىدۇ. مىسال ئۈچۈن # 28265 ۋە ئەۋرىشىم ئىقتىدار بېتىنى كۆرۈڭ .

  • Breaking bootstrap-grid.cssھازىر پەقەت box-sizing: border-boxيەر شارى رامكىسىنى ئەسلىگە كەلتۈرۈشنىڭ ئورنىغا ئىستونغا ماس كېلىدۇ. بۇنداق بولغاندا ، بىزنىڭ تور ئۇسلۇبىمىزنى تېخىمۇ كۆپ جايلاردا دەخلىسىز ئىشلىتىشكە بولىدۇ.

  • $enable-grid-classesئەمدى بىر ئەۋلاد كونتېينېر سىنىپلىرىنى چەكلىمەيدۇ. # 29146 گە قاراڭ.

  • make-colئارىلاشما مىقدارنى تەڭ چوڭلۇقتا تەڭ ستونغا يېڭىلىدى .

مەزمۇن ، قايتا قوزغىتىش قاتارلىقلار

  • RFS ھازىر سۈكۈتتىكى ھالەتتە قوزغىتىلدى. ئارىلاشما ئىشلىتىدىغان ماۋزۇلاركۆلىمىنىfont-size()ئاپتوماتىك تەڭشەيدۇبۇ ئىقتىدار ئىلگىرى v4 بىلەن تاللانغان.font-size

  • Breaking$display-*ئۆزگەرگۈچى مىقدارلىرىمىزنى ۋە $display-font-sizesSass خەرىتىسىنى ئالماشتۇرۇش ئۈچۈن كۆرسىتىش مەتبەئەمىزنى ئۆزگەرتتى . يەككە ئۆزگەرتىلگەن s $display-*-weightئۈچۈن يەككە ئۆزگەرگۈچى مىقدارنىمۇ ئېلىۋەتتى .$display-font-weightfont-size

  • ئىككى يېڭى .display-*ماۋزۇ چوڭلۇقى قوشۇلدى ..display-5.display-6

  • ئۇلىنىشلار ئالاھىدە زاپچاسلارنىڭ بىر قىسمى بولمىسىلا ، سۈكۈتتىكى ھالەتتە (ئاستىدىلا ئەمەس) ئاستى سىزىلىدۇ.

  • ئۇسلۇبنى يېڭىلاش ۋە ئۇسلۇبنى تېخىمۇ كونترول قىلىش ئۈچۈن CSS ئۆزگەرگۈچى مىقدار بىلەن قايتا قۇرۇش جەدۋىلىنى قايتىدىن لايىھىلەپ چىقتى.

  • Breakingئۇلانغان جەدۋەللەر ئەمدى ئۇسلۇبقا ۋارىسلىق قىلمايدۇ.

  • Breaking .thead-lightھەمدە بارلىق جەدۋەل ئېلېمېنتلىرى ( ، ، ، ۋە ) ئۈچۈن ئىشلىتىلىدىغان ئۆزگىرىشچان سىنىپلارغا .thead-darkپايدىلىق قىلىپ تاشلىنىدۇ..table-*theadtbodytfoottrthtd

  • Breakingئارىلاشما ئىسىم table-row-variant()ئۆزگەرتىلگەن table-variant()ۋە پەقەت 2 پارامېتىرنى قوبۇل قىلىدۇ: $color(رەڭ ئىسمى) ۋە $value(رەڭ كودى). چېگرا رەڭگى ۋە تەلەپپۇز رەڭلىرى جەدۋەل ئامىلىنىڭ ئۆزگىرىشچانلىقىغا ئاساسەن ئاپتوماتىك ھېسابلىنىدۇ.

  • جەدۋەل كاتەكچىسى padding ئۆزگەرگۈچى مىقدارنى -yۋە -x.

  • Breakingتاشلانغان .pre-scrollableسىنىپ. # 29135 گە قاراڭ

  • Breaking .text-*ئاممىۋى مۇلازىمەتلەر ئۇلىنىشلارغا فوكۇس ۋە فوكۇس ھالىتىنى قوشمايدۇ. .link-*ئۇنىڭ ئورنىغا ياردەمچى دەرسلەرنى ئىشلىتىشكە بولىدۇ. # 29267 گە قاراڭ

  • Breakingتاشلانغان .text-justifyسىنىپ. # 29793 غا قاراڭ

  • Breaking <hr>ئېلېمېنتلار خاسلىقنى تېخىمۇ ياخشى قوللاشنىڭ heightئورنىغا ئىشلىتىلىدۇ. بۇ يەنە padding قورالىدىن پايدىلىنىپ تېخىمۇ قويۇق بۆلگۈچ ھاسىل قىلالايدۇ (مەسىلەن ، ).bordersize<hr class="py-1">

  • كۆڭۈلدىكى گورىزونتال padding-leftۋە توركۆرگۈنىڭ سۈكۈتتىكى ھالىتىنى <ul>ئەسلىگە كەلتۈرۈڭ .<ol>40px2rem

  • قوشۇلدى $enable-smooth-scroll، بۇ پۈتۈن دۇنيا مىقياسىدا قوللىنىلىدۇ ، پەقەت ئابونتلار مېدىيا سوئالى scroll-behavior: smoothئارقىلىق ھەرىكەتنى ئازايتىشنى تەلەپ قىلىدۇ . # 31877 گە قاراڭprefers-reduced-motion

RTL

  • گورىزونتال يۆنىلىشتىكى ئالاھىدە ئۆزگەرگۈچى مىقدار ، ئىشلىتىشچانلىقى ۋە ئارىلاشمىلارنىڭ ھەممىسى ئۆزگەرتىلگەن بولۇپ ، ئەۋرىشىم ئورۇنلاشتۇرۇش لايىھىسىدىكىگە ئوخشاش لوگىكىلىق خۇسۇسىيەتلەرنى ئىشلىتىشكە ئىشلىتىلىدۇ ، مەسىلەن ، ۋە startئۇنىڭ endئورنىغا .leftright

جەدۋەل

  • يېڭى لەيلىمە شەكىللەر قوشۇلدى! لەيلىمە بەلگە مىسالىنى تولۇق قوللايدىغان جەدۋەل زاپچاسلىرىغا تەشۋىق قىلدۇق. يېڭى لەيلىمە بەلگە بېتىنى كۆرۈڭ.

  • Breaking يەرلىك ۋە خاس شەكىل ئېلېمېنتلىرىنى بىرلەشتۈردى. تەكشۈرۈش رامكىسى ، رادىئو ، تاللاش ۋە 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.

  • Breakingتاشلاندى .input-group-appendۋە .input-group-prepend. سىز پەقەت كۇنۇپكىلارنى قوشالايسىز ۋە .input-group-textكىرگۈزۈش گۇرۇپپىسىنىڭ بىۋاسىتە بالىسى سۈپىتىدە.

  • دەلىللەش خاتالىقى بار كىرگۈزۈش گۇرۇپپىسىدىكى ئۇزۇندىن بۇيان يوقاپ كەتكەن چېگرا رادىئوسى دەلىللەش ئارقىلىق كىرگۈزۈش گۇرۇپپىسىغا قوشۇمچە .has-validationدەرس قوشۇش ئارقىلىق ئوڭشىلىدۇ.

  • Breaking تور سىستېمىسىمىزنىڭ جەدۋەلگە خاس ئورۇنلاشتۇرۇش دەرسلىرىنى تاشلىدى. بىزنىڭ تورىمىزنى ۋە ئەسلىھەلىرىمىزنى ئىشلىتىڭ .form-group، .form-rowياكى .form-inline.

  • Breakingجەدۋەل بەلگىسى ھازىر تەلەپ قىلىدۇ .form-label.

  • Breaking .form-textئەمدى displayHTML ئېلېمېنتىنى ئۆزگەرتىش ئارقىلىق خالىغانچە قۇر قۇر ياكى ياردەم تېكىستىنى توسىدۇ.

  • جەدۋەل كونتروللىرى مۇمكىن بولغاندا مۇقىم ئىشلىتىلمەيدۇ ، ئەكسىچە باشقا زاپچاسلار بىلەن خاسلاشتۇرۇش ۋە ماسلىشىشچانلىقىنى ياخشىلاشنى heightكېچىكتۈردى .min-height

  • دەلىللەش سىنبەلگىسى ئەمدى <select>s بىلەن قوللىنىلمايدۇ multiple.

  • قايتا رەتلەنگەن مەنبە Sass ھۆججىتى scss/forms/، كىرگۈزۈش گۇرۇپپىسىنىڭ ئۇسلۇبىنى ئۆز ئىچىگە ئالىدۇ.

زاپچاسلار

  • بىزنىڭ ئۆزگەرگۈچى مىقدارنى paddingئاساس قىلىدىغان ئاگاھلاندۇرۇش ، بولكا ، كارتا ، تامچە ، تىزىملىك ​​گۇرۇپپىسى ، مودېل ، پوپايكا ۋە قورال قوراللىرىنىڭ بىرلىككە كەلگەن قىممىتى. # 30564 گە قاراڭ .$spacer

ئاككوردىيون

ئاگاھلاندۇرۇش

  • ئاگاھلاندۇرۇشتا ھازىر سىنبەلگىسى بار مىساللار بار .

  • <hr>ئۇلار ئىشلىتىپ بولغاندىن كېيىن ھەر بىر ئاگاھلاندۇرۇشتا s نىڭ خاس ئۇسلۇبلىرى ئۆچۈرۈلدى currentColor.

Badges

  • Breaking.badge-*تەگلىك ئەسلىھەلىرى ئۈچۈن بارلىق رەڭلىك دەرسلەرنى تاشلىدى (مەسىلەن ، .bg-primaryئۇنىڭ ئورنىغا ئىشلىتىش .badge-primary).

  • Breakingتاشلاندى .badge-pill- ئۇنىڭ .rounded-pillئورنىغا ئىشلىتىڭ.

  • Breaking<a>ئېلېمېنتلار ۋە ئېلېمېنتلارنىڭ فوكۇس ئۇسلۇبى ۋە فوكۇس ئۇسلۇبى چىقىرىۋېتىلدى <button>.

  • بەلگە ئۈچۈن / دىن .25em/ .5emگىچە سۈكۈتتىكى تاختا كۆپەيتىلدى ..35em.65em

  • ئېلىۋېتىش paddingئارقىلىق ناننىڭ سۈكۈتتىكى كۆرۈنۈشىنى ئاددىيلاشتۇردى .background-colorborder-radius

  • --bs-breadcrumb-dividerCSS نى قايتا قۇرۇشنىڭ ھاجىتى يوق ، ئاسان خاسلاشتۇرۇش ئۈچۈن يېڭى CSS خاس مۈلۈك قوشۇلدى .

كۇنۇپكىلار

  • Breaking تەكشۈرۈش رامكىسى ياكى رادىئو بار كۇنۇپكىلارنى ئالماشتۇرۇڭ ، ئەمدى JavaScript تەلەپ قىلمايدۇ ۋە يېڭى بەلگە بار. بىز ئەمدى ئوراش ئېلېمېنتىنى تەلەپ قىلمايمىز ، ئۇنىڭغا قوشۇپ.btn-check،<input>ئۇنى ھەر قانداق.btnدەرسلەر<label>. # 30650 گە قاراڭ . بۇنىڭدىكى ھۆججەتلەر بىزنىڭ كۇنۇپكا بېتىدىن يېڭى جەدۋەللەر بۆلىكىگە يۆتكەلدى.

  • Breaking ئاممىۋى .btn-blockمۇلازىمەت ئۈچۈن تاشلاندى. ئىشلىتىشنىڭ ئورنىغا ، .btn-blockكۇنۇپكىلارنى .btnئوراپ .d-grid، .gap-*ئېھتىياجغا قاراپ بوشلۇققا ئىشلىتىڭ. ئۇلارنى تېخىمۇ كونترول قىلىش ئۈچۈن ئىنكاسچان دەرسلەرگە ئالماشتۇرۇڭ. بەزى مىساللار ئۈچۈن ھۆججەتلەرنى ئوقۇڭ.

  • قوشۇمچە پارامېتىرلارنى قوللاش ئۈچۈن بىزنىڭ button-variant()ۋە ئارىلاشمىلارنى يېڭىلىدۇق.button-outline-variant()

  • كۇنۇپكىلار يېڭىلاندى ، قوزغاتقۇچ ۋە ئاكتىپ ھالەتتىكى سېلىشتۇرما كۈچىيىدۇ.

  • چەكلەنگەن كۇنۇپكىلار ھازىر بار pointer-events: none;.

كارتا

  • Breakingتورىمىزغا .card-deckپايدىلىق تاشلاندى. كارتىڭىزنى ئىستون دەرسلىكىگە ئوراپ ، ئانا .row-cols-*قاچا قوشۇپ كارتا قەۋىتىنى قايتا ھاسىل قىلىڭ (ئەمما ئىنكاس قايتۇرۇشنى تېخىمۇ كونترول قىلىش ئارقىلىق).

  • Breakingماسونرىينىڭ .card-columnsپايدىسىغا تاشلاندى. # 28922 گە قاراڭ .

  • Breaking.cardئاساس قىلىنغان ئاككوردىيوننى يېڭى ئاككوردىيون زاپچاسلىرى بىلەن ئالماشتۇردى .

  • قاراڭغۇ تېكىست ، كونترول ۋە كۆرسەتكۈچ ئۈچۈن يېڭى .carousel-darkۋارىيانت قوشۇلدى (يېنىك تەگلىك ئۈچۈن ناھايىتى ياخشى).

  • كارۇسېل كونتروللۇقىدىكى Chevron سىنبەلگىسى Bootstrap سىنبەلگىسىدىن يېڭى SVG لار بىلەن ئالماشتۇرۇلدى .

تاقاش كۇنۇپكىسى

  • Breakingئازراق ئومۇمىي ئىسىمغا ئۆزگەرتىلدى .close..btn-close

  • تاقاش كۇنۇپكىلىرى ھازىر HTML دا background-imageئەمەس (قىستۇرۇلغان SVG) نى ئىشلىتىدۇ &times;، بۇ ئارقىلىق ماركىڭىزغا تېگىشنىڭ ھا��ىتى يوق.

  • تېخىمۇ كۆپ سېلىشتۇرما قويۇپ بېرىش سىنبەلگىسىنى قاراڭغۇ تەگلىكتە ئىشلىتىشكە بولىدىغان يېڭى .btn-close-whiteۋارىيانت قوشۇلدى.filter: invert(1)

يىمىرىلىش

  • ئاككوردىيون ئۈچۈن سىيرىلما لەڭگەر ئېلىۋېتىلدى.

  • .dropdown-menu-darkئېھتىياجغا قاراپ قاراڭغۇ چۈشۈش ئۈچۈن يېڭى ئۆزگەرگۈچى مىقدار ۋە مۇناسىۋەتلىك ئۆزگەرگۈچى مىقدارلار قوشۇلدى .

  • ئۈچۈن يېڭى ئۆزگەرگۈچى مىقدار قوشۇلدى $dropdown-padding-x.

  • سېلىشتۇرما ياخشىلاش ئۈچۈن چۈشۈش بۆلگۈچنى قاراڭغۇلاشتۇردى.

  • Breakingچۈشۈشنىڭ بارلىق ھادىسىلىرى ھازىر چۈشۈش كۇنۇپكىسىنى قوزغىتىش كۇنۇپكىسىدا قوزغىتىلىپ ، ئاندىن ئانا ئېلېمېنتقا كۆپۈككە ئايلىنىدۇ.

  • تامچە تىزىملىكلەرنىڭ data-bs-popper="static"خاسلىقى بار بولۇپ ، چۈشۈش ئورنىنىڭ ئورنى تۇراقلىق بولغاندا ياكى چۈشۈش يۆنىلىشىدە. بۇ بىزنىڭ JavaScript تەرىپىدىن قوشۇلغان بولۇپ ، Popper نىڭ ئورۇن بەلگىلەشكە دەخلى قىلماي ئىختىيارى ئورۇن ئۇسلۇبىنى ئىشلىتىشىمىزگە ياردەم بېرىدۇ.

  • Breakingيەرلىك Popper flipسەپلىمىسىگە پايدىلىق قىستۇرما قىستۇرما تاللانما. سىز ھازىر flip ئۆزگەرتكۈچتە fallbackPlacementsتاللاش ئۈچۈن قۇرۇق سانلار گۇرپىسى ئارقىلىق يۆتكىلىش ھەرىكىتىنى چەكلىيەلەيسىز.

  • تۆۋەنلەش تىزىملىكىنى ئاپتوماتىك تاقاش ھەرىكىتىنىautoClose بىر تەرەپ قىلىدىغان يېڭى تاللاش بىلەن چېكىشكە بولىدۇ . سىز بۇ تاللانمىنى ئىشلىتىپ تىزىملىكنىڭ ئىچى ياكى سىرتىدىكى چېكىشنى قوبۇل قىلالايسىز.

  • تامچە ھازىر .dropdown-items غا ئورالغان <li>s نى قوللايدۇ.

Jumbotron

گۇرۇپپا

  • ئۈچۈن ، ۋە ۋە سىنىپقا يېڭى nullئۆزگەرگۈچى مىقدار قوشۇلدى .font-sizefont-weightcolor:hover color.nav-link
  • BreakingNavbars ھازىر ئىچىدە بىر قاچا تەلەپ قىلىدۇ (بوشلۇق تەلىپى ۋە تەلەپ قىلىنغان CSS نى زور دەرىجىدە ئاددىيلاشتۇرۇش).
  • Breakingبۇ .activeدەرسنى ئەمدى s غا ئىشلىتىشكە بولمايدۇ .nav-item، چوقۇم s غا بىۋاسىتە ئىشلىتىش كېرەك .nav-link.

Offcanvas

Pagination

  • كىچىكلىتىش ئۇلانمىلىرىنى ھازىر خاسلاشتۇرغىلى بولىدۇ margin-left، بىر-بىرىدىن ئايرىلغاندا ھەممە بۇلۇڭ-پۇچقاقلاردا ھەرىكەتلىنىدۇ.

  • transitionبەت ئۇلىنىشىغا s قوشۇلدى .

Popovers

  • Breakingسۈكۈتتىكى popover ئەندىزىسىدە .arrowئۆزگەرتىلدى ..popover-arrow

  • ئۆزگەرتىلگەن whiteListئىسىم allowList.

Spinners

  • پالۋانلار ھازىر prefers-reduced-motion: reduceكارتوننى ئاستىلىتىش ئارقىلىق ھۆرمەتلەيدۇ. # 31882 گە قاراڭ .

  • ئايلانما تىك تىك توغرىلاش.

توست

  • توستلارنى ھازىر ئورۇن بەلگىلەش ئەسلىھەلىرىنىڭ ياردىمىدە .toast-containerئورۇنلاشتۇرغىلى بولىدۇ.

  • سۈكۈتتىكى توست ۋاقتىنى 5 سېكۇنتقا ئۆزگەرتتى.

  • توستتىن چىقىرىۋېتىلدى overflow: hiddenۋە مۇۋاپىق border-radiuss بىلەن calc()فۇنكسىيە ئالماشتۇرۇلدى.

قورال قوراللىرى

  • Breakingسۈكۈتتىكى قورال قورال قېلىپىمىزغا ئۆزگەرتىلدى .arrow..tooltip-arrow

  • BreakingPopper ئېلېمېنتلىرىنى تېخىمۇ ياخشى ئورۇنلاشتۇرۇش ئۈچۈن سۈكۈتتىكى قىممىتى fallbackPlacementsئۆزگەرتىلدى .['top', 'right', 'bottom', 'left']

  • Breakingئۆزگەرتىلگەن whiteListئىسىم allowList.

Utilities

  • BreakingRTL قوللىشى قوشۇلۇپ يۆنىلىشلىك ئىسىمنىڭ ئورنىغا لوگىكىلىق مۈلۈك نامىنى ئىشلىتىش ئۈچۈن بىر قانچە مۇلازىمەتنىڭ نامىنى ئۆزگەرتتى:

    • ئۆزگەرتىلگەن .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

  • Breakingسۈكۈتتىكى مەنپىي گىرۋەكنى چەكلەيدۇ.

  • قوشۇمچە ئېلېمېنتلارغا تەگلىكنى .bg-bodyتېز تەڭشەش ئۈچۈن يېڭى دەرس قوشۇلدى .<body>

  • ئۈچۈن ، ، ۋە ئۈچۈن يېڭى ئورۇن ئەسلىھەلىرى قوشۇلدى . قىممەت ھەر بىر مۈلۈكنى ئۆز ئىچىگە ئالىدۇ.toprightbottomleft050%100%

  • توغرىسىغا ياكى تىك ھالەتتە مۇتلەق / مۇقىم ئورۇندىكى ئېلېمېنتلارغا يېڭى .translate-middle-xۋە ئىقتىدارلار قوشۇلدى ..translate-middle-y

  • border-widthيېڭى ئىقتىدارلار قوشۇلدى .

  • Breakingئۆزگەرتىلگەن . .text-monospace_.font-monospace

  • Breaking.text-hideئەمدى ئىشلىتىشكە بولمايدىغان تېكىستنى يوشۇرۇشنىڭ كونا ئۇسۇلى بولغاچقا چىقىرىۋېتىلدى .

  • .fs-*ئاممىۋى مۇلازىمەتكە ئىشلىتىلىدىغان ئىقتىدارلار قوشۇلدى font-size(RFS قوزغىتىلغان). بۇلار HTML نىڭ سۈكۈتتىكى ماۋزۇلىرى بىلەن ئوخشاش كۆلەمدە ئىشلىتىلىدۇ (1-6 ، چوڭ-كىچىك) ، Sass خەرىتىسى ئارقىلىق ئۆزگەرتكىلى بولىدۇ.

  • Breakingقىسقارتىش ۋە ئىزچىللىق دەپ ئۆزگەرتىلگەن .font-weight-*ئەسلىھەلەر ..fw-*

  • Breakingقىسقارتىش ۋە ئىزچىللىق دەپ ئۆزگەرتىلگەن .font-style-*ئەسلىھەلەر ..fst-*

  • CSS Grid ۋە flexbox ئورۇنلاشتۇرۇشلىرى ئۈچۈن .d-gridيېڭى ئىقتىدار ۋە يېڭى ئىقتىدارلارنى كۆرسىتىش ئۈچۈن قوشۇلدى .gap.gap

  • Breakingچىقىرىۋېتىلدى .rounded-smۋە rounded-lgيېڭى كۆلەمدىكى دەرسلەرنى .rounded-0تونۇشتۇردى .rounded-3. # 31687 گە قاراڭ .

  • يېڭى ئىقتىدارلار قوشۇلدى line-height: .lh-1، .lh-smۋە . بۇ يەرنى كۆرۈڭ ..lh-base.lh-lg

  • .d-noneCSS دىكى قوللىنىشچان پروگراممىنى باشقا كۆرسىتىش ئەسلىھەلىرىگە قارىغاندا تېخىمۇ ئېغىرلاشتۇرۇش ئۈچۈن يۆتكىدى .

  • ياردەمچىسىنى قاچا- قۇچىلاردا .visually-hidden-focusableئىشلەشكە كېڭەيتتى :focus-within.

ياردەمچىلەر

  • Breaking مەسئۇلىيەتچان قىستۇرما ياردەمچىلەر يېڭى سىنىپ ئىسمى ۋە ھەرىكەتلىرى ياخشىلانغان ، شۇنداقلا پايدىلىق CSS ئۆزگەرگۈچى مىقدار نىسبىتى ياردەمچىلىرىگە ئۆزگەرتىلدى.

    • دەرسلەر تەرەپ نىسبىتىگە ئۆزگەرتىش ئۈچۈن ئۆزگەرتىلدى by. xمەسىلەن ، .ratio-16by9ھازىر .ratio-16x9.
    • بىز .embed-responsive-itemئېلېمېنت گۇرۇپپىسىنى تاللىغۇچىلارنى ئاددىيراق .ratio > *تاللىغۇچىلارغا تاشلاپ قويدۇق. ئەمدى دەرس لازىم ئەمەس ، نىسبەت ياردەمچىسى ھازىر ھەر قانداق HTML ئېلېمېنتى بىلەن ئىشلەيدۇ.
    • $embed-responsive-aspect-ratiosSass خەرىتىسى ئۆزگەرتىلگەن بولۇپ ، ئۇنىڭ $aspect-ratiosقىممىتى ئاددىيلاشتۇرۇلغان بولۇپ ، سىنىپ ئىسمى ۋە پىرسەنتنى key: valueجۈپ قىلىپ ئۆز ئىچىگە ئالىدۇ.
    • CSS ئۆزگەرگۈچى مىقدار ھازىر ھاسىل قىلىندى ۋە Sass خەرىتىسىدىكى ھەر بىر قىممەتكە كىرگۈزۈلدى. --bs-aspect-ratioئۆزگەرگۈچى مىقدارنى ئۆزگەرتىپ ، .ratioخالىغان خاسلىق نىسبىتىنى ھاسىل قىلىڭ.

  • Breaking «ئېكران ئوقۇغۇچ» دەرسلىرى ھازىر «كۆرۈنۈشلۈك يوشۇرۇن» دەرسلەر .

    • 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

  • دائىملىق JavaScript دا بولۇش ئۈچۈن jQuery بېقىنىشچانلىقى ۋە قىستۇرمىلارنى قايتا يېزىڭ.

  • Breakingبارلىق 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"]')

  • popperConfigBootstrap نىڭ سۈكۈتتىكى Popper سەپلىمىسىنى تالاش-تارتىش سۈپىتىدە قوبۇل قىلىدىغان ئىقتىدار سۈپىتىدە يەتكۈزگىلى بولىدۇ ، بۇنداق بولغاندا بۇ سۈكۈتتىكى سەپلىمىنى بىرلەشتۈرەلەيسىز. چۈشۈش ، سەكرەش ۋە قورال قوراللىرىغا ماس كېلىدۇ.

  • Popper ئېلېمېنتلىرىنى تېخىمۇ ياخشى ئورۇنلاشتۇرۇش ئۈچۈن سۈكۈتتىكى قىممىتى fallbackPlacementsئۆزگەرتىلدى . چۈشۈش ، سەكرەش ۋە قورال قوراللىرىغا ماس كېلىدۇ.['top', 'right', 'bottom', 'left']

  • _getInstance()→ غا ئوخشاش ئاممىۋى تۇراقلىق ئۇسۇللاردىن ئاستى سىزىق چىقىرىۋېتىلدى getInstance().