v5-ലേക്ക് മൈഗ്രേറ്റ് ചെയ്യുന്നു

v4-ൽ നിന്ന് v5-ലേക്ക് മൈഗ്രേറ്റ് ചെയ്യാൻ നിങ്ങളെ സഹായിക്കുന്നതിന് ബൂട്ട്‌സ്‌ട്രാപ്പ് സോഴ്‌സ് ഫയലുകൾ, ഡോക്യുമെന്റേഷൻ, ഘടകങ്ങൾ എന്നിവയിലെ മാറ്റങ്ങൾ ട്രാക്ക് ചെയ്യുകയും അവലോകനം ചെയ്യുകയും ചെയ്യുക.

ഈ പേജിൽ

ആശ്രിതത്വം

jQuery ഉപേക്ഷിച്ചു.
പോപ്പർ v1.x-ൽ നിന്ന് പോപ്പർ v2.x-ലേക്ക് അപ്‌ഗ്രേഡ് ചെയ്‌തു.
ഞങ്ങളുടെ Sass കംപൈലറായി Libsass-ന് പകരം Dart Sass നൽകിയ ലിബ്സാസ് ഒഴിവാക്കി.
ഞങ്ങളുടെ ഡോക്യുമെന്റേഷൻ നിർമ്മിക്കുന്നതിനായി ജെക്കിലിൽ നിന്ന് ഹ്യൂഗോയിലേക്ക് കുടിയേറി

ബ്രൗസർ പിന്തുണ

ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ 10 ഉം 11 ഉം ഉപേക്ഷിച്ചു
മൈക്രോസോഫ്റ്റ് എഡ്ജ് <16 (ലെഗസി എഡ്ജ്) ഉപേക്ഷിച്ചു
ഫയർഫോക്സ് <60 ഉപേക്ഷിച്ചു
സഫാരി <12 ഉപേക്ഷിച്ചു
iOS സഫാരി <12 ഉപേക്ഷിച്ചു
Chrome <60 ഉപേക്ഷിച്ചു

ഡോക്യുമെന്റേഷൻ മാറ്റങ്ങൾ

പുനർരൂപകൽപ്പന ചെയ്ത ഹോംപേജ്, ഡോക്സ് ലേഔട്ട്, അടിക്കുറിപ്പ്.
പുതിയ പാർസൽ ഗൈഡ് ചേർത്തു .
സാസ്, ഗ്ലോബൽ കോൺഫിഗറേഷൻ ഓപ്ഷനുകൾ, വർണ്ണ സ്കീമുകൾ, CSS വേരിയബിളുകൾ എന്നിവയും അതിലേറെയും സംബന്ധിച്ച പുതിയ വിശദാംശങ്ങളോടെ, v4 ന്റെ തീമിംഗ് പേജിന് പകരം പുതിയ ഇഷ്‌ടാനുസൃതമാക്കൽ വിഭാഗം ചേർത്തു .
എല്ലാ ഫോം ഡോക്യുമെന്റേഷനും പുതിയ ഫോം വിഭാഗത്തിലേക്ക് പുനഃസംഘടിപ്പിച്ചു , ഉള്ളടക്കത്തെ കൂടുതൽ ഫോക്കസ് ചെയ്ത പേജുകളായി വിഭജിച്ചു.
അതുപോലെ, ഗ്രിഡ് ഉള്ളടക്കം കൂടുതൽ വ്യക്തമായി പുറത്തെടുക്കാൻ ലേഔട്ട് വിഭാഗം അപ്ഡേറ്റ് ചെയ്തു .
"Navs" ഘടക പേജ് "Navs & Tabs" എന്ന് പുനർനാമകരണം ചെയ്തു.
"ചെക്കുകൾ" പേജ് "ചെക്കുകളും റേഡിയോകളും" എന്ന് പുനർനാമകരണം ചെയ്തു.
ഞങ്ങളുടെ സൈറ്റുകളും ഡോക്‌സ് പതിപ്പുകളും എളുപ്പമാക്കുന്നതിന് നവബാർ പുനർരൂപകൽപ്പന ചെയ്യുകയും ഒരു പുതിയ സബ്‌നാവ് ചേർക്കുകയും ചെയ്‌തു.
തിരയൽ ഫീൽഡിനായി പുതിയ കീബോർഡ് കുറുക്കുവഴി ചേർത്തു: Ctrl + /.

