v5 වෙත සංක්රමණය වේ
ඔබට v4 සිට v5 දක්වා සංක්රමණය වීමට උදවු කිරීම සඳහා Bootstrap මූලාශ්ර ගොනු, ලේඛන සහ සංරචකවල වෙනස්කම් නිරීක්ෂණය කර සමාලෝචනය කරන්න.
යැපීම්
- jQuery අතහැරියා.
- Popper v1.x සිට Popper v2.x දක්වා උත්ශ්රේණි කරන ලදී.
- අපගේ Sass සම්පාදකය ලෙස Libsass වෙනුවට Dart Sass ප්රතිස්ථාපනය කරන ලදී Libsass ලබා දී ඇත.
- අපගේ ලේඛන ගොඩනැගීම සඳහා ජෙකිල් සිට හියුගෝ වෙත සංක්රමණය විය
බ්රවුසර සහාය
- ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 10 සහ 11 අතහැර දමා ඇත
- අතහැර දැමූ Microsoft Edge < 16 (Legacy Edge)
- ෆයර්ෆොක්ස් <60 අතහැරිය
- Safari < 12 අතහැරියා
- iOS Safari < 12 අතහැර දමන ලදී
- ක්රෝම් <60 අත්හැරිය
ලේඛන වෙනස්කම්
- ප්රතිනිර්මාණය කරන ලද මුල් පිටුව, ලේඛන පිරිසැලසුම සහ පාදකය.
- නව පාර්සල් මාර්ගෝපදේශයක් එක් කරන ලදී.
- Sass , ගෝලීය වින්යාස විකල්ප, වර්ණ පටිපාටි, CSS විචල්යයන් සහ තවත් බොහෝ දේ පිළිබඳ නව විස්තර සහිත v4 හි තේමා පිටුව ප්රතිස්ථාපනය කරමින් නව අභිරුචිකරණ අංශය එක් කරන ලදී.
- සියලුම පෝරම ලියකියවිලි නව පෝරම කොටසකට ප්රතිසංවිධානය කරන ලද අතර, අන්තර්ගතය වඩාත් අවධානය යොමු කරන ලද පිටු වලට කැඩී යයි.
- ඒ හා සමානව, ජාලක අන්තර්ගතය වඩාත් පැහැදිලිව ඉවත් කිරීමට, පිරිසැලසුම් කොටස යාවත්කාලීන කරන ලදී.
- "Navs" සංරචක පිටුව "Navs & Tabs" ලෙස නැවත නම් කරන ලදී.
- "පරීක්ෂා කිරීම්" පිටුව "පරීක්ෂා කිරීම් සහ ගුවන්විදුලි" ලෙස නැවත නම් කරන ලදී.
- නව තීරුව ප්රතිනිර්මාණය කර අපගේ වෙබ් අඩවි සහ ලේඛන අනුවාද වෙත යාම පහසු කිරීම සඳහා නව subnav එකක් එක් කරන ලදී.
- සෙවුම් ක්ෂේත්රය සඳහා නව යතුරුපුවරු කෙටිමඟ එක් කරන ලදී: Ctrl + /.
සාස්
-
අතිරික්ත අගයන් ඉවත් කිරීම පහසු කිරීම සඳහා අපි පෙරනිමි Sass සිතියම් ඒකාබද්ධ කිරීම් ඉවත් කළෙමු. ඔබට දැන් Sass සිතියම්වල ඇති සියලුම අගයන් නිර්වචනය කළ යුතු බව මතක තබා ගන්න
$theme-colors
. Sass සිතියම් සමඟ කටයුතු කරන්නේ කෙසේදැයි පරීක්ෂා කරන්න . -
කඩනවාඑය තවදුරටත් YIQ වර්ණ අවකාශයට සම්බන්ධ නොවන බැවින් ශ්රිතය
color-yiq()
සහ අදාළ විචල්ය නැවත නම් කරන ලදී. #30168 බලන්න.color-contrast()
$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 බලන්න Watch out:color-level()
was later on drop inv5.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()
-
කඩනවාSass ගේම වර්ණ පරිමාණ ශ්රිතය සමඟ ගැටීම වැලැක්වීමට
scale-color()
ශ්රිතය නැවත නම් කරන ලදී .shift-color()
-
box-shadow
mixins දැන්null
අගයන් වලට ඉඩ දෙනnone
අතර බහු තර්ක වලින් පහත වැටේ. #30394 බලන්න . -
Mixin දැන්
border-radius()
පෙරනිමි අගයක් ඇත.
වර්ණ පද්ධතිය
-
නව වර්ණ පද්ධතියකට පක්ෂව ක්රියා කළ
color-level()
සහ ඉවත් කරන ලද වර්ණ පද්ධතිය.$theme-color-interval
අපගේ කේත පදනමේ ඇති සියලුමlighten()
සහdarken()
කාර්යයන් ප්රතිස්ථාපනය කරනු ලබන්නේtint-color()
සහshade-color()
. මෙම ක්රියාකාරකම් මඟින් එහි සැහැල්ලු බව ස්ථාවර ප්රමාණයකින් වෙනස් කරනවා වෙනුවට වර්ණය සුදු හෝ කළු සමඟ මිශ්ර කරනු ඇත. එහිshift-color()
බර පරාමිතිය ධනාත්මක හෝ ඍණාත්මකද යන්න මත පදනම්ව වර්ණය වර්ණ ගැන්වීම හෝ සෙවන ලබා දෙනු ඇත. වැඩි විස්තර සඳහා #30622 බලන්න. -
නව සාස් විචල්යයන් ලෙස සෑම වර්ණයක් සඳහාම නව ටින්ට් සහ සෙවන එක් කරන ලද අතර, එක් එක් මූලික වර්ණය සඳහා වෙන වෙනම වර්ණ නවයක් සපයයි.
-
වැඩිදියුණු කළ වර්ණ වෙනස. 3:1 සිට 4.5:1 දක්වා වර්ණ ප්රතිවිරෝධතා අනුපාතය සහ WCAG 2.1 AA ප්රතිවිරුද්ධතාව සහතික කිරීම සඳහා නිල්, කොළ, සයන් සහ රෝස වර්ණ යාවත්කාලීන කරන ලදී. ඒ වගේම අපේ වර්ණ පරස්පර වර්ණය සිට දක්වා වෙනස්
$gray-900
කළා$black
. -
අපගේ වර්ණ පද්ධතියට සහය දැක්වීම සඳහා, අපි අපගේ වර්ණ සුදුසු පරිදි මිශ්ර කිරීමට නව අභිරුචි
tint-color()
සහshade-color()
කාර්යයන් එකතු කර ඇත.
ජාල යාවත්කාලීන
-
නව කඩඉමක්!
xxl
සඳහා සහ ඉහළට නව කඩඉම් ලක්ෂ්යය එක් කරන1400px
ලදී. අනෙකුත් සියලුම කඩඉම් ලකුණු වලට වෙනස්කම් නොමැත. -
වැඩි දියුණු කළ කාණු. ගටර දැන් rems වලින් සකසා ඇති අතර, v4 (
1.5rem
, හෝ පමණ24px
, සිට පහළට30px
) වඩා පටු වේ. මෙය අපගේ ජාල පද්ධතියේ කාණු අපගේ පරතරය උපයෝගිතා සමඟ පෙළගස්වයි.- තිරස්/සිරස් පීලි, තිරස් කානු සහ සිරස් කාණු පාලනය කිරීම සඳහා නව කාණු පන්තිය (
.g-*
,.gx-*
, සහ ) එක් කරන ලදී..gy-*
- කඩනවා
.no-gutters
නව කාණු උපයෝගිතා වලට.g-0
ගැලපෙන ලෙස නැවත නම් කරන ලදී.
- තිරස්/සිරස් පීලි, තිරස් කානු සහ සිරස් කාණු පාලනය කිරීම සඳහා නව කාණු පන්තිය (
-
තීරු තවදුරටත්
position: relative
යෙදී නැත, එබැවින්.position-relative
එම හැසිරීම ප්රතිසාධනය කිරීමට ඔබට සමහර මූලද්රව්යවලට එක් කිරීමට සිදු විය හැක. -
කඩනවා
.order-*
බොහෝ විට භාවිතයට නොගත් පන්ති කිහිපයක් අතහැර දමා ඇත . අපි දැන් සපයන්නේ කොටුවෙන් පිටත.order-1
අයට පමණි..order-5
-
කඩනවා
.media
උපයෝගිතා සමඟ පහසුවෙන් අනුකරණය කළ හැකි බැවින් සංරචකය අතහැර දමන ලදී . උදාහරණයක් සඳහා #28265 සහ flex උපයෝගිතා පිටුව බලන්න . -
කඩනවා
bootstrap-grid.css
box-sizing: border-box
ගෝලීය කොටු-ප්රමාණය යළි පිහිටුවීම වෙනුවට තීරුවට පමණක් අදාළ වේ . මේ ආකාරයෙන්, අපගේ ජාල මෝස්තර බාධාවකින් තොරව තවත් ස්ථානවල භාවිතා කළ හැකිය. -
$enable-grid-classes
තවදුරටත් බහාලුම් පන්ති උත්පාදනය අක්රීය නොකරයි. #29146 බලන්න. -
make-col
නියමිත ප්රමාණයකින් තොරව සමාන තීරු වලට පෙරනිමියට මික්සින් යාවත්කාලීන කරන ලදී .
අන්තර්ගතය, නැවත ආරම්භ කිරීම, ආදිය
-
RFS දැන් පෙරනිමියෙන් සක්රීය කර ඇත. මික්සින් භාවිතා කරන ශීර්ෂ
font-size()
ස්වයංක්රීයවfont-size
දර්ශන තොට සමඟ පරිමාණයට සකසනු ඇත. මෙම විශේෂාංගය කලින් v4 සමඟින් ඇතුළත් විය. -
කඩනවා
$display-*
අපගේ විචල්යයන් ප්රතිස්ථාපනය කිරීමට සහ$display-font-sizes
Sass සිතියමක් සමඟ අපගේ සංදර්ශක මුද්රණ ශිල්පය නැවත සකස් කරන ලදී. තනි සහ සකසන ලද s$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-*
උපයෝගිතා තවදුරටත් සබැඳි වෙත hover සහ නාභිගත තත්වයන් එකතු නොකරයි..link-*
ඒ වෙනුවට උපකාරක පන්ති භාවිතා කළ හැක. #29267 බලන්න -
කඩනවා
.text-justify
පන්තිය අතහැරියා . #29793 බලන්න -
පෙරනිමි තිරස්
padding-left
මත<ul>
සහ<ol>
මූලද්රව්ය බ්රවුසරයේ පෙරනිමියෙන්40px
යළි පිහිටුවන්න2rem
. -
මාධ්ය විමසුම හරහා අඩු චලිතයක් ඉල්ලා සිටින පරිශීලකයින් හැර ගෝලීය වශයෙන්
$enable-smooth-scroll
අදාළ වන , එකතු කරන ලදී. #31877 බලන්නscroll-behavior: smooth
prefers-reduced-motion
RTL
- තිරස් දිශාවට විශේෂිත විචල්යයන්, උපයෝගිතා සහ මිශ්රණයන් සියල්ල flexbox පිරිසැලසුම්වල ඇති තාර්කික ගුණාංග භාවිතා කිරීමට නැවත නම් කර ඇත-උදා,
start
සහend
වෙනුවටleft
සහright
.
ආකෘති පත්ර
-
නව පාවෙන ආකෘති එකතු කරන ලදි! අපි පාවෙන ලේබල් උදාහරණය සම්පූර්ණයෙන් සහාය දක්වන ආකෘති සංරචක වෙත ප්රවර්ධනය කළෙමු. නව පාවෙන ලේබල් පිටුව බලන්න.
-
කඩනවා ඒකාබද්ධ ස්වදේශික සහ අභිරුචි ආකෘති මූලද්රව්ය. 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
.
-
කඩනවාඅතහැර
.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/
ආදාන කණ්ඩායම් විලාසයන් ඇතුළුව, යටතේ ප්රතිසංවිධානය කරන ලද මූලාශ්ර Sass ගොනු .
සංරචක
- අපගේ විචල්යය
padding
මත පදනම් විය යුතු ඇඟවීම්, පාන් කැබලි, කාඩ්පත්, පතනයන්, ලැයිස්තු කණ්ඩායම්, ආකෘති, popovers සහ මෙවලම් ඉඟි සඳහා ඒකාබද්ධ අගයන්. #30564 බලන්න .$spacer
Accordion
- නව Accordion සංරචකය එකතු කරන ලදී.
ඇඟවීම්
-
ඇඟවීම් දැන් අයිකන සහිත උදාහරණ ඇත .
-
<hr>
ඔවුන් දැනටමත් භාවිතා කරන බැවින් එක් එක් ඇඟවීම් තුළ s සඳහා අභිරුචි මෝස්තර ඉවත් කරන ලදීcurrentColor
.
ලාංඡන
-
කඩනවාපසුබිම් උපයෝගිතා සඳහා සියලුම
.badge-*
වර්ණ පන්ති අතහැර දමා ඇත (උදා,.bg-primary
වෙනුවට භාවිතා කරන්න.badge-primary
). -
කඩනවාඅතහැර
.badge-pill
දැමුවා - ඒ.rounded-pill
වෙනුවට උපයෝගීතාව භාවිතා කරන්න. -
කඩනවා
<a>
සහ<button>
මූලද්රව්ය සඳහා hover සහ Focus styles ඉවත් කරන ලදී. -
.25em
/ සිට /.5em
දක්වා.35em
ලාංඡන සඳහා පෙරනිමි පිරවුම වැඩි කිරීම.65em
.
පාන් කුඩු
-
ඉවත් කිරීම මගින් පාන් කුඩු වල පෙරනිමි පෙනුම සරල කර ඇත
padding
,background-color
සහborder-radius
. -
--bs-breadcrumb-divider
CSS නැවත සම්පාදනය කිරීමට අවශ්ය නොවී පහසු අභිරුචිකරණය සඳහා නව CSS අභිරුචි දේපල එක් කරන ලදී.
බොත්තම්
-
කඩනවා ටොගල් බොත්තම් , පිරික්සුම් කොටු හෝ රේඩියෝ සමඟ, තවදුරටත් JavaScript අවශ්ය නොවන අතර නව සලකුණු ඇත. අපට තවදුරටත් එතීමේ මූලද්රව්යයක් අවශ්ය නොවේ, ට එකතු කරන්න
.btn-check
,<input>
සහ එය මත ඇති ඕනෑම.btn
පන්තියක් සමඟ යුගල කරන්න<label>
. #30650 බලන්න . මේ සඳහා ලේඛන අපගේ බොත්තම් පිටුවෙන් නව පෝරම කොටස වෙත මාරු වී ඇත. -
කඩනවා උපයෝගිතා
.btn-block
සඳහා අතහැර දමා ඇත..btn-block
මත භාවිතා කරනවා වෙනුවට.btn
, ඔබේ බොත්තම් ඔතා අවශ්ය පරිදි ඉඩ ලබා දීමට උපයෝගී කර.d-grid
ගන්න ..gap-*
ඒවාට වඩා වැඩි පාලනයක් සඳහා ප්රතිචාරාත්මක පන්ති වෙත මාරු වන්න. උදාහරණ කිහිපයක් සඳහා docs කියවන්න. -
අතිරේක පරාමිතීන් සඳහා සහය දැක්වීම සඳහා අපගේ
button-variant()
සහ මික්සින් යාවත්කාලීන කරන ලදී.button-outline-variant()
-
hover සහ සක්රිය තත්ත්වයේ වැඩි ප්රතිවිරෝධතාව සහතික කිරීම සඳහා යාවත්කාලීන කරන ලද බොත්තම්.
-
ආබාධිත බොත්තම් දැන් තිබේ
pointer-events: none;
.
කාඩ්පත
-
කඩනවා
.card-deck
අපේ ජාලයට පක්ෂව අතහැරියා . තීරු පන්තිවල ඔබේ කාඩ්පත්.row-cols-*
ඔතා කාඩ්පත් තට්ටු ප්රතිනිර්මාණය කිරීමට මාපිය බහාලුමක් එක් කරන්න (නමුත් ප්රතිචාරාත්මක පෙළගැස්ම පිළිබඳ වැඩි පාලනයක් සහිතව). -
කඩනවාපෙදරේරු
.card-columns
ශිල්පයට පක්ෂව අතහැරියා. #28922 බලන්න . -
කඩනවා
.card
පදනම් වූ Accordion නව Accordion සංරචකයක් සමඟ ප්රතිස්ථාපනය කරන ලදී .
කැරොසල්
-
අඳුරු පෙළ, පාලන සහ දර්ශක සඳහා නව
.carousel-dark
ප්රභේදයක් එක් කරන ලදී (සැහැල්ලු පසුබිම් සඳහා විශිෂ්ටයි). -
Bootstrap Icons වෙතින් නව SVG සමඟ කැරොසල් පාලන සඳහා chevron අයිකන ප්රතිස්ථාපනය කරන ලදී.
වසන්න බොත්තම
-
කඩනවාඅඩු සාමාන්ය නාමයක් සඳහා
.close
නැවත නම් කරන ලදී..btn-close
-
වසන්න බොත්තම් දැන් HTML
background-image
හි a වෙනුවට (Embedded SVG) භාවිතා කරයි×
, ඔබේ සලකුණු කිරීම ස්පර්ශ කිරීමකින් තොරව පහසු අභිරුචිකරණයට ඉඩ සලසයි. -
අඳුරු පසුබිම්වලට එරෙහිව ඉහළ ප්රතිවිරෝධතා ඉවත් කිරීමේ අයිකන සබල කිරීමට භාවිත කරන නව
.btn-close-white
ප්රභේදයක් එක් කරන ලදී.filter: invert(1)
හකුළන්න
- Accordions සඳහා අනුචලන නැංගුරම් ඉවත් කරන ලදී.
පතනයන්
-
.dropdown-menu-dark
ඉල්ලුම මත අඳුරු පතන සඳහා නව ප්රභේදයක් සහ ආශ්රිත විචල්යයන් එක් කරන ලදී. -
සඳහා නව විචල්යයක් එක් කරන ලදී
$dropdown-padding-x
. -
වැඩිදියුණු කළ වෙනස සඳහා පතන බෙදුම්කරු අඳුරු කරන ලදී.
-
කඩනවාපතන සඳහා වන සියලුම සිදුවීම් දැන් පතන ටොගල් බොත්තම මත ක්රියාරම්භ කර පසුව මව් මූලද්රව්යය දක්වා බුබුලු වේ.
-
පතන මෙනුවල දැන්
data-bs-popper="static"
පතන ස්ථානගත කිරීම ස්ථිතික වනdata-bs-popper="none"
විට සහ පතන නව තීරුවේ ඇති විට ගුණාංග කට්ටලයක් ඇත. මෙය අපගේ ජාවාස්ක්රිප්ට් මගින් එකතු කර ඇති අතර පොපර්ගේ ස්ථානගත කිරීම්වලට බාධා නොකර අභිරුචි පිහිටුම් විලාසයන් භාවිත කිරීමට අපට උදවු කරයි. -
කඩනවාස්වදේශික පොපර්
flip
වින්යාසයට පක්ෂව පතන ප්ලගිනය සඳහා වූ විකල්පය අතහැර දමා ඇත. ඔබට දැන් flip modifierfallbackPlacements
හි විකල්පය සඳහා හිස් අරාවක් පසුකර පෙරළීමේ හැසිරීම අක්රිය කළ හැක. -
පතන මෙනු දැන් ස්වයංක්රීයව වසා
autoClose
දැමීමේ හැසිරීම හැසිරවීමට නව විකල්පයක් සමඟ ක්ලික් කළ හැක . එය අන්තර්ක්රියාකාරී කිරීමට පතන මෙනුව තුළ හෝ ඉන් පිටත ක්ලික් කිරීම පිළිගැනීමට ඔබට මෙම විකල්පය භාවිතා කළ හැක. -
පතන දැන්
.dropdown-item
s වලින් ඔතා ඇති<li>
s වලට සහය දක්වයි.
ජම්බෝට්රොන්
- කඩනවාජම්බෝට්රොන් සංරචකය උපයෝගිතා සමඟ ප්රතිනිර්මාණය කළ හැකි බැවින් එය අතහැර දමන ලදී. demo එකක් සඳහා අපගේ නව Jumbotron උදාහරණය බලන්න.
ලැයිස්තු කණ්ඩායම
- ලැයිස්තු කණ්ඩායම් වෙත නව
.list-group-numbered
විකරණයක් එක් කරන ලදී.
Navs සහ ටැබ්
- , , , සහ පන්තියට සඳහා නව
null
විචල්යයන් එක් කරන ලදී .font-size
font-weight
color
:hover
color
.nav-link
නවබාර්ස්
- කඩනවාNavbars හට දැන් ඇතුළත බහාලුමක් අවශ්ය වේ (අන්තර අවශ්යතා සහ CSS අවශ්ය විශාල ලෙස සරල කිරීමට).
Offcanvas
- නව offcanvas සංරචකය එක් කරන ලදී .
පේජිනේෂන්
-
පැජිනේෂන් සබැඳි දැන් අභිරුචිකරණය කළ
margin-left
හැකි අතර ඒවා එකින් එක වෙන් වූ විට සෑම කොනකම ගතිකව වටකුරු වේ. -
transition
පේජිනේෂන් ලින්ක් වලට s එකතු කළා.
Popovers
-
කඩනවාඅපගේ පෙරනිමි popover අච්චුව වෙත නැවත නම්
.arrow
කරන ලදී..popover-arrow
-
විකල්පය
whiteList
ලෙස නැවත නම් කරන ලදීallowList
.
දඟ පන්දු යවන්නන්
-
දඟ පන්දු යවන්නන් දැන්
prefers-reduced-motion: reduce
සජීවිකරණ වේගය අඩු කිරීමෙන් ගෞරව කරති. #31882 බලන්න . -
වැඩිදියුණු කරන ලද දඟ පන්දු යවන්නාගේ සිරස් පෙළගැස්ම.
ටෝස්ට්
-
ස්ථානගත කිරීමේ උපයෝගිතා ආධාරයෙන් ටෝස්ට් දැන් a තුළ ස්ථානගත කළ හැක .
.toast-container
-
පෙරනිමි ටෝස්ට් කාලය තත්පර 5 දක්වා වෙනස් කරන ලදී.
-
ටෝස්ට් වලින් ඉවත් කර ශ්රිත
overflow: hidden
සහිත නිසිborder-radius
s සමඟ ප්රතිස්ථාපනය කර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-*
-
CSS Grid සහ flexbox පිරිසැලසුම් සඳහා උපයෝගිතා සහ නව උපයෝගිතා ( ) ප්රදර්ශනය
.d-grid
කිරීමටgap
එක් කරන ලදී..gap
-
කඩනවාඉවත් කරන ලද
.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
Sass සිතියම නැවත නම් කර ඇති අතර$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()
.
- සිට Sass ගොනුව වෙනස් කරන
-
bootstrap-utilities.css
දැන් අපගේ සහායකයින් ද ඇතුළත් වේ. තවදුරටත් අභිරුචි ගොඩනැගීම් තුළ උපකාරකයින් ආනයනය කිරීමට අවශ්ය නොවේ.
JavaScript
-
jQuery පරායත්තතාවය අතහැර දමා සාමාන්ය ජාවාස්ක්රිප්ට් වල ඇති ප්ලගීන නැවත ලිවීය.
-
කඩනවාසියලුම ජාවාස්ක්රිප්ට් ප්ලගීන සඳහා දත්ත උපලක්ෂණ දැන් බූට්ස්ට්රැප් ක්රියාකාරීත්වය තෙවන පාර්ශවයන්ගෙන් සහ ඔබේම කේතයෙන් වෙන්කර හඳුනා ගැනීමට උපකාරී වේ. උදාහරණයක් ලෙස, අපි
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 හි පෙරනිමි පොපර් වින්යාසය තර්කයක් ලෙස පිළිගන්නා ශ්රිතයක් ලෙස සම්මත කළ හැක, එවිට ඔබට මෙම පෙරනිමි වින්යාසය ඔබේ ආකාරයට ඒකාබද්ධ කළ හැක. dropdowns, popovers, සහ මෙවලම් ඉඟි වලට අදාළ වේ. -
සඳහා පෙරනිමි අගය පොපර් මූලද්රව්ය වඩා හොඳ ස්ථානගත කිරීම සඳහා
fallbackPlacements
වෙනස් කර ඇත. dropdowns, popovers, සහ මෙවලම් ඉඟි වලට අදාළ වේ.['top', 'right', 'bottom', 'left']
-
_getInstance()
→ වැනි පොදු ස්ථිතික ක්රමවලින් යටි ඉරි ඉවත් කරනgetInstance()
ලදී.