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

v5.2.0

പുതുക്കിയ ഡിസൈൻ

ബൂട്ട്‌സ്‌ട്രാപ്പ് v5.2.0 പ്രോജക്‌റ്റിലുടനീളമുള്ള ഒരുപിടി ഘടകങ്ങൾക്കും പ്രോപ്പർട്ടികൾക്കുമായി ഒരു സൂക്ഷ്മമായ ഡിസൈൻ അപ്‌ഡേറ്റ് അവതരിപ്പിക്കുന്നു, പ്രത്യേകിച്ചും border-radiusബട്ടണുകളിലും ഫോം നിയന്ത്രണങ്ങളിലും പരിഷ്‌ക്കരിച്ച മൂല്യങ്ങൾ വഴി . ഞങ്ങളുടെ ഡോക്യുമെന്റേഷൻ ഒരു പുതിയ ഹോംപേജ്, സൈഡ്‌ബാറിന്റെ വിഭാഗങ്ങളെ ഇനി പൊളിക്കാത്ത ലളിതമായ ഡോക്‌സ് ലേഔട്ട്, ബൂട്ട്‌സ്‌ട്രാപ്പ് ഐക്കണുകളുടെ കൂടുതൽ പ്രമുഖ ഉദാഹരണങ്ങൾ എന്നിവ ഉപയോഗിച്ച് അപ്‌ഡേറ്റുചെയ്‌തു .

കൂടുതൽ CSS വേരിയബിളുകൾ

CSS വേരിയബിളുകൾ ഉപയോഗിക്കുന്നതിന് ഞങ്ങളുടെ എല്ലാ ഘടകങ്ങളും ഞങ്ങൾ അപ്ഡേറ്റ് ചെയ്തിട്ടുണ്ട്. Sass ഇപ്പോഴും എല്ലാത്തിനും അടിവരയിടുന്നുണ്ടെങ്കിലും, ഓരോ ഘടകവും ഘടക ബേസ് ക്ലാസുകളിൽ (ഉദാ, ) CSS വേരിയബിളുകൾ ഉൾപ്പെടുത്തുന്നതിനായി അപ്‌ഡേറ്റുചെയ്‌തു .btn, ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ കൂടുതൽ തത്സമയ ഇഷ്‌ടാനുസൃതമാക്കൽ അനുവദിക്കുന്നു. തുടർന്നുള്ള റിലീസുകളിൽ, ഞങ്ങളുടെ ലേഔട്ട്, ഫോമുകൾ, സഹായികൾ, യൂട്ടിലിറ്റികൾ എന്നിവയിലേക്ക് CSS വേരിയബിളുകളുടെ ഉപയോഗം വിപുലീകരിക്കുന്നത് ഞങ്ങൾ തുടരും. ഓരോ ഘടകത്തിലുമുള്ള CSS വേരിയബിളുകളെക്കുറിച്ച് അവയുടെ അതാത് ഡോക്യുമെന്റേഷൻ പേജുകളിൽ കൂടുതൽ വായിക്കുക.

ബൂട്ട്‌സ്‌ട്രാപ്പ് 6 വരെ ഞങ്ങളുടെ CSS വേരിയബിൾ ഉപയോഗം ഒരു പരിധിവരെ അപൂർണ്ണമായിരിക്കും. ബോർഡിൽ ഉടനീളം ഇവ പൂർണ്ണമായി നടപ്പിലാക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിലും, അവ തകർക്കുന്ന മാറ്റങ്ങൾക്ക് കാരണമാകും. ഉദാഹരണത്തിന്, $alert-border-width: var(--bs-border-width)നിങ്ങൾ $alert-border-width * 2ചില കാരണങ്ങളാൽ ചെയ്യുകയാണെങ്കിൽ ഞങ്ങളുടെ സോഴ്സ് കോഡിൽ സജ്ജീകരിക്കുന്നത് നിങ്ങളുടെ സ്വന്തം കോഡിലെ സാസ് സാധ്യതയെ തകർക്കുന്നു.

അതുപോലെ, സാധ്യമാകുന്നിടത്തെല്ലാം, ഞങ്ങൾ കൂടുതൽ CSS വേരിയബിളുകളിലേക്ക് നീങ്ങുന്നത് തുടരും, പക്ഷേ ഞങ്ങളുടെ നടപ്പാക്കൽ v5-ൽ അൽപ്പം പരിമിതമായിരിക്കാമെന്ന് ദയവായി തിരിച്ചറിയുക.