സാസ്

അനാവശ്യ മൂല്യങ്ങൾ നീക്കംചെയ്യുന്നത് എളുപ്പമാക്കുന്നതിന് ഞങ്ങൾ സ്ഥിരസ്ഥിതി Sass മാപ്പ് ലയനങ്ങൾ ഒഴിവാക്കി. നിങ്ങൾ ഇപ്പോൾ സാസ് മാപ്പുകളിലെ എല്ലാ മൂല്യങ്ങളും നിർവചിക്കേണ്ടത് പോലെ ഓർക്കുക $theme-colors. സാസ് മാപ്പുകൾ എങ്ങനെ കൈകാര്യം ചെയ്യണമെന്ന് പരിശോധിക്കുക .
ബ്രേക്കിംഗ്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 ശ്രദ്ധിക്കൂ: color-level() പിന്നീട് ഡ്രോപ്പ് ചെയ്തു 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-focushover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(അനുബന്ധ യൂട്ടിലിറ്റി ക്ലാസും ഉപേക്ഷിച്ചു, .text-hide)
- visibility()
- form-control-focus()
ബ്രേക്കിംഗ്സാസിന്റെ സ്വന്തം കളർ സ്കെയിലിംഗ് ഫംഗ്‌ഷനുമായുള്ള കൂട്ടിയിടി ഒഴിവാക്കാൻ ഫംഗ്‌ഷന്റെ പേര് 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()
ഓരോ നിറത്തിനും പുതിയ ടിന്റുകളും ഷേഡുകളും ചേർത്തു, പുതിയ സാസ് വേരിയബിളുകളായി ഓരോ അടിസ്ഥാന നിറത്തിനും ഒമ്പത് വ്യത്യസ്ത നിറങ്ങൾ നൽകുന്നു.
മെച്ചപ്പെട്ട വർണ്ണ കോൺട്രാസ്റ്റ്. WCAG 2.1 AA കോൺട്രാസ്റ്റ് ഉറപ്പാക്കാൻ 3:1 മുതൽ 4.5:1 വരെ വർണ്ണ കോൺട്രാസ്റ്റ് അനുപാതം, നീല, പച്ച, സിയാൻ, പിങ്ക് നിറങ്ങൾ അപ്ഡേറ്റ് ചെയ്തു. കൂടാതെ ഞങ്ങളുടെ വർണ്ണ കോൺട്രാസ്റ്റ് വർണ്ണത്തിൽ നിന്ന് $gray-900ലേക്ക് മാറ്റി $black.
ഞങ്ങളുടെ വർണ്ണ സംവിധാനത്തെ പിന്തുണയ്ക്കുന്നതിന്, ഞങ്ങളുടെ നിറങ്ങൾ ഉചിതമായി മിക്സ് ചെയ്യുന്നതിനായി ഞങ്ങൾ പുതിയ ഇഷ്‌ടാനുസൃതവും tint-color()പ്രവർത്തനങ്ങളും shade-color()ചേർത്തിട്ടുണ്ട്.

ഗ്രിഡ് അപ്ഡേറ്റുകൾ

