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

යැපීම්

• 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-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-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 සංරචකයක් සමඟ ප්‍රතිස්ථාපනය කරන ලදී .

කැරොසල්

• අඳුරු පෙළ, පාලන සහ දර්ශක සඳහා නව .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 modifier fallbackPlacementsහි විකල්පය සඳහා හිස් අරාවක් පසුකර පෙරළීමේ හැසිරීම අක්‍රිය කළ හැක.

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

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

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

• කඩනවාජම්බෝට්‍රොන් සංරචකය උපයෝගිතා සමඟ ප්‍රතිනිර්මාණය කළ හැකි බැවින් එය අතහැර දමන ලදී. demo එකක් සඳහා අපගේ නව Jumbotron උදාහරණය බලන්න.

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

• ලැයිස්තු කණ්ඩායම් වෙත නව .list-group-numberedවිකරණයක් එක් කරන ලදී.

Navs සහ ටැබ්

• , , , සහ පන්තියට සඳහා නව nullවිචල්‍යයන් එක් කරන ලදී .font-sizefont-weightcolor: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-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 තේරීමක් සමත් විය හැක:

  පිටපත් කරන්න

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

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

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

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