പുതിയത്_maps.scss

ബൂട്ട്സ്ട്രാപ്പ് v5.2.0 ഉപയോഗിച്ച് ഒരു പുതിയ സാസ് ഫയൽ അവതരിപ്പിച്ചു _maps.scss. _variables.scssഒരു യഥാർത്ഥ മാപ്പിലേക്കുള്ള അപ്‌ഡേറ്റുകൾ വിപുലീകരിക്കുന്ന ദ്വിതീയ മാപ്പുകളിൽ പ്രയോഗിക്കാത്ത ഒരു പ്രശ്നം പരിഹരിക്കാൻ ഇത് നിരവധി സാസ് മാപ്പുകൾ പുറത്തെടുക്കുന്നു . ഉദാഹരണത്തിന്, പ്രധാന ഇഷ്‌ടാനുസൃതമാക്കൽ വർക്ക്ഫ്ലോകളെ തകർക്കുന്നതിനെ $theme-colorsആശ്രയിക്കുന്ന മറ്റ് തീം മാപ്പുകളിലേക്ക് അപ്‌ഡേറ്റുകൾ പ്രയോഗിക്കുന്നില്ല . $theme-colorsചുരുക്കത്തിൽ, ഒരു ഡിഫോൾട്ട് വേരിയബിളോ മാപ്പോ ഉപയോഗിച്ചു കഴിഞ്ഞാൽ അത് അപ്ഡേറ്റ് ചെയ്യാൻ സാധിക്കാത്ത ഒരു പരിമിതി Sass-നുണ്ട്. മറ്റ് CSS വേരിയബിളുകൾ കമ്പോസ് ചെയ്യാൻ ഉപയോഗിക്കുമ്പോൾ CSS വേരിയബിളുകൾക്ക് സമാനമായ ഒരു പോരായ്മയുണ്ട്.

അതുകൊണ്ടാണ് ബൂട്ട്‌സ്‌ട്രാപ്പിലെ വേരിയബിൾ ഇഷ്‌ടാനുസൃതമാക്കലുകൾക്ക് ശേഷം വരേണ്ടത് @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

നിങ്ങളുടെ ഇഷ്‌ടാനുസൃത ബൂട്ട്‌സ്‌ട്രാപ്പ് 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. ഒരു ഉദാഹരണത്തിനായി പട്ടിക പ്രമാണങ്ങൾ കാണുക.

• ഇന്റർസെക്ഷൻ ഒബ്സർവർ എപിഐ ഉപയോഗിക്കുന്നതിനായി സ്ക്രോൾസ്പി മാറ്റിയെഴുതിയിരിക്കുന്നു , അതായത് നിങ്ങൾക്ക് ഇനി റിലേറ്റീവ് പാരന്റ് റാപ്പറുകൾ ആവശ്യമില്ല, കോൺഫിഗേഷൻ ഒഴിവാക്കുന്നുoffset, കൂടാതെ മറ്റു പലതും. നിങ്ങളുടെ സ്ക്രോൾസ്പൈ നടപ്പിലാക്കലുകൾ അവയുടെ നാവി ഹൈലൈറ്റിംഗിൽ കൂടുതൽ കൃത്യവും സ്ഥിരതയുമുള്ളതായിരിക്കാൻ നോക്കുക.

• പോപോവറുകളും ടൂൾടിപ്പുകളും ഇപ്പോൾ 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.

• ഓഫ്‌കാൻവാസിനെ പിന്തുണയ്ക്കാൻ നവബാറുകൾ അപ്‌ഡേറ്റ് ചെയ്‌തു. — പ്രതികരിക്കുന്ന ക്ലാസുകളും കുറച്ച് ഓഫ്‌കാൻവാസ് മാർക്ക്അപ്പും ഉപയോഗിച്ച് ഏത് നാവ്‌ബാറിലും ഓഫ്‌കാൻവാസ് ഡ്രോയറുകൾ ചേർക്കുക ..navbar-expand-*

• പുതിയ പ്ലെയ്‌സ്‌ഹോൾഡർ ഘടകം ചേർത്തു . — ഞങ്ങളുടെ ഏറ്റവും പുതിയ ഘടകം, നിങ്ങളുടെ സൈറ്റിലോ ആപ്പിലോ എന്തെങ്കിലും ഇപ്പോഴും ലോഡ് ചെയ്യുന്നുണ്ടെന്ന് സൂചിപ്പിക്കാൻ സഹായിക്കുന്നതിന് യഥാർത്ഥ ഉള്ളടക്കത്തിന് പകരം താൽക്കാലിക ബ്ലോക്കുകൾ നൽകാനുള്ള ഒരു മാർഗം.