പുതിയ ബ്രേക്ക്‌പോയിന്റ്! അതിനായി പുതിയ xxlബ്രേക്ക്‌പോയിന്റ് ചേർത്തു 1400px. മറ്റെല്ലാ ബ്രേക്ക്‌പോയിന്റുകളിലും മാറ്റങ്ങളൊന്നുമില്ല.
മെച്ചപ്പെട്ട ഗട്ടറുകൾ. ഗട്ടറുകൾ ഇപ്പോൾ റെംസിൽ സജ്ജീകരിച്ചിരിക്കുന്നു, അവ v4 നേക്കാൾ ഇടുങ്ങിയതാണ് ( 1.5rem, അല്ലെങ്കിൽ ഏകദേശം 24px, താഴെ നിന്ന് 30px). ഇത് ഞങ്ങളുടെ ഗ്രിഡ് സിസ്റ്റത്തിന്റെ ഗട്ടറുകളെ ഞങ്ങളുടെ സ്‌പെയ്‌സിംഗ് യൂട്ടിലിറ്റികളുമായി വിന്യസിക്കുന്നു.
- തിരശ്ചീന/ലംബ ഗട്ടറുകൾ, തിരശ്ചീന ഗട്ടറുകൾ, ലംബ ഗട്ടറുകൾ എന്നിവ നിയന്ത്രിക്കാൻ പുതിയ ഗട്ടർ ക്ലാസ് ( .g-*, .gx-*, കൂടാതെ ) ചേർത്തു..gy-*
- ബ്രേക്കിംഗ്പുതിയ ഗട്ടർ യൂട്ടിലിറ്റികളുമായി പൊരുത്തപ്പെടുന്നതിന് പേരുമാറ്റി .no-gutters..g-0
നിരകൾ മേലിൽ പ്രയോഗിച്ചിട്ടില്ല, അതിനാൽ ആ സ്വഭാവം പുനഃസ്ഥാപിക്കാൻ position: relativeനിങ്ങൾ ചില ഘടകങ്ങളിലേക്ക് ചേർക്കേണ്ടി വന്നേക്കാം ..position-relative
ബ്രേക്കിംഗ്.order-*പലപ്പോഴും ഉപയോഗിക്കാതെ പോയ പല ക്ലാസുകളും ഉപേക്ഷിച്ചു. ഞങ്ങൾ ഇപ്പോൾ ബോക്‌സിന് പുറത്തുള്ളവർക്ക് മാത്രം .order-1നൽകുന്നു ..order-5
ബ്രേക്കിംഗ്.mediaയൂട്ടിലിറ്റികൾ ഉപയോഗിച്ച് എളുപ്പത്തിൽ പകർത്താൻ കഴിയുന്നതിനാൽ ഘടകം ഉപേക്ഷിച്ചു . ഒരു ഉദാഹരണത്തിനായി #28265 , ഫ്ലെക്സ് യൂട്ടിലിറ്റീസ് പേജ് എന്നിവ കാണുക .
ബ്രേക്കിംഗ് bootstrap-grid.cssbox-sizing: border-boxആഗോള ബോക്‌സ് വലുപ്പം പുനഃസജ്ജമാക്കുന്നതിനുപകരം ഇപ്പോൾ കോളത്തിന് മാത്രമേ ബാധകമാകൂ . ഇതുവഴി, ഞങ്ങളുടെ ഗ്രിഡ് ശൈലികൾ തടസ്സങ്ങളില്ലാതെ കൂടുതൽ സ്ഥലങ്ങളിൽ ഉപയോഗിക്കാൻ കഴിയും.
$enable-grid-classesഇനി കണ്ടെയ്‌നർ ക്ലാസുകളുടെ ജനറേഷൻ പ്രവർത്തനരഹിതമാക്കില്ല. #29146 കാണുക.
make-colമിക്‌സിൻ ഡിഫോൾട്ടായി ഒരു നിർദ്ദിഷ്‌ട വലുപ്പമില്ലാതെ തുല്യ നിരകളിലേക്ക് അപ്‌ഡേറ്റ് ചെയ്‌തു .

ഉള്ളടക്കം, റീബൂട്ട് മുതലായവ

