V5 غا كۆچۈش

تايىنىش

• تاشلانغان 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ۋە .endleftright

جەدۋەل

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

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

  • .custom-checkھازىر .form-check.
  • .custom-check.custom-switchھازىر .form-check.form-switch.
  • .custom-selectھازىر .form-select.
  • .custom-fileھەمدە .form-fileئۇنىڭ ئۈستىگە خاس ئۇسلۇبلار ئالماشتۇرۇلدى .form-control.
  • .custom-rangeھازىر .form-range.
  • تاشلانغان يەرلىك .form-control-fileۋە .form-control-range.

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

• دەلىللەش سىنبەلگىسى ئەمدى <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

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

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

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

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

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

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

يىمىرىلىش

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

تامچە

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

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

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

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

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

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

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

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

Jumbotron

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

گۇرۇپپا

• گۇرۇپپىلارغا يېڭى .list-group-numberedئۆزگەرتكۈچ قوشۇلدى.

يول ۋە بەتكۈچ

• ئۈچۈن ، ۋە ۋە سىنىپقا يېڭى nullئۆزگەرگۈچى مىقدار قوشۇلدى .font-sizefont-weightcolor:hover color.nav-link

ناۋرىز

• BreakingNavbars ھازىر ئىچىدە بىر قاچا تەلەپ قىلىدۇ (بوشلۇق تەلىپى ۋە تەلەپ قىلىنغان CSS نى زور دەرىجىدە ئاددىيلاشتۇرۇش).

Offcanvas

• يېڭى 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 تاللىغۇچتىن ئۆتسىڭىز بولىدۇ:

  كۆچۈرۈڭ

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

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

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

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