• ചുരുക്കുക പ്ലഗിൻ ഇപ്പോൾ തിരശ്ചീനമായ തകർച്ചയെ പിന്തുണയ്ക്കുന്നു . - എന്നതിന് പകരം ചുരുക്കാൻ .collapse-horizontalനിങ്ങളിലേക്ക് ചേർക്കുക . ഒരു അല്ലെങ്കിൽ ക്രമീകരണം വഴി ബ്രൗസർ പെയിന്റിംഗ് ഒഴിവാക്കുക ..collapsewidthheightmin-heightheight

• പുതിയ സ്റ്റാക്കും ലംബ റൂൾ സഹായികളും ചേർത്തു. - സ്റ്റാക്കുകൾ ഉപയോഗിച്ച് ഇഷ്‌ടാനുസൃത ലേഔട്ടുകൾ വേഗത്തിൽ സൃഷ്‌ടിക്കുന്നതിന് ഒന്നിലധികം ഫ്ലെക്‌സ്ബോക്‌സ് പ്രോപ്പർട്ടികൾ വേഗത്തിൽ പ്രയോഗിക്കുക . തിരശ്ചീനമായ ( .hstack) ലംബമായ ( .vstack) സ്റ്റാക്കുകളിൽ നിന്ന് തിരഞ്ഞെടുക്കുക. പുതിയ സഹായികൾക്കൊപ്പം<hr> ഘടകങ്ങൾക്ക് സമാനമായ വെർട്ടിക്കൽ ഡിവൈഡറുകൾ ചേർക്കുക ..vr

• പുതിയ ആഗോള :rootCSS വേരിയബിളുകൾ ചേർത്തു. - ശൈലികൾ :rootനിയന്ത്രിക്കുന്നതിനായി നിരവധി പുതിയ CSS വേരിയബിളുകൾ ലെവലിലേക്ക് ചേർത്തു . <body>ഞങ്ങളുടെ യൂട്ടിലിറ്റികളിലും ഘടകങ്ങളിലുമുൾപ്പെടെ കൂടുതൽ പ്രവർത്തനങ്ങളിലാണ്, എന്നാൽ ഇപ്പോൾ ഇഷ്‌ടാനുസൃതമാക്കുക വിഭാഗത്തിലെ CSS വേരിയബിളുകൾ വായിക്കുക .

• CSS വേരിയബിളുകൾ ഉപയോഗിക്കുന്നതിന് വർണ്ണവും പശ്ചാത്തല യൂട്ടിലിറ്റികളും ഓവർഹോൾ ചെയ്തു, കൂടാതെ പുതിയ ടെക്സ്റ്റ് അതാര്യതയും പശ്ചാത്തല അതാര്യതയും യൂട്ടിലിറ്റികളും ചേർത്തു. — .text-* കൂടാതെ .bg-*യൂട്ടിലിറ്റികൾ ഇപ്പോൾ CSS വേരിയബിളുകളും rgba()കളർ മൂല്യങ്ങളും ഉപയോഗിച്ചാണ് നിർമ്മിച്ചിരിക്കുന്നത്, പുതിയ അതാര്യത യൂട്ടിലിറ്റികൾ ഉപയോഗിച്ച് ഏത് യൂട്ടിലിറ്റിയും എളുപ്പത്തിൽ ഇഷ്ടാനുസൃതമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

• ഞങ്ങളുടെ ഘടകങ്ങൾ എങ്ങനെ ഇഷ്‌ടാനുസൃതമാക്കാമെന്ന് കാണിക്കുന്നതിന് അടിസ്ഥാനമാക്കിയുള്ള പുതിയ സ്‌നിപ്പറ്റ് ഉദാഹരണങ്ങൾ ചേർത്തു. — ഞങ്ങളുടെ പുതിയ സ്‌നിപ്പെറ്റ് ഉദാഹരണങ്ങൾക്കൊപ്പം ഇഷ്‌ടാനുസൃതമാക്കിയ ഘടകങ്ങളും മറ്റ് പൊതുവായ ഡിസൈൻ പാറ്റേണുകളും ഉപയോഗിക്കാൻ തയ്യാറാണ് . അടിക്കുറിപ്പുകൾ , ഡ്രോപ്പ്ഡൌണുകൾ , ലിസ്റ്റ് ഗ്രൂപ്പുകൾ , മോഡലുകൾ എന്നിവ ഉൾപ്പെടുന്നു .