RFS ഇപ്പോൾ ഡിഫോൾട്ടായി പ്രവർത്തനക്ഷമമാക്കിയിരിക്കുന്നു. മിക്‌സിൻ ഉപയോഗിക്കുന്നവ്യൂപോർട്ട് ഉപയോഗിച്ച് അവയുടെ സ്കെയിലിലേക്ക്font-size()സ്വയമേവ ക്രമീകരിക്കുംഈ ഫീച്ചർ മുമ്പ് v4 ഉപയോഗിച്ച് ഓപ്റ്റ്-ഇൻ ചെയ്തിരുന്നു.font-size
ബ്രേക്കിംഗ്$display-*ഞങ്ങളുടെ വേരിയബിളുകൾ മാറ്റി ഒരു $display-font-sizesസാസ് മാപ്പ് ഉപയോഗിച്ച് ഞങ്ങളുടെ ഡിസ്പ്ലേ ടൈപ്പോഗ്രാഫി ഓവർഹോൾ ചെയ്തു. $display-*-weightഒറ്റയ്‌ക്കുള്ള വ്യക്തിഗത വേരിയബിളുകൾ നീക്കം $display-font-weightചെയ്‌ത് ക്രമീകരിച്ച font-sizes.
രണ്ട് പുതിയ .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-*യൂട്ടിലിറ്റികൾ ഇനി ലിങ്കുകളിലേക്ക് ഹോവർ, ഫോക്കസ് സ്റ്റേറ്റുകൾ ചേർക്കില്ല. .link-*പകരം ഹെൽപ്പർ ക്ലാസുകൾ ഉപയോഗിക്കാം. #29267 കാണുക
ബ്രേക്കിംഗ്ക്ലാസ് ഉപേക്ഷിച്ചു .text-justify. #29793 കാണുക
ബ്രേക്കിംഗ് <hr>ആട്രിബ്യൂട്ടിനെ നന്നായി പിന്തുണയ്ക്കുന്നതിന് heightപകരം ഘടകങ്ങൾ ഇപ്പോൾ ഉപയോഗിക്കുന്നു . കട്ടിയുള്ള ഡിവൈഡറുകൾ സൃഷ്ടിക്കാൻ പാഡിംഗ് യൂട്ടിലിറ്റികളുടെ ഉപയോഗവും ഇത് സാധ്യമാക്കുന്നു (ഉദാ, ).bordersize<hr class="py-1">
ഡിഫോൾട്ട് ഹോറിസോണ്ടൽ ഓണും ബ്രൗസർ ഡിഫോൾട്ടിൽ നിന്ന് എലമെന്റുകളും padding-leftറീസെറ്റ് ചെയ്യുക .<ul><ol>40px2rem
ചേർത്തു $enable-smooth-scroll, ഇത് ആഗോളതലത്തിൽ ബാധകമാണ് - മീഡിയ അന്വേഷണത്തിലൂടെ scroll-behavior: smoothകുറഞ്ഞ ചലനം ആവശ്യപ്പെടുന്ന ഉപയോക്താക്കൾ ഒഴികെ . #31877 കാണുകprefers-reduced-motion

RTL

തിരശ്ചീന ദിശയിലുള്ള നിർദ്ദിഷ്ട വേരിയബിളുകൾ, യൂട്ടിലിറ്റികൾ, മിക്സിനുകൾ എന്നിവയെല്ലാം ഫ്ലെക്‌സ്ബോക്‌സ് ലേഔട്ടുകളിൽ കാണപ്പെടുന്ന ലോജിക്കൽ പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കുന്നതിനായി പുനർനാമകരണം ചെയ്‌തു-ഉദാ 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അലേർട്ടുകൾ, ബ്രെഡ്ക്രംബ്സ്, കാർഡുകൾ, ഡ്രോപ്പ്ഡൌണുകൾ, ലിസ്റ്റ് ഗ്രൂപ്പുകൾ, മോഡലുകൾ, പോപോവറുകൾ, ടൂൾടിപ്പുകൾ എന്നിവയ്‌ക്കായുള്ള ഏകീകൃത മൂല്യങ്ങൾ ഞങ്ങളുടെ $spacerവേരിയബിളിനെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്. #30564 കാണുക .

അക്രോഡിയൻ

പുതിയ അക്കോഡിയൻ ഘടകം ചേർത്തു .

അലേർട്ടുകൾ

അലേർട്ടുകൾക്ക് ഇപ്പോൾ ഐക്കണുകളുള്ള ഉദാഹരണങ്ങളുണ്ട് .
ഓരോ അലേർട്ടിലെയും ഇഷ്‌ടാനുസൃത ശൈലികൾ <hr>അവർ ഇതിനകം ഉപയോഗിക്കുന്നതിനാൽ നീക്കം ചെയ്‌തു currentColor.

ബാഡ്ജുകൾ

