ප්‍රධාන අන්තර්ගතය වෙත යන්න ලේඛන සංචාලනය වෙත යන්න
Check
in English

v5 වෙත සංක්‍රමණය වේ

ඔබට v4 සිට v5 දක්වා සංක්‍රමණය වීමට උදවු කිරීම සඳහා Bootstrap මූලාශ්‍ර ගොනු, ලේඛන සහ සංරචකවල වෙනස්කම් නිරීක්ෂණය කර සමාලෝචනය කරන්න.

මෙම පිටුවේ

v5.2.0

නැවුම් නිර්මාණය

Bootstrap v5.2.0 ව්‍යාපෘතිය පුරා ඇති සංරචක සහ ගුණාංග අතලොස්සක් සඳහා සියුම් සැලසුම් යාවත්කාලීන කිරීමක් දක්වයි, විශේෂයෙන් border-radiusබොත්තම් සහ පෝරම පාලනයන්හි පිරිපහදු කළ අගයන් හරහා . අපගේ ප්‍රලේඛනය නව මුල් පිටුවක්, පැති තීරුවේ කොටස් තවදුරටත් කඩා නොවැටෙන සරල ලේඛන පිරිසැලසුම සහ Bootstrap Icons සඳහා වඩාත් කැපී පෙනෙන උදාහරණ සමඟ යාවත්කාලීන කර ඇත .

තවත් CSS විචල්‍යයන්

අපි CSS විචල්‍යයන් භාවිතා කිරීමට අපගේ සියලුම සංරචක යාවත්කාලීන කර ඇත. Sass තවමත් සෑම දෙයකටම මූලික වන අතර, සෑම සංරචකයක්ම CSS විචල්‍යයන් සංරචක පාදක පන්ති (උදා, .btn) ඇතුළත් කිරීමට යාවත්කාලීන කර ඇත, Bootstrap වඩාත් තත්‍ය කාලීන අභිරුචිකරණයට ඉඩ සලසයි. පසුකාලීන නිකුතු වලදී, අපි අපගේ CSS විචල්‍ය භාවිතය අපගේ පිරිසැලසුම, ආකෘති පත්‍ර, උපකාරකයින් සහ උපයෝගිතා වෙත ව්‍යාප්ත කරන්නෙමු. එක් එක් සංරචකය තුළ ඇති CSS විචල්‍යයන් ගැන ඔවුන්ගේ අදාළ ලේඛන පිටුවල කියවන්න.

Bootstrap 6 තෙක් අපගේ CSS විචල්‍ය භාවිතය යම් තරමකට අසම්පූර්ණ වනු ඇත. අපි මේවා සම්පූර්ණයෙන්ම ක්‍රියාත්මක කිරීමට කැමති වුවත්, ඒවා කැඩී බිඳී යාමේ අවදානමක් දරයි. උදාහරණයක් ලෙස, ඔබ කිසියම් හේතුවක් නිසා $alert-border-width: var(--bs-border-width)කරන්නේ නම් අපගේ මූල කේතය සැකසීමෙන් ඔබේම කේතයේ ඇති විය හැකි Sass බිඳ වැටේ .$alert-border-width * 2

එනිසා, හැකි සෑම අවස්ථාවකදීම, අපි තවත් CSS විචල්‍යයන් වෙතට තල්ලු කරනු ඇත, නමුත් කරුණාකර අපගේ ක්‍රියාත්මක කිරීම v5 හි තරමක් සීමා විය හැකි බව හඳුනා ගන්න.

අලුත්_maps.scss