• പോപ്പോവറുകളിൽ നിന്നും ടൂൾടിപ്പുകളിൽ നിന്നും ഉപയോഗിക്കാത്ത പൊസിഷനിംഗ് ശൈലികൾ നീക്കം ചെയ്തു, കാരണം ഇവ പോപ്പർ മാത്രം കൈകാര്യം ചെയ്യുന്നു. $tooltip-marginഒഴിവാക്കി, nullപ്രക്രിയയിൽ സജ്ജീകരിച്ചിരിക്കുന്നു.

കൂടുതൽ വിവരങ്ങൾ വേണോ? v5.1.0 ബ്ലോഗ് പോസ്റ്റ് വായിക്കുക.

ആശ്രിതത്വം

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

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

• ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ 10 ഉം 11 ഉം ഉപേക്ഷിച്ചു
• ഉപേക്ഷിച്ച Microsoft Edge < 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കൂടാതെ .leftright

ഫോമുകൾ

• പുതിയ ഫ്ലോട്ടിംഗ് ഫോമുകൾ ചേർത്തു! പൂർണ്ണമായി പിന്തുണയ്‌ക്കുന്ന ഫോം ഘടകങ്ങളിലേക്ക് ഞങ്ങൾ ഫ്ലോട്ടിംഗ് ലേബൽ ഉദാഹരണം പ്രമോട്ട് ചെയ്‌തു. പുതിയ ഫ്ലോട്ടിംഗ് ലേബൽ പേജ് കാണുക.

• ബ്രേക്കിംഗ് ഏകീകൃത നേറ്റീവ്, ഇഷ്‌ടാനുസൃത ഫോം ഘടകങ്ങൾ. 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അലേർട്ടുകൾ, ബ്രെഡ്ക്രംബ്സ്, കാർഡുകൾ, ഡ്രോപ്പ്ഡൗണുകൾ, ലിസ്റ്റ് ഗ്രൂപ്പുകൾ, മോഡലുകൾ, പോപോവറുകൾ, ടൂൾടിപ്പുകൾ എന്നിവയ്‌ക്കായുള്ള ഏകീകൃത മൂല്യങ്ങൾ ഞങ്ങളുടെ $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"ഡ്രോപ്പ്‌ഡൗണിന്റെ സ്ഥാനം സ്ഥിരമായിരിക്കുമ്പോഴോ ഡ്രോപ്പ്‌ഡൗൺ നവ്‌ബാറിൽ ആയിരിക്കുമ്പോഴോ ഡ്രോപ്പ്‌ഡൗൺ മെനുകൾക്ക് ഇപ്പോൾ ഒരു ആട്രിബ്യൂട്ട് സെറ്റ് ഉണ്ട്. ഇത് ഞങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് ചേർത്തതാണ് കൂടാതെ പോപ്പറിന്റെ പൊസിഷനിംഗിൽ ഇടപെടാതെ തന്നെ ഇഷ്‌ടാനുസൃത സ്ഥാന ശൈലികൾ ഉപയോഗിക്കാൻ ഞങ്ങളെ സഹായിക്കുന്നു.

• ബ്രേക്കിംഗ്flipനേറ്റീവ് പോപ്പർ കോൺഫിഗറേഷന് അനുകൂലമായ ഡ്രോപ്പ്ഡൗൺ പ്ലഗിനിനുള്ള ഓപ്ഷൻ ഉപേക്ഷിച്ചു . ഫ്ലിപ്പ് മോഡിഫയറിലെ fallbackPlacementsഓപ്ഷനായി ഒരു ശൂന്യമായ അറേ കടന്നുപോകുന്നതിലൂടെ നിങ്ങൾക്ക് ഇപ്പോൾ ഫ്ലിപ്പിംഗ് സ്വഭാവം പ്രവർത്തനരഹിതമാക്കാം .

• സ്വയമേവ അടയ്ക്കുന്ന സ്വഭാവംautoClose കൈകാര്യം ചെയ്യുന്നതിനുള്ള ഒരു പുതിയ ഓപ്ഷൻ ഉപയോഗിച്ച് ഡ്രോപ്പ്ഡൗൺ മെനുകൾ ഇപ്പോൾ ക്ലിക്ക് ചെയ്യാവുന്നതാണ് . ഡ്രോപ്പ്ഡൗൺ മെനുവിന് അകത്തോ പുറത്തോ ഉള്ള ക്ലിക്ക് സ്വീകരിക്കാൻ നിങ്ങൾക്ക് ഈ ഓപ്‌ഷൻ ഉപയോഗിക്കാം, അത് ഇന്ററാക്ടീവ് ആക്കാനാകും.