ബ്രേക്കിംഗ്.badge-*പശ്ചാത്തല യൂട്ടിലിറ്റികൾക്കായി എല്ലാ കളർ ക്ലാസുകളും ഉപേക്ഷിച്ചു (ഉദാ, .bg-primaryപകരം ഉപയോഗിക്കുക .badge-primary).
ബ്രേക്കിംഗ്ഉപേക്ഷിച്ചു .badge-pill- .rounded-pillപകരം യൂട്ടിലിറ്റി ഉപയോഗിക്കുക.
ബ്രേക്കിംഗ്ഘടകങ്ങൾക്കും ഹോവർ <a>, ഫോക്കസ് ശൈലികൾ നീക്കം ചെയ്തു .<button>
.25em/ .5emമുതൽ .35em/ വരെയുള്ള ബാഡ്ജുകൾക്കുള്ള ഡിഫോൾട്ട് പാഡിംഗ് വർദ്ധിപ്പിച്ചു .65em.

ബ്രെഡ്ക്രംബ്സ്

നീക്കം paddingചെയ്തുകൊണ്ട് ബ്രെഡ്ക്രംബ്സിന്റെ ഡിഫോൾട്ട് രൂപം ലളിതമാക്കി .background-colorborder-radius
--bs-breadcrumb-dividerCSS വീണ്ടും കംപൈൽ ചെയ്യാതെ തന്നെ എളുപ്പത്തിലുള്ള കസ്റ്റമൈസേഷനായി പുതിയ CSS ഇഷ്‌ടാനുസൃത പ്രോപ്പർട്ടി ചേർത്തു .

ബട്ടണുകൾ

ബ്രേക്കിംഗ് ചെക്ക്‌ബോക്‌സുകളോ റേഡിയോകളോ ഉള്ള ടോഗിൾ ബട്ടണുകൾ , ഇനി JavaScript ആവശ്യമില്ല, പുതിയ മാർക്ക്അപ്പ് ഉണ്ടായിരിക്കും. ഞങ്ങൾക്ക് ഇനി ഒരു റാപ്പിംഗ് എലമെന്റ് ആവശ്യമില്ല, എന്നതിലേക്ക് ചേർക്കുകയും.btn-check,ക്ലാസുകളുമായി<input>ജോടിയാക്കുകയും. #30650 കാണുക . ഇതിനായുള്ള ഡോക്‌സ് ഞങ്ങളുടെ ബട്ടണുകൾ പേജിൽ നിന്ന് പുതിയ ഫോം വിഭാഗത്തിലേക്ക് നീങ്ങി..btn<label>
ബ്രേക്കിംഗ് യൂട്ടിലിറ്റികൾക്കായി ഉപേക്ഷിച്ചു .btn-block. എന്നതിൽ ഉപയോഗിക്കുന്നതിനുപകരം .btn-block, .btnനിങ്ങളുടെ ബട്ടണുകൾ ഉപയോഗിച്ച് .d-gridപൊതിയുക .gap-*. അവരുടെ മേൽ കൂടുതൽ നിയന്ത്രണത്തിനായി പ്രതികരിക്കുന്ന ക്ലാസുകളിലേക്ക് മാറുക. ചില ഉദാഹരണങ്ങൾക്കായി ഡോക്‌സ് വായിക്കുക.
അധിക പാരാമീറ്ററുകൾ പിന്തുണയ്ക്കുന്നതിനായി ഞങ്ങളുടെയും മിക്സിനുകളും അപ്ഡേറ്റ് button-variant()ചെയ്തു .button-outline-variant()
ഹോവറിലും സജീവമായ അവസ്ഥകളിലും വർദ്ധിച്ച ദൃശ്യതീവ്രത ഉറപ്പാക്കാൻ ബട്ടണുകൾ അപ്ഡേറ്റ് ചെയ്തു.
പ്രവർത്തനരഹിതമാക്കിയ ബട്ടണുകൾക്ക് ഇപ്പോൾ ഉണ്ട് pointer-events: none;.

കാർഡ്