Bootstrap v5.2.0 සමඟ නව Sass ගොනුවක් හඳුන්වා දෙන ලදී _maps.scss. _variables.scssමුල් සිතියමක යාවත්කාලීන කිරීම් ඒවා දිගු කරන ද්විතීයික සිතියම්වලට අදාළ නොකළ ගැටලුවක් විසඳීමට එය Sass සිතියම් කිහිපයක් ඉවත් කරයි. උදාහරණයක් ලෙස, වෙත යාවත්කාල කිරීම් $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 ජාල සැකැස්ම සඳහා තෝරා ගැනීමේදී .container-*, මෙම විකල්පය ලෙස සකසා නොමැති නම්, පන්ති තවමත් සම්පාදනය කෙරේ false. බහාලුම් ද දැන් ඒවායේ කාණු අගයන් තබා ගනී.

  • Offcanvas සංරචකයට දැන් ප්‍රතිචාරාත්මක වෙනස්කම් ඇත. මුල් .offcanvasපන්තිය නොවෙනස්ව පවතී—එය සියලුම බැලීම්පෝට් හරහා අන්තර්ගතය සඟවයි. එය ප්‍රතිචාර දැක්වීමට, එම .offcanvasපන්තිය ඕනෑම .offcanvas-{sm|md|lg|xl|xxl}පන්තියකට වෙනස් කරන්න.

  • ඝන මේස බෙදුම් දැන් තෝරා ඇත. — අපි වගු කණ්ඩායම් අතර ඇති ඝනකම සහ වඩා දුෂ්කර මායිම ඉවත් කර එය ඔබට යෙදිය හැකි විකල්ප පන්තියකට ගෙන ගියෙමු, .table-group-divider. උදාහරණයක් සඳහා වගු ලේඛන බලන්න.

  • Intersection Observer API භාවිතා කිරීම සඳහා Scrollspy නැවත ලියා ඇත , එයින් අදහස් වන්නේ ඔබට තවදුරටත් සාපේක්ෂ මාපිය එතුම,offsetකිරීම සහ තවත් දේ අවශ්‍ය නොවන බවයි. ඔබගේ Scrollspy ක්‍රියාත්මක කිරීම් ඔවුන්ගේ nav ඉස්මතු කිරීමේදී වඩාත් නිවැරදි සහ ස්ථාවර වීමට සොයන්න.

  • 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 ජාල සැකැස්ම සඳහා පර්යේෂණාත්මක සහාය එක් කරන ලදී . — මෙය ක්‍රියාත්මක වෙමින් පවතින කාර්යයක් වන අතර නිෂ්පාදන භාවිතය සඳහා තවමත් සූදානම් නැත, නමුත් ඔබට Sass හරහා නව විශේෂාංගය තෝරා ගත හැක. එය සබල කිරීමට, සැකසීමෙන් පෙරනිමි ජාලකය අක්‍රිය කරන්න $enable-grid-classes: falseසහ සැකසීමෙන් CSS ජාලකය සක්‍රීය කරන්න $enable-cssgrid: true.

  • offcanvas සඳහා සහය දැක්වීමට navbars යාවත්කාලීන කරන ලදී. - ප්‍රතිචාරාත්මක පන්ති සහ සමහර offcanvas සලකුණු සහිත ඕනෑම navbar එකක offcanvas ලාච්චු එක් කරන්න ..navbar-expand-*

  • නව ස්ථාන දරණ සංරචකය එක් කරන ලදී. — අපගේ නවතම සංරචකය, ඔබේ වෙබ් අඩවියේ හෝ යෙදුමේ තවමත් යමක් පූරණය වන බව දැක්වීමට උපකාර කිරීම සඳහා සැබෑ අන්තර්ගතය වෙනුවට තාවකාලික අවහිර කිරීම් සැපයීමේ මාර්ගයකි.

  • Collapse ප්ලගිනය දැන් තිරස් කඩා වැටීමට සහය දක්වයි . — වෙනුවට බිඳ වැටීමට .collapse-horizontalඔබේ වෙත එක් කරන්න . හෝ සැකසීමෙන් බ්‍රවුසරය නැවත පින්තාරු කිරීමෙන් වළකින්න ..collapsewidthheightmin-heightheight

  • නව තොග සහ සිරස් රීති සහායක එකතු කරන ලදී. - අට්ටි සහිත අභිරුචි පිරිසැලසුම් ඉක්මනින් නිර්මාණය කිරීමට බහු flexbox ගුණාංග ඉක්මනින් යොදන්න . .hstackතිරස් ( ) සහ සිරස් ( .vstack) අට්ටි වලින් තෝරන්න . නව සහායකයන්<hr> සමඟ මූලද්‍රව්‍යවලට සමාන සිරස් බෙදුම් එකතු කරන්න ..vr

  • නව ගෝලීය :rootCSS විචල්‍යයන් එකතු කරන ලදී. - මෝස්තර :rootපාලනය කිරීම සඳහා මට්ටමට නව CSS විචල්‍ය කිහිපයක් එක් කරන ලදී . <body>අපගේ උපයෝගිතා සහ සංරචක ඇතුළුව තවත් ඒවා ක්‍රියාත්මක වේ, නමුත් දැනට අභිරුචිකරණය කොටසේ CSS විචල්‍ය කියවන්න .

  • CSS විචල්‍යයන් භාවිතා කිරීම සඳහා නැවත සකස් කරන ලද වර්ණ සහ පසුබිම් උපයෝගිතා සහ නව පෙළ පාරාන්ධතාවය සහ පසුබිම් පාරාන්ධතා උපයෝගිතා එක් කරන ලදී. — .text-* සහ .bg-*උපයෝගිතා දැන් CSS විචල්‍යයන් සහ rgba()වර්ණ අගයන් සමඟ ගොඩනගා ඇත, නව පාරාන්ධතා උපයෝගිතා සමඟ ඕනෑම උපයෝගීතාවයක් පහසුවෙන් අභිරුචිකරණය කිරීමට ඔබට ඉඩ සලසයි.

  • අපගේ සංරචක අභිරුචිකරණය කරන ආකාරය පෙන්වීමට පදනම් වූ නව කොටස් උදාහරණ එකතු කරන ලදී. — අපගේ නව කොටස් උදාහරණ සමඟ අභිරුචි කළ සංරචක සහ අනෙකුත් පොදු මෝස්තර රටා භාවිතා කිරීමට සූදානම්ව අදින්න . පාදක , පතන , ලැයිස්තු කණ්ඩායම් සහ මාදිලි ඇතුළත් වේ.

  • මේවා තනිකරම Popper විසින් හසුරුවන බැවින් popovers සහ මෙවලම් ඉඟි වලින් භාවිත නොකළ ස්ථානගත කිරීමේ විලාස ඉවත් කරන ලදී. $tooltip-marginක්‍රියාවලියේදී අත්හරින ලද සහ සකසා ඇත null.