• ഡ്രോപ്പ്ഡൗണുകൾ ഇപ്പോൾ .dropdown-items-ൽ പൊതിഞ്ഞ <li>s-നെ പിന്തുണയ്ക്കുന്നു.

ജംബോട്രോൺ

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

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

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

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

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

നവബാറുകൾ

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

ഓഫ്കാൻവാസ്

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

പേജിനേഷൻ

• പേജിനേഷൻ ലിങ്കുകൾക്ക് ഇപ്പോൾ ഇഷ്‌ടാനുസൃതമാക്കാവുന്നതാണ് 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
  • പുനർനാമകരണം sr-only()ചെയ്ത് sr-only-focusable()മിക്‌സിനുകൾ . visually-hidden()_visually-hidden-focusable()

• bootstrap-utilities.cssഇപ്പോൾ ഞങ്ങളുടെ സഹായികളും ഉൾപ്പെടുന്നു. ഇഷ്‌ടാനുസൃത ബിൽഡുകളിൽ സഹായികളെ ഇനി ഇറക്കുമതി ചെയ്യേണ്ടതില്ല.

ജാവാസ്ക്രിപ്റ്റ്

• jQuery ഡിപൻഡൻസി ഒഴിവാക്കി, സാധാരണ ജാവാസ്ക്രിപ്റ്റിലേക്ക് പ്ലഗിനുകൾ മാറ്റിയെഴുതി.

• ബ്രേക്കിംഗ്മൂന്നാം കക്ഷികളിൽ നിന്നും നിങ്ങളുടെ സ്വന്തം കോഡിൽ നിന്നും ബൂട്ട്‌സ്‌ട്രാപ്പ് പ്രവർത്തനത്തെ വേർതിരിച്ചറിയാൻ സഹായിക്കുന്നതിന് എല്ലാ JavaScript പ്ലഗിന്നുകൾക്കുമുള്ള ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ ഇപ്പോൾ നെയിംസ്‌പെയ്‌സ് ചെയ്‌തിരിക്കുന്നു. ഉദാഹരണത്തിന്, ഞങ്ങൾ data-bs-toggleപകരം ഉപയോഗിക്കുന്നു data-toggle.

• എല്ലാ പ്ലഗിനുകൾക്കും ഇപ്പോൾ ഒരു CSS സെലക്‌ടറിനെ ആദ്യ ആർഗ്യുമെന്റായി സ്വീകരിക്കാനാകും. പ്ലഗിന്റെ ഒരു പുതിയ ഉദാഹരണം സൃഷ്‌ടിക്കാൻ നിങ്ങൾക്ക് ഒന്നുകിൽ ഒരു DOM ഘടകം അല്ലെങ്കിൽ ഏതെങ്കിലും സാധുവായ CSS സെലക്‌ടർ കൈമാറാം:

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

• popperConfigബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഡിഫോൾട്ട് പോപ്പർ കോൺഫിഗറേഷൻ ഒരു ആർഗ്യുമെന്റായി സ്വീകരിക്കുന്ന ഒരു ഫംഗ്‌ഷനായി പാസ്സാക്കാൻ കഴിയും, അതുവഴി നിങ്ങൾക്ക് ഈ ഡിഫോൾട്ട് കോൺഫിഗറേഷൻ നിങ്ങളുടെ രീതിയിൽ ലയിപ്പിക്കാനാകും. ഡ്രോപ്പ്ഡൗൺ, പോപോവറുകൾ, ടൂൾടിപ്പുകൾ എന്നിവയ്ക്ക് ബാധകമാണ്.

• പോപ്പർ മൂലകങ്ങളുടെ മികച്ച പ്ലെയ്‌സ്‌മെന്റിനായി എന്നതിനുള്ള ഡിഫോൾട്ട് മൂല്യം fallbackPlacementsമാറ്റി . ഡ്രോപ്പ്ഡൗൺ, പോപോവറുകൾ, ടൂൾടിപ്പുകൾ എന്നിവയ്ക്ക് ബാധകമാണ്.['top', 'right', 'bottom', 'left']

• _getInstance()→ പോലുള്ള പൊതു സ്റ്റാറ്റിക് രീതികളിൽ നിന്ന് അടിവര നീക്കം ചെയ്തു getInstance().