ബ്രേക്കിംഗ്ഞങ്ങളുടെ ഗ്രിഡിന് .card-deckഅനുകൂലമായി ഉപേക്ഷിച്ചു. കോളം ക്ലാസുകളിൽ നിങ്ങളുടെ കാർഡുകൾ പൊതിഞ്ഞ് .row-cols-*കാർഡ് ഡെക്കുകൾ പുനഃസൃഷ്‌ടിക്കാൻ ഒരു പാരന്റ് കണ്ടെയ്‌നർ ചേർക്കുക (എന്നാൽ പ്രതികരിക്കുന്ന വിന്യാസത്തിൽ കൂടുതൽ നിയന്ത്രണത്തോടെ).
ബ്രേക്കിംഗ്കൊത്തുപണിക്ക് .card-columnsഅനുകൂലമായി ഉപേക്ഷിച്ചു. #28922 കാണുക .
ബ്രേക്കിംഗ്ഒരു പുതിയ അക്കോഡിയൻ ഘടകം.card ഉപയോഗിച്ച് അധിഷ്ഠിത അക്കോഡിയൻ മാറ്റിസ്ഥാപിച്ചു .

കറൗസൽ

ഇരുണ്ട ടെക്‌സ്‌റ്റ്, നിയന്ത്രണങ്ങൾ, സൂചകങ്ങൾ എന്നിവയ്‌ക്കായി പുതിയ .carousel-darkവേരിയന്റ് ചേർത്തു (വെളുത്ത പശ്ചാത്തലങ്ങൾക്ക് മികച്ചത്).
ബൂട്ട്‌സ്‌ട്രാപ്പ് ഐക്കണുകളിൽ നിന്നുള്ള പുതിയ SVG-കൾ ഉപയോഗിച്ച് കറൗസൽ നിയന്ത്രണങ്ങൾക്കായി ഷെവ്‌റോൺ ഐക്കണുകൾ മാറ്റിസ്ഥാപിച്ചു .

ബട്ടൺ അടയ്ക്കുക

ബ്രേക്കിംഗ്കുറഞ്ഞ ജനറിക് പേരിനായി പുനർനാമകരണം .closeചെയ്തു ..btn-close
ക്ലോസ് ബട്ടണുകൾ ഇപ്പോൾ HTML-ൽ എ-ന് background-imageപകരം ഒരു (ഉൾച്ചേർത്ത SVG) ഉപയോഗിക്കുന്നു ×, ഇത് നിങ്ങളുടെ മാർക്ക്അപ്പിൽ സ്പർശിക്കാതെ തന്നെ എളുപ്പത്തിൽ ഇഷ്‌ടാനുസൃതമാക്കാൻ അനുവദിക്കുന്നു.
ഇരുണ്ട പശ്ചാത്തലത്തിൽ ഉയർന്ന കോൺട്രാസ്റ്റ് ഡിസ്മിസ് ഐക്കണുകൾ പ്രവർത്തനക്ഷമമാക്കാൻ .btn-close-whiteഉപയോഗിക്കുന്ന പുതിയ വേരിയന്റ് ചേർത്തു .filter: invert(1)

ചുരുക്കുക

അക്കോഡിയനുകൾക്കുള്ള സ്ക്രോൾ ആങ്കറിംഗ് നീക്കം ചെയ്തു.

ഡ്രോപ്പ്ഡൗണുകൾ