වැඩිදුර තොරතුරු අවශ්‍යද? v5.1.0 බ්ලොග් සටහන කියවන්න.

ඒයි මේ! Bootstrap 5 හි අපගේ පළමු ප්‍රධාන නිකුතුවේ වෙනස්කම්, v5.0.0, පහත ලේඛනගත කර ඇත. ඒවා ඉහත පෙන්වා ඇති අතිරේක වෙනස්කම් පිළිබිඹු නොකරයි.

යැපීම්

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

  • කඩනවාමුද්‍රණ මෝස්තර සහ $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 in v5.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-shadowmixins දැන් 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.cssbox-sizing: border-boxගෝලීය කොටු-ප්‍රමාණය යළි පිහිටුවීම වෙනුවට තීරුවට පමණක් අදාළ වේ . මේ ආකාරයෙන්, අපගේ ජාල මෝස්තර බාධාවකින් තොරව තවත් ස්ථානවල භාවිතා කළ හැකිය.

  • $enable-grid-classesතවදුරටත් බහාලුම් පන්ති උත්පාදනය අක්‍රීය නොකරයි. #29146 බලන්න.

  • make-colනියමිත ප්‍රමාණයකින් තොරව සමාන තීරු වලට පෙරනිමියට මික්සින් යාවත්කාලීන කරන ලදී .

