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 خەرىتىسىنى قانداق بىر تەرەپ قىلىشنى تەكشۈرۈپ بېقىڭ . -
Breaking
color-yiq()
فۇنكسىيە ۋە مۇناسىۋەتلىك ئۆزگەرگۈچى مىقدارلارنىڭ ئىسمى YIQcolor-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)
sm
lg
-
Breakingباسما ئۇسلۇبى ۋە
$enable-print-styles
ئۆزگەرگۈچى مىقدار چىقىرىۋېتىلدى. بېسىش كۆرسىتىش دەرسلىرى ھازىرمۇ بار. # 28339 غا قاراڭ . -
Breakingئۆزگەرتىلگەن
color()
ۋە ئۆزگەرگۈچى مىقدارلارغا پايدىلىق ئىقتىدارلارtheme-color()
. # 29083 گە قاراڭ .gray()
-
Breaking
theme-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-shadow
mixins ھازىر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-sizes
Sass خەرىتىسىنى ئالماشتۇرۇش ئۈچۈن كۆرسىتىش مەتبەئەمىزنى ئۆزگەرتتى . يەككە ئۆزگەرتىلگەن s$display-*-weight
ئۈچۈن يەككە ئۆزگەرگۈچى مىقدارنىمۇ ئېلىۋەتتى .$display-font-weight
font-size
-
ئىككى يېڭى
.display-*
ماۋزۇ چوڭلۇقى قوشۇلدى ..display-5
.display-6
-
ئۇلىنىشلار ئالاھىدە زاپچاسلارنىڭ بىر قىسمى بولمىسىلا ، سۈكۈتتىكى ھالەتتە (ئاستىدىلا ئەمەس) ئاستى سىزىلىدۇ.
-
ئۇسلۇبلارنى يېڭىلاش ۋە ئۇسلۇبنى تېخىمۇ كونترول قىلىش ئۈچۈن CSS ئۆزگەرگۈچى مىقدار بىلەن قايتا قۇرۇش.
-
Breakingئۇلانغان جەدۋەللەر ئەمدى ئۇسلۇبقا ۋارىسلىق قىلمايدۇ.
-
Breaking
.thead-light
ھەمدە بارلىق جەدۋەل ئېلېمېنتلىرىغا ( ، ، ، ۋە ) ئىشلىتىشكە بولىدىغان ئۆزگىرىشچان سىنىپلارغا.thead-dark
پايدىلىق قىلىپ تاشلىنىدۇ ..table-*
thead
tbody
tfoot
tr
th
td
-
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>
40px
2rem
-
قوشۇلدى
$enable-smooth-scroll
، بۇ پۈتۈن دۇنيا مىقياسىدا قوللىنىلىدۇ ، پەقەت ئابونتلار مېدىيا سوئالىscroll-behavior: smooth
ئارقىلىق ھەرىكەتنى ئازايتىشنى تەلەپ قىلىدۇ . # 31877 گە قاراڭprefers-reduced-motion
RTL
- گورىزونتال يۆنىلىشتىكى ئالاھىدە ئۆزگەرگۈچى مىقدار ، ئىشلىتىشچانلىقى ۋە ئارىلاشمىلارنىڭ ھەممىسى ئۆزگەرتىلگەن بولۇپ ، ئەۋرىشىم رامكىسىدىكىگە ئوخشاش لوگىكىلىق خۇسۇسىيەتلەرنى ئىشلىتىدۇ ، مەسىلەن ، ئۇنىڭ ئورنىغا
start
ۋە .end
left
right
جەدۋەل
-
يېڭى لەيلىمە شەكىللەر قوشۇلدى! لەيلىمە بەلگە مىسالىنى تولۇق قوللايدىغان جەدۋەل زاپچاسلىرىغا تەشۋىق قىلدۇق. يېڭى لەيلىمە بەلگە بېتىنى كۆرۈڭ.
-
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
ئەمدىdisplay
HTML ئېلېمېنتىنى ئۆزگەرتىش ئارقىلىق خالىغانچە قۇر قۇر ياكى ياردەم تېكىستىنى توسىدۇ. -
دەلىللەش سىنبەلگىسى ئەمدى
<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-color
border-radius
-
--bs-breadcrumb-divider
CSS نى قايتا قۇرۇشنىڭ ھاجىتى يوق ، ئاسان خاسلاشتۇرۇش ئۈچۈن يېڭى 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-item
s غا ئورالغان<li>
s نى قوللايدۇ.
Jumbotron
- BreakingJumbotron زاپچاسلىرىنى تاشلىدى ، چۈنكى ئۇنى ئاممىۋى ئەسلىھەلەر بىلەن كۆپەيتكىلى بولىدۇ. ئۈلگە كۆرسىتىش ئۈچۈن يېڭى Jumbotron مىسالىمىزنى كۆرۈڭ.
گۇرۇپپا
- گۇرۇپپىلارغا يېڭى
.list-group-numbered
ئۆزگەرتكۈچ قوشۇلدى.
يول ۋە بەتكۈچ
- ئۈچۈن ، ۋە ۋە سىنىپقا يېڭى
null
ئۆزگەرگۈچى مىقدار قوشۇلدى .font-size
font-weight
color
: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-radius
s بىلەن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>
-
ئۈچۈن ، ، ۋە ئۈچۈن يېڭى ئورۇن ئەسلىھەلىرى قوشۇلدى . قىممەت ھەر بىر مۈلۈكنى ئۆز ئىچىگە ئالىدۇ.
top
right
bottom
left
0
50%
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-none
CSS دىكى قوللىنىشچان پروگراممىنى باشقا كۆرسىتىش ئەسلىھەلىرىگە قارىغاندا تېخىمۇ ئېغىرلاشتۇرۇش ئۈچۈن يۆتكىدى . -
ياردەمچىسىنى قاچا- قۇچىلاردا
.visually-hidden-focusable
ئىشلەشكە كېڭەيتتى:focus-within
.
ياردەمچىلەر
-
Breaking مەسئۇلىيەتچان قىستۇرما ياردەمچىلەر يېڭى سىنىپ ئىسمى ۋە ھەرىكەتلىرى ياخشىلانغان ، شۇنداقلا پايدىلىق CSS ئۆزگەرگۈچى مىقدار نىسبىتى ياردەمچىلىرىگە ئۆزگەرتىلدى.
- دەرسلەر تەرەپ نىسبىتىگە ئۆزگەرتىش ئۈچۈن ئۆزگەرتىلدى
by
.x
مەسىلەن ،.ratio-16by9
ھازىر.ratio-16x9
. - بىز
.embed-responsive-item
ئېلېمېنت گۇرۇپپىسىنى تاللىغۇچىلارنى ئاددىيراق.ratio > *
تاللىغۇچقا تاشلاپ قويدۇق. ئەمدى دەرس لازىم ئەمەس ، نىسبەت ياردەمچىسى ھازىر ھەر قانداق HTML ئېلېمېنتى بىلەن ئىشلەيدۇ. $embed-responsive-aspect-ratios
Sass خەرىتىسى ئۆزگەرتىلگەن بولۇپ ، ئۇنىڭ$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()
- Sass ھۆججىتىنى
-
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"]')
-
popperConfig
Bootstrap نىڭ سۈكۈتتىكى Popper سەپلىمىسىنى تالاش-تارتىش سۈپىتىدە قوبۇل قىلىدىغان ئىقتىدار سۈپىتىدە يەتكۈزگىلى بولىدۇ ، بۇنداق بولغاندا بۇ سۈكۈتتىكى سەپلىمىنى بىرلەشتۈرەلەيسىز. چۈشۈش ، سەكرەش ۋە قورال قوراللىرىغا ماس كېلىدۇ. -
Popper ئېلېمېنتلىرىنى تېخىمۇ ياخشى ئورۇنلاشتۇرۇش ئۈچۈن سۈكۈتتىكى قىممىتى
fallbackPlacements
ئۆزگەرتىلدى . چۈشۈش ، سەكرەش ۋە قورال قوراللىرىغا ماس كېلىدۇ.['top', 'right', 'bottom', 'left']
-
_getInstance()
→ غا ئوخشاش ئاممىۋى تۇراقلىق ئۇسۇللاردىن ئاستى سىزىق چىقىرىۋېتىلدىgetInstance()
.