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)
sm
lg
-
ബ്രേക്കിംഗ്പ്രിന്റ് ശൈലികളും
$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-focus
hover-focus-active
float()
form-control-mixin()
nav-divider()
retina-img()
text-hide()
(അനുബന്ധ യൂട്ടിലിറ്റി ക്ലാസും ഉപേക്ഷിച്ചു,.text-hide
)visibility()
form-control-focus()
-
ബ്രേക്കിംഗ്സാസിന്റെ സ്വന്തം കളർ സ്കെയിലിംഗ് ഫംഗ്ഷനുമായുള്ള കൂട്ടിയിടി ഒഴിവാക്കാൻ ഫംഗ്ഷന്റെ പേര്
scale-color()
മാറ്റി .shift-color()
-
box-shadow
mixins ഇപ്പോൾ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.css
box-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-size
s. -
രണ്ട് പുതിയ
.display-*
തലക്കെട്ട് വലുപ്പങ്ങൾ ചേർത്തു,.display-5
കൂടാതെ.display-6
. -
ലിങ്കുകൾ ഡിഫോൾട്ടായി അടിവരയിടുന്നു (ഹോവറിൽ മാത്രമല്ല), അവ നിർദ്ദിഷ്ട ഘടകങ്ങളുടെ ഭാഗമല്ലെങ്കിൽ.
-
സ്റ്റൈലിംഗിൽ കൂടുതൽ നിയന്ത്രണത്തിനായി അവരുടെ ശൈലികൾ പുതുക്കാനും CSS വേരിയബിളുകൾ ഉപയോഗിച്ച് പുനർനിർമ്മിക്കാനും പട്ടികകൾ പുനർരൂപകൽപ്പന ചെയ്തു.
-
ബ്രേക്കിംഗ്നെസ്റ്റഡ് ടേബിളുകൾക്ക് ഇനി ശൈലികൾ പാരമ്പര്യമായി ലഭിക്കില്ല.
-
ബ്രേക്കിംഗ്
.thead-light
കൂടാതെ എല്ലാ ടേബിൾ എലമെന്റുകൾക്കും ( , , , , കൂടാതെ ) ഉപയോഗിക്കാവുന്ന വേരിയന്റ് ക്ലാസുകൾക്ക്.thead-dark
അനുകൂലമായി ഒഴിവാക്കപ്പെടുന്നു ..table-*
thead
tbody
tfoot
tr
th
td
-
ബ്രേക്കിംഗ്
table-row-variant()
മിക്സിൻ പുനർനാമകരണംtable-variant()
ചെയ്യുകയും 2 പാരാമീറ്ററുകൾ മാത്രം സ്വീകരിക്കുകയും ചെയ്യുന്നു: ($color
നിറത്തിന്റെ പേര്) കൂടാതെ$value
(കളർ കോഡ്). ബോർഡർ വർണ്ണവും ആക്സന്റ് വർണ്ണങ്ങളും ടേബിൾ ഫാക്ടർ വേരിയബിളുകളെ അടിസ്ഥാനമാക്കി യാന്ത്രികമായി കണക്കാക്കുന്നു. -
ടേബിൾ സെൽ പാഡിംഗ് വേരിയബിളുകൾ എന്നിങ്ങനെ
-y
വിഭജിക്കുക-x
. -
ബ്രേക്കിംഗ്ക്ലാസ് ഉപേക്ഷിച്ചു
.pre-scrollable
. #29135 കാണുക -
ബ്രേക്കിംഗ്
.text-*
യൂട്ടിലിറ്റികൾ ഇനി ലിങ്കുകളിലേക്ക് ഹോവർ, ഫോക്കസ് സ്റ്റേറ്റുകൾ ചേർക്കില്ല..link-*
പകരം ഹെൽപ്പർ ക്ലാസുകൾ ഉപയോഗിക്കാം. #29267 കാണുക -
ബ്രേക്കിംഗ്ക്ലാസ് ഉപേക്ഷിച്ചു
.text-justify
. #29793 കാണുക -
ബ്രേക്കിംഗ്
<hr>
ആട്രിബ്യൂട്ടിനെ നന്നായി പിന്തുണയ്ക്കുന്നതിന്height
പകരം ഘടകങ്ങൾ ഇപ്പോൾ ഉപയോഗിക്കുന്നു . കട്ടിയുള്ള ഡിവൈഡറുകൾ സൃഷ്ടിക്കാൻ പാഡിംഗ് യൂട്ടിലിറ്റികളുടെ ഉപയോഗവും ഇത് സാധ്യമാക്കുന്നു (ഉദാ, ).border
size
<hr class="py-1">
-
ഡിഫോൾട്ട് ഹോറിസോണ്ടൽ ഓണും ബ്രൗസർ ഡിഫോൾട്ടിൽ നിന്ന് എലമെന്റുകളും
padding-left
റീസെറ്റ് ചെയ്യുക .<ul>
<ol>
40px
2rem
-
ചേർത്തു
$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-color
border-radius
-
--bs-breadcrumb-divider
CSS വീണ്ടും കംപൈൽ ചെയ്യാതെ തന്നെ എളുപ്പത്തിലുള്ള കസ്റ്റമൈസേഷനായി പുതിയ 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-item
s-ൽ പൊതിഞ്ഞ<li>
s-നെ പിന്തുണയ്ക്കുന്നു.
ജംബോട്രോൺ
- ബ്രേക്കിംഗ്യൂട്ടിലിറ്റികൾ ഉപയോഗിച്ച് പകർത്താൻ കഴിയുന്നതിനാൽ ജംബോട്രോൺ ഘടകം ഉപേക്ഷിച്ചു. ഒരു ഡെമോയ്ക്കായി ഞങ്ങളുടെ പുതിയ ജംബോട്രോൺ ഉദാഹരണം കാണുക.
ലിസ്റ്റ് ഗ്രൂപ്പ്
- ലിസ്റ്റ് ഗ്രൂപ്പുകളിലേക്ക് പുതിയ
.list-group-numbered
മോഡിഫയർ ചേർത്തു.
നാവുകളും ടാബുകളും
- ക്ലാസിലേക്ക് , , , എന്നിവയ്ക്കായി പുതിയ
null
വേരിയബിളുകൾ ചേർത്തു .font-size
font-weight
color
: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-radius
s ഉപയോഗിച്ച് മാറ്റി.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>
-
, , കൂടാതെ എന്നിവയ്ക്കായി പുതിയ സ്ഥാന യൂട്ടിലിറ്റികൾ ചേർത്തു . മൂല്യങ്ങളിൽ , , കൂടാതെ ഓരോ വസ്തുവിനും ഉൾപ്പെടുന്നു.
top
right
bottom
left
0
50%
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()
andsr-only-focusable()
mixins tovisually-hidden()
andvisually-hidden-focusable()
.
- എന്നതിൽ നിന്ന് Sass ഫയൽ
-
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 ofdata-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()
.