අන්තර්ගතය, නැවත ආරම්භ කිරීම, ආදිය

  • RFS දැන් පෙරනිමියෙන් සක්‍රීය කර ඇත. මික්සින් භාවිතා කරන ශීර්ෂfont-size()ස්වයංක්‍රීයවfont-sizeදර්ශන තොට සමඟ පරිමාණයට සකසනු ඇත. මෙම විශේෂාංගය කලින් v4 සමඟින් ඇතුළත් විය.

  • කඩනවා$display-*අපගේ විචල්‍යයන් ප්‍රතිස්ථාපනය කිරීමට සහ $display-font-sizesSass සිතියමක් සමඟ අපගේ සංදර්ශක මුද්‍රණ ශිල්පය නැවත සකස් කරන ලදී. තනි සහ සකසන ලද s $display-*-weightසඳහා තනි විචල්‍ය ද ඉවත් කර ඇත.$display-font-weightfont-size

  • නව .display-*ශීර්ෂ ප්‍රමාණ දෙකක් එක් කරන ලදී, .display-5සහ .display-6.

  • ඒවා විශේෂිත සංරචකවල කොටසක් නම් මිස, සබැඳි පෙරනිමියෙන් යටින් ඉරි ඇඳ ඇත (හෝවර් මත පමණක් නොවේ).

  • හැඩගැන්වීම් පිළිබඳ වැඩි පාලනයක් සඳහා ඔවුන්ගේ මෝස්තර නැවුම් කිරීමට සහ CSS විචල්‍යයන් සමඟ ඒවා ප්‍රතිනිර්මාණය කිරීමට වගු ප්‍රතිනිර්මාණය කර ඇත.

  • කඩනවාකැදලි වගු තවදුරටත් මෝස්තර උරුම නොවේ.

  • කඩනවා .thead-lightසහ සියලුම වගු මූලද්‍රව්‍ය ( , , , සහ ) සඳහා භාවිතා කළ හැකි ප්‍රභේද පන්තිවලට .thead-darkපක්ෂව අත්හරිනු ලැබේ..table-*theadtbodytfoottrthtd

  • කඩනවාtable-row-variant()මික්සින් නැවත නම් කර ඇති අතර table-variant()පරාමිති 2 ක් පමණක් පිළිගනී: $color(වර්ණ නම) සහ $value(වර්ණ කේතය). මායිම් වර්ණය සහ උච්චාරණ වර්ණ වගු සාධක විචල්‍යයන් මත පදනම්ව ස්වයංක්‍රීයව ගණනය කෙරේ.

  • වගු සෛල පිරවුම් විචල්‍ය -yසහ ට බෙදන්න -x.

  • කඩනවා.pre-scrollableපන්තිය අතහැරියා . #29135 බලන්න

  • කඩනවා .text-*උපයෝගිතා තවදුරටත් සබැඳි වෙත hover සහ නාභිගත තත්වයන් එකතු නොකරයි. .link-*ඒ වෙනුවට උපකාරක පන්ති භාවිතා කළ හැක. #29267 බලන්න

  • කඩනවා.text-justifyපන්තිය අතහැරියා . #29793 බලන්න

  • කඩනවා <hr>මූලද්‍රව්‍ය දැන් උපලක්ෂණයට වඩා හොඳින් සහාය දැක්වීම heightවෙනුවට භාවිතා කරයි. මෙය ඝන බෙදුම් (උදා .bordersize<hr class="py-1">

  • පෙරනිමි තිරස් padding-leftමත <ul>සහ <ol>මූලද්‍රව්‍ය බ්‍රවුසරයේ පෙරනිමියෙන් 40pxයළි පිහිටුවන්න 2rem.

  • මාධ්‍ය විමසුම හරහා අඩු චලිතයක් ඉල්ලා සිටින පරිශීලකයින් හැර ගෝලීය වශයෙන් $enable-smooth-scrollඅදාළ වන , එකතු කරන ලදී. #31877 බලන්නscroll-behavior: smoothprefers-reduced-motion

RTL

  • තිරස් දිශාවට විශේෂිත විචල්‍යයන්, උපයෝගිතා සහ මිශ්‍රණයන් සියල්ල flexbox පිරිසැලසුම්වල ඇති තාර්කික ගුණාංග භාවිතා කිරීමට නැවත නම් කර ඇත-උදා, startසහ endවෙනුවට leftසහ right.

ආකෘති පත්ර

  • නව පාවෙන ආකෘති එකතු කරන ලදි! අපි පාවෙන ලේබල් උදාහරණය සම්පූර්ණයෙන් සහාය දක්වන ආකෘති සංරචක වෙත ප්‍රවර්ධනය කළෙමු. නව පාවෙන ලේබල් පිටුව බලන්න.

  • කඩනවා ඒකාබද්ධ ස්වදේශික සහ අභිරුචි ආකෘති මූලද්‍රව්‍ය. 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.

  • කඩනවාඅතහැර .input-group-appendදමා සහ .input-group-prepend. ඔබට දැන් බොත්තම් සහ .input-group-textආදාන කණ්ඩායම්වල සෘජු දරුවන් ලෙස එකතු කළ හැක.

  • වලංගුකරණ ප්‍රතිපෝෂණ දෝෂයක් සහිත ආදාන සමූහයේ දිගුකාලීන අතුරුදහන් වූ මායිම් අරය අවසාන වශයෙන් වලංගුකරණය සහිත ආදාන කණ්ඩායම්වලට අමතර .has-validationපන්තියක් එක් කිරීමෙන් නිරාකරණය කෙරේ.

  • කඩනවා අපගේ ජාල පද්ධතිය සඳහා පෝරමය-විශේෂිත පිරිසැලසුම් පන්ති අතහැර දමා ඇත. .form-group, .form-rowහෝ වෙනුවට අපගේ ජාලකය සහ උපයෝගිතා භාවිතා කරන්න .form-inline.

  • කඩනවාපෝරම ලේබල් දැන් අවශ්‍යයි .form-label.

  • කඩනවා .form-textතවදුරටත් displayසකසන්නේ නැත, HTML මූලද්‍රව්‍යය වෙනස් කිරීමෙන් ඔබට අවශ්‍ය පරිදි පේළිගත හෝ අවහිර උපකාරක පෙළ සෑදීමට ඔබට ඉඩ සලසයි.

  • ආකෘති පාලන තවදුරටත් heightහැකි විට ස්ථාවර ලෙස භාවිතා නොකරන අතර, ඒ වෙනුවට min-heightඅභිරුචිකරණය සහ අනෙකුත් සංරචක සමඟ ගැළපීම වැඩිදියුණු කිරීමට කල් දමයි.

  • වලංගුකරණ අයිකන තවදුරටත් <select>s සමඟ යෙදෙන්නේ නැත multiple.

  • scss/forms/ආදාන කණ්ඩායම් විලාසයන් ඇතුළුව, යටතේ ප්‍රතිසංවිධානය කරන ලද මූලාශ්‍ර Sass ගොනු .

සංරචක

  • අපගේ විචල්‍යය paddingමත පදනම් විය යුතු ඇඟවීම්, පාන් කැබලි, කාඩ්පත්, පතනයන්, ලැයිස්තු කණ්ඩායම්, ආකෘති, popovers සහ මෙවලම් ඉඟි සඳහා ඒකාබද්ධ අගයන්. #30564 බලන්න .$spacer

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-dividerCSS නැවත සම්පාදනය කිරීමට අවශ්‍ය නොවී පහසු අභිරුචිකරණය සඳහා නව 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 සංරචකයක් සමඟ ප්‍රතිස්ථාපනය කරන ලදී .

වසන්න බොත්තම

  • කඩනවාඅඩු සාමාන්‍ය නාමයක් සඳහා .closeනැවත නම් කරන ලදී..btn-close

  • වසන්න බොත්තම් දැන් HTML background-imageහි a වෙනුවට (Embedded SVG) භාවිතා කරයි &times;, ඔබේ සලකුණු කිරීම ස්පර්ශ කිරීමකින් තොරව පහසු අභිරුචිකරණයට ඉඩ සලසයි.

  • අඳුරු පසුබිම්වලට එරෙහිව ඉහළ ප්‍රතිවිරෝධතා ඉවත් කිරීමේ අයිකන සබල කිරීමට භාවිත කරන නව .btn-close-whiteප්‍රභේදයක් එක් කරන ලදී.filter: invert(1)

හකුළන්න

  • Accordions සඳහා අනුචලන නැංගුරම් ඉවත් කරන ලදී.

  • .dropdown-menu-darkඉල්ලුම මත අඳුරු පතන සඳහා නව ප්‍රභේදයක් සහ ආශ්‍රිත විචල්‍යයන් එක් කරන ලදී.

  • සඳහා නව විචල්‍යයක් එක් කරන ලදී $dropdown-padding-x.

  • වැඩිදියුණු කළ වෙනස සඳහා පතන බෙදුම්කරු අඳුරු කරන ලදී.

  • කඩනවාපතන සඳහා වන සියලුම සිදුවීම් දැන් පතන ටොගල් බොත්තම මත ක්‍රියාරම්භ කර පසුව මව් මූලද්‍රව්‍යය දක්වා බුබුලු වේ.

  • පතන මෙනු වලට දැන් data-bs-popper="static"උපලක්ෂණ කට්ටලයක් ඇත්තේ පතන ස්ථානගත කිරීම ස්ථිතික වන විට හෝ පතන නව තීරුවේ ඇති විටය. මෙය අපගේ ජාවාස්ක්‍රිප්ට් මගින් එකතු කර ඇති අතර පොපර්ගේ ස්ථානගත කිරීම්වලට බාධා නොකර අභිරුචි පිහිටුම් විලාසයන් භාවිත කිරීමට අපට උදවු කරයි.

  • කඩනවාස්වදේශික පොපර් flipවින්‍යාසයට පක්ෂව පතන ප්ලගිනය සඳහා වූ විකල්පය අතහැර දමා ඇත. ඔබට දැන් flip modifier fallbackPlacementsහි විකල්පය සඳහා හිස් අරාවක් පසුකර පෙරළීමේ හැසිරීම අක්‍රිය කළ හැක.

  • පතන මෙනු දැන් ස්වයංක්‍රීයව වසාautoClose දැමීමේ හැසිරීම හැසිරවීමට නව විකල්පයක් සමඟ ක්ලික් කළ හැක . එය අන්තර්ක්‍රියාකාරී කිරීමට පතන මෙනුව තුළ හෝ ඉන් පිටත ක්ලික් කිරීම පිළිගැනීමට ඔබට මෙම විකල්පය භාවිතා කළ හැක.

  • පතන දැන් .dropdown-items වලින් ඔතා ඇති <li>s වලට සහය දක්වයි.

ජම්බෝට්‍රොන්

ලැයිස්තු කණ්ඩායම

  • , , , සහ පන්තියට සඳහා නව nullවිචල්‍යයන් එක් කරන ලදී .font-sizefont-weightcolor:hover color.nav-link
  • කඩනවාNavbars හට දැන් ඇතුළත බහාලුමක් අවශ්‍ය වේ (අන්තර අවශ්‍යතා සහ CSS අවශ්‍ය විශාල ලෙස සරල කිරීමට).
  • කඩනවාපන්තිය .activeතවදුරටත් .nav-items වෙත යෙදිය නොහැක, එය කෙලින්ම s මත යෙදිය යුතුය .nav-link.

Offcanvas

පේජිනේෂන්

  • පැජිනේෂන් සබැඳි දැන් අභිරුචිකරණය කළ margin-leftහැකි අතර ඒවා එකින් එක වෙන් වූ විට සෑම කොනකම ගතිකව වටකුරු වේ.

  • transitionපේජිනේෂන් ලින්ක් වලට s එකතු කළා.

Popovers

  • කඩනවාඅපගේ පෙරනිමි popover අච්චුව වෙත නැවත නම් .arrowකරන ලදී..popover-arrow

  • විකල්පය whiteListලෙස නැවත නම් කරන ලදී allowList.

දඟ පන්දු යවන්නන්

  • දඟ පන්දු යවන්නන් දැන් prefers-reduced-motion: reduceසජීවිකරණ වේගය අඩු කිරීමෙන් ගෞරව කරති. #31882 බලන්න .

  • වැඩිදියුණු කරන ලද දඟ පන්දු යවන්නාගේ සිරස් පෙළගැස්ම.

ටෝස්ට්

  • ස්ථානගත කිරීමේ උපයෝගිතා ආධාරයෙන් ටෝස්ට් දැන් a තුළ ස්ථානගත කළ හැක ..toast-container

  • පෙරනිමි ටෝස්ට් කාලය තත්පර 5 දක්වා වෙනස් කරන ලදී.

  • ටෝස්ට් වලින් ඉවත් කර ශ්‍රිත overflow: hiddenසහිත නිසි border-radiuss සමඟ ප්‍රතිස්ථාපනය කර 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>

  • , , සහ සඳහා නව ස්ථාන උපයෝගිතා එක් කරන ලදී . එක් එක් දේපල සඳහා අගයන් , , සහ ඇතුළත් වේ.toprightbottomleft050%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-ratiosSass සිතියම නැවත නම් කර ඇති අතර $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().

  • bootstrap-utilities.cssදැන් අපගේ සහායකයින් ද ඇතුළත් වේ. තවදුරටත් අභිරුචි ගොඩනැගීම් තුළ උපකාරකයින් ආනයනය කිරීමට අවශ්‍ය නොවේ.

JavaScript

  • jQuery පරායත්තතාවය අතහැර දමා සාමාන්‍ය ජාවාස්ක්‍රිප්ට් වල ඇති ප්ලගීන නැවත ලිවීය.

  • කඩනවාසියලුම ජාවාස්ක්‍රිප්ට් ප්ලගීන සඳහා දත්ත උපලක්ෂණ දැන් බූට්ස්ට්‍රැප් ක්‍රියාකාරීත්වය තෙවන පාර්ශවයන්ගෙන් සහ ඔබේම කේතයෙන් වෙන්කර හඳුනා ගැනීමට උපකාරී වේ. උදාහරණයක් ලෙස, අපි data-bs-toggleවෙනුවට භාවිතා කරමු data-toggle.

  • සියලුම ප්ලගීන වලට දැන් CSS තේරීම්කාරකයක් පළමු තර්කය ලෙස පිළිගත හැක. ප්ලගිනයේ නව අවස්ථාවක් නිර්මාණය කිරීමට ඔබට DOM මූලද්‍රව්‍යයක් හෝ ඕනෑම වලංගු CSS තේරීමක් සමත් විය හැක:

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

  • popperConfigBootstrap හි පෙරනිමි පොපර් වින්‍යාසය තර්කයක් ලෙස පිළිගන්නා ශ්‍රිතයක් ලෙස සම්මත කළ හැක, එවිට ඔබට මෙම පෙරනිමි වින්‍යාසය ඔබේ ආකාරයට ඒකාබද්ධ කළ හැක. dropdowns, popovers, සහ මෙවලම් ඉඟි වලට අදාළ වේ.

  • සඳහා පෙරනිමි අගය පොපර් මූලද්‍රව්‍ය වඩා හොඳ ස්ථානගත කිරීම සඳහා fallbackPlacementsවෙනස් කර ඇත. dropdowns, popovers, සහ මෙවලම් ඉඟි වලට අදාළ වේ.['top', 'right', 'bottom', 'left']

  • _getInstance()→ වැනි පොදු ස්ථිතික ක්‍රමවලින් යටි ඉරි ඉවත් කරන getInstance()ලදී.