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

V5 غا كۆچۈش

Bootstrap مەنبە ھۆججىتى ، ھۆججەت ۋە زاپچاسلارنىڭ ئۆزگىرىشىنى ئىز قوغلاپ تەكشۈرۈپ ، سىزنىڭ v4 دىن 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 غا قاراڭ

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

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

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

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

Jumbotron

گۇرۇپپا

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

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