പ്രധാന ഉള്ളടക്കത്തിലേക്ക് പോകുക ഡോക്‌സ് നാവിഗേഷനിലേക്ക് പോകുക
in English

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 കാണുക .

അക്രോഡിയൻ

അലേർട്ടുകൾ

ബാഡ്ജുകൾ

  • ബ്രേക്കിംഗ്.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 ഉപയോഗിച്ച് അധിഷ്ഠിത അക്കോഡിയൻ മാറ്റിസ്ഥാപിച്ചു .

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

  • ബ്രേക്കിംഗ്കുറഞ്ഞ ജനറിക് പേരിനായി പുനർനാമകരണം .closeചെയ്തു ..btn-close

  • ക്ലോസ് ബട്ടണുകൾ ഇപ്പോൾ HTML-ൽ എ-ന് background-imageപകരം ഒരു (ഉൾച്ചേർത്ത SVG) ഉപയോഗിക്കുന്നു &times;, ഇത് നിങ്ങളുടെ മാർക്ക്അപ്പിൽ സ്പർശിക്കാതെ തന്നെ എളുപ്പത്തിൽ ഇഷ്‌ടാനുസൃതമാക്കാൻ അനുവദിക്കുന്നു.

  • ഇരുണ്ട പശ്ചാത്തലത്തിൽ ഉയർന്ന കോൺട്രാസ്റ്റ് ഡിസ്മിസ് ഐക്കണുകൾ പ്രവർത്തനക്ഷമമാക്കാൻ .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-നെ പിന്തുണയ്ക്കുന്നു.

ജംബോട്രോൺ

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

  • ക്ലാസിലേക്ക് , , , എന്നിവയ്ക്കായി പുതിയ 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().