.dropdown-menu-darkഓൺ-ഡിമാൻഡ് ഡാർക്ക് ഡ്രോപ്പ്ഡൗണുകൾക്കായി പുതിയ വേരിയന്റും അനുബന്ധ വേരിയബിളുകളും ചേർത്തു .
എന്നതിനായി പുതിയ വേരിയബിൾ ചേർത്തു $dropdown-padding-x.
മെച്ചപ്പെട്ട ദൃശ്യതീവ്രതയ്ക്കായി ഡ്രോപ്പ്ഡൗൺ ഡിവൈഡർ ഇരുണ്ടതാക്കി.
ബ്രേക്കിംഗ്ഡ്രോപ്പ്ഡൗണിനായുള്ള എല്ലാ ഇവന്റുകളും ഇപ്പോൾ ഡ്രോപ്പ്ഡൗൺ ടോഗിൾ ബട്ടണിൽ പ്രവർത്തനക്ഷമമാക്കുകയും തുടർന്ന് പാരന്റ് എലമെന്റിലേക്ക് ബബിൾ ചെയ്യുകയും ചെയ്യുന്നു.
data-bs-popper="static"ഡ്രോപ്പ്‌ഡൗണിന്റെ പൊസിഷനിംഗ് സ്റ്റാറ്റിക് ആയിരിക്കുമ്പോഴും ഡ്രോപ്പ്‌ഡൗൺ നവ്‌ബാറിൽ ആയിരിക്കുമ്പോഴും ഡ്രോപ്പ്‌ഡൗൺ മെനുകൾക്ക് ഒരു ആട്രിബ്യൂട്ട് സെറ്റ് ഉണ്ട് data-bs-popper="none". ഇത് ഞങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് ചേർത്തതാണ് കൂടാതെ പോപ്പറിന്റെ പൊസിഷനിംഗിൽ ഇടപെടാതെ തന്നെ ഇഷ്‌ടാനുസൃത സ്ഥാന ശൈലികൾ ഉപയോഗിക്കാൻ ഞങ്ങളെ സഹായിക്കുന്നു.
ബ്രേക്കിംഗ്flipനേറ്റീവ് പോപ്പർ കോൺഫിഗറേഷന് അനുകൂലമായ ഡ്രോപ്പ്ഡൗൺ പ്ലഗിനിനുള്ള ഓപ്ഷൻ ഉപേക്ഷിച്ചു . ഫ്ലിപ്പ് മോഡിഫയറിലെ fallbackPlacementsഓപ്ഷനായി ഒരു ശൂന്യമായ അറേ കടന്നുപോകുന്നതിലൂടെ നിങ്ങൾക്ക് ഇപ്പോൾ ഫ്ലിപ്പിംഗ് സ്വഭാവം പ്രവർത്തനരഹിതമാക്കാം .
സ്വയമേവ അടയ്‌ക്കുന്ന സ്വഭാവംautoClose കൈകാര്യം ചെയ്യുന്നതിനുള്ള ഒരു പുതിയ ഓപ്ഷൻ ഉപയോഗിച്ച് ഡ്രോപ്പ്‌ഡൗൺ മെനുകൾ ഇപ്പോൾ ക്ലിക്കുചെയ്യാനാകും . ഡ്രോപ്പ്ഡൗൺ മെനുവിന് അകത്തോ പുറത്തോ ഉള്ള ക്ലിക്ക് സ്വീകരിക്കാൻ നിങ്ങൾക്ക് ഈ ഓപ്‌ഷൻ ഉപയോഗിക്കാം, അത് ഇന്ററാക്ടീവ് ആക്കാനാകും.
ഡ്രോപ്പ്ഡൗണുകൾ ഇപ്പോൾ .dropdown-items-ൽ പൊതിഞ്ഞ <li>s-നെ പിന്തുണയ്ക്കുന്നു.

ജംബോട്രോൺ

ബ്രേക്കിംഗ്യൂട്ടിലിറ്റികൾ ഉപയോഗിച്ച് പകർത്താൻ കഴിയുന്നതിനാൽ ജംബോട്രോൺ ഘടകം ഉപേക്ഷിച്ചു. ഒരു ഡെമോയ്‌ക്കായി ഞങ്ങളുടെ പുതിയ ജംബോട്രോൺ ഉദാഹരണം കാണുക.

ലിസ്റ്റ് ഗ്രൂപ്പ്

ലിസ്റ്റ് ഗ്രൂപ്പുകളിലേക്ക് പുതിയ .list-group-numberedമോഡിഫയർ ചേർത്തു.

നാവുകളും ടാബുകളും

ക്ലാസിലേക്ക് , , , എന്നിവയ്ക്കായി പുതിയ nullവേരിയബിളുകൾ ചേർത്തു .font-sizefont-weightcolor:hover color.nav-link

നവബാറുകൾ

ബ്രേക്കിംഗ്Navbars-ന് ഇപ്പോൾ അതിനുള്ളിൽ ഒരു കണ്ടെയ്‌നർ ആവശ്യമാണ് (സ്‌പെയ്‌സിംഗ് ആവശ്യകതകളും CSS ആവശ്യവും വളരെ ലളിതമാക്കാൻ).

ഓഫ്കാൻവാസ്

പുതിയ ഓഫ്‌കാൻവാസ് ഘടകം ചേർത്തു .

പേജിനേഷൻ

പേജിനേഷൻ ലിങ്കുകൾക്ക് ഇപ്പോൾ ഇഷ്‌ടാനുസൃതമാക്കാവുന്നതാണ് margin-left, അവ പരസ്പരം വേർതിരിക്കുമ്പോൾ എല്ലാ കോണുകളിലും ചലനാത്മകമായി വൃത്താകൃതിയിലാണ്.
transitionപേജിനേഷൻ ലിങ്കുകളിൽ s ചേർത്തു .

പോപോവറുകൾ

ബ്രേക്കിംഗ്ഞങ്ങളുടെ ഡിഫോൾട്ട് പോപ്പോവർ ടെംപ്ലേറ്റിൽ പേരുമാറ്റി .arrow..popover-arrow
ലേക്ക് പുനർനാമകരണം whiteListചെയ്ത ഓപ്ഷൻ allowList.

സ്പിന്നർമാർ

സ്പിന്നർമാർ ഇപ്പോൾ prefers-reduced-motion: reduceആനിമേഷനുകൾ മന്ദഗതിയിലാക്കി ബഹുമാനിക്കുന്നു. #31882 കാണുക .
മെച്ചപ്പെട്ട സ്പിന്നർ ലംബ വിന്യാസം.

ടോസ്റ്റുകൾ

പൊസിഷനിംഗ് യൂട്ടിലിറ്റികളുടെ.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 ഗ്രിഡിനും ഫ്ലെക്സ്ബോക്സ് ലേഔട്ടുകൾക്കുമായി യൂട്ടിലിറ്റികളും .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സാസ് മാപ്പിന്റെ പേര് മാറ്റി , $aspect-ratiosക്ലാസിന്റെ പേരും ശതമാനവും key: valueജോഡിയായി ഉൾപ്പെടുത്തുന്നതിനായി അതിന്റെ മൂല്യങ്ങൾ ലളിതമാക്കിയിരിക്കുന്നു.
- സാസ് മാപ്പിലെ ഓരോ മൂല്യത്തിനും CSS വേരിയബിളുകൾ ഇപ്പോൾ ജനറേറ്റ് ചെയ്യുകയും ഉൾപ്പെടുത്തുകയും ചെയ്യുന്നു. ഏതെങ്കിലും ഇഷ്‌ടാനുസൃത വീക്ഷണാനുപാതം സൃഷ്‌ടിക്കാൻ --bs-aspect-ratioഎന്നതിലെ വേരിയബിൾ പരിഷ്‌ക്കരിക്കുക ..ratio
ബ്രേക്കിംഗ് “സ്‌ക്രീൻ റീഡർ” ക്ലാസുകൾ ഇപ്പോൾ “ദൃശ്യമായി മറഞ്ഞിരിക്കുന്ന” ക്ലാസുകളാണ് .
- എന്നതിൽ നിന്ന് Sass ഫയൽ scss/helpers/_screenreaders.scssമാറ്റിscss/helpers/_visually-hidden.scss
- പേരുമാറ്റി .sr-only, ഒപ്പം .sr-only-focusable_.visually-hidden.visually-hidden-focusable
- Renamed sr-only() and sr-only-focusable() mixins to visually-hidden() and visually-hidden-focusable().
bootstrap-utilities.css now also includes our helpers. Helpers don’t need to be imported in custom builds anymore.

JavaScript

Dropped jQuery dependency and rewrote plugins to be in regular JavaScript.
Breaking Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use data-bs-toggle instead of data-toggle.
All plugins can now accept a CSS selector as the first argument. You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin:
```
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfig can be passed as a function that accepts the Bootstrap’s default Popper config as an argument, so that you can merge this default configuration in your way. Applies to dropdowns, popovers, and tooltips.
The default value for the fallbackPlacements is changed to ['top', 'right', 'bottom', 'left'] for better placement of Popper elements. Applies to dropdowns, popovers, and tooltips.
Removed underscore from public static methods like _getInstance() → getInstance().