v5 માં સ્થળાંતર

v5.2.0

તાજું ડિઝાઇન

બુટસ્ટ્રેપ v5.2.0 સમગ્ર પ્રોજેક્ટમાં મુઠ્ઠીભર ઘટકો અને ગુણધર્મો માટે સૂક્ષ્મ ડિઝાઇન અપડેટ દર્શાવે છે, ખાસ કરીને border-radiusબટનો અને ફોર્મ નિયંત્રણો પરના શુદ્ધ મૂલ્યો દ્વારા . અમારા દસ્તાવેજીકરણને નવા હોમપેજ, સરળ દસ્તાવેજ લેઆઉટ સાથે પણ અપડેટ કરવામાં આવ્યું છે જે હવે સાઇડબારના વિભાગોને સંકુચિત કરતું નથી, અને બુટસ્ટ્રેપ આઇકોન્સના વધુ જાણીતા ઉદાહરણો .

વધુ CSS ચલો

અમે CSS વેરીએબલનો ઉપયોગ કરવા માટે અમારા તમામ ઘટકોને અપડેટ કર્યા છે. જ્યારે સાસ હજુ પણ દરેક વસ્તુને અંડરપિન કરે છે, ત્યારે દરેક ઘટકને કમ્પોનન્ટ બેઝ ક્લાસ (દા.ત., .btn) પર CSS વેરીએબલ્સને સમાવવા માટે અપડેટ કરવામાં આવ્યું છે, જે બુટસ્ટ્રેપના વધુ રીઅલ-ટાઇમ કસ્ટમાઇઝેશન માટે પરવાનગી આપે છે. અનુગામી પ્રકાશનોમાં, અમે અમારા લેઆઉટ, ફોર્મ્સ, સહાયકો અને ઉપયોગિતાઓમાં CSS ચલોના અમારા ઉપયોગને વિસ્તૃત કરવાનું ચાલુ રાખીશું. તેમના સંબંધિત દસ્તાવેજીકરણ પૃષ્ઠો પર દરેક ઘટકમાં CSS ચલો વિશે વધુ વાંચો.

બુટસ્ટ્રેપ 6 સુધી અમારો CSS વેરીએબલ વપરાશ થોડો અધૂરો રહેશે. જ્યારે અમે આને સમગ્ર બોર્ડમાં અમલમાં મૂકવાનું પસંદ કરીએ છીએ, ત્યારે તેઓ બ્રેકિંગ ફેરફારોનું જોખમ ચલાવે છે. ઉદાહરણ તરીકે, જો તમે કોઈ કારણસર $alert-border-width: var(--bs-border-width)કરી રહ્યાં હોવ તો અમારા સ્રોત કોડમાં સેટિંગ તમારા પોતાના કોડમાં સંભવિત Sass ને તોડે છે .$alert-border-width * 2

જેમ કે, જ્યાં પણ શક્ય હોય ત્યાં, અમે વધુ CSS ચલ તરફ આગળ વધવાનું ચાલુ રાખીશું, પરંતુ કૃપા કરીને ઓળખો કે અમારું અમલીકરણ v5 માં થોડું મર્યાદિત હોઈ શકે છે.

નવી_maps.scss

બુટસ્ટ્રેપ v5.2.0 એ સાથે નવી Sass ફાઇલ રજૂ કરી છે _maps.scss. તે એક સમસ્યાને ઠીક કરવા માટે ઘણા સાસ નકશાને બહાર કાઢે _variables.scssછે જ્યાં મૂળ નકશાના અપડેટ્સ તેમને વિસ્તૃત કરતા ગૌણ નકશા પર લાગુ કરવામાં આવ્યા ન હતા. ઉદાહરણ તરીકે, કી કસ્ટમાઇઝેશન વર્કફ્લોને તોડીને, $theme-colorsપર આધાર રાખતા અન્ય થીમ નકશા પરના અપડેટ્સ લાગુ કરવામાં આવ્યાં નથી . $theme-colorsટૂંકમાં, સાસની એક મર્યાદા છે જ્યાં એકવાર ડિફોલ્ટ વેરીએબલ અથવા નકશાનો ઉપયોગ થઈ જાય, તે અપડેટ કરી શકાતો નથી. CSS વેરીએબલ્સમાં સમાન ખામી હોય છે જ્યારે તેનો ઉપયોગ અન્ય CSS ચલો કંપોઝ કરવા માટે કરવામાં આવે છે.

આ કારણે જ બુટસ્ટ્રેપમાં વેરીએબલ કસ્ટમાઇઝેશન પછી આવવું પડે છે @import "functions", પરંતુ તે પહેલાં @import "variables"અને અમારા બાકીના આયાત સ્ટેક. આ જ સાસ નકશાને લાગુ પડે છે-તમારે ડિફોલ્ટનો ઉપયોગ થાય તે પહેલાં તેને ઓવરરાઇડ કરવું આવશ્યક છે. નીચેના નકશા નવામાં ખસેડવામાં આવ્યા છે _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-{sm|md|lg|xl|xxl}વર્ગમાં બદલો.

• જાડા ટેબલ વિભાજકો હવે પસંદ કરે છે. — અમે કોષ્ટક જૂથો વચ્ચેની સરહદને ઓવરરાઇડ કરવા માટે વધુ જાડા અને વધુ મુશ્કેલને દૂર કર્યા છે અને તેને તમે અરજી કરી શકો તેવા વૈકલ્પિક વર્ગમાં ખસેડ્યા છે, .table-group-divider. ઉદાહરણ માટે કોષ્ટક દસ્તાવેજ જુઓ.

• ઈન્ટરસેક્શન ઓબ્ઝર્વર API નો ઉપયોગ કરવા માટે સ્ક્રોલસ્પી ફરીથી લખવામાં આવ્યું છે , જેનો અર્થ છે કે તમારે હવે સંબંધિત પેરેન્ટ રેપર, અવમૂલ્યનoffsetરૂપરેખા અને વધુની જરૂર નથી. તમારા સ્ક્રોલસ્પી અમલીકરણો તેમના નેવી હાઇલાઇટિંગમાં વધુ સચોટ અને સુસંગત બનવા માટે જુઓ.

• પોપોવર્સ અને ટૂલટિપ્સ હવે CSS ચલોનો ઉપયોગ કરે છે. ચલોની સંખ્યા ઘટાડવા માટે કેટલાક CSS ચલોને તેમના સાસ સમકક્ષો તરફથી અપડેટ કરવામાં આવ્યા છે. પરિણામે, આ પ્રકાશનમાં ત્રણ ચલોને નાપસંદ કરવામાં આવ્યા છે: $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 નિયંત્રણ <body>શૈલીઓ માટે સ્તર પર ઘણા નવા CSS ચલો ઉમેર્યા. અમારી તમામ ઉપયોગિતાઓ અને ઘટકો સહિત, વધુ કામ ચાલી રહ્યું છે, પરંતુ હમણાં માટે કસ્ટમાઇઝ વિભાગમાં CSS ચલો વાંચો .

• CSS વેરિયેબલ્સનો ઉપયોગ કરવા માટે રંગ અને પૃષ્ઠભૂમિ ઉપયોગિતાઓને ઓવરહોલ્ડ કરી, અને નવી ટેક્સ્ટ અસ્પષ્ટતા અને પૃષ્ઠભૂમિ અસ્પષ્ટ ઉપયોગિતાઓ ઉમેરી. — .text-* અને .bg-*યુટિલિટીઝ હવે CSS ચલ અને rgba()રંગ મૂલ્યો સાથે બનેલ છે, જે તમને નવી અસ્પષ્ટ ઉપયોગિતાઓ સાથે સરળતાથી કોઈપણ ઉપયોગિતાને કસ્ટમાઇઝ કરવાની મંજૂરી આપે છે.

• અમારા ઘટકોને કેવી રીતે કસ્ટમાઇઝ કરવું તે બતાવવા માટે આધારિત નવા સ્નિપેટ ઉદાહરણો ઉમેર્યા. — અમારા નવા સ્નિપેટ્સ ઉદાહરણો સાથે કસ્ટમાઇઝ્ડ ઘટકો અને અન્ય સામાન્ય ડિઝાઇન પેટર્નનો ઉપયોગ કરવા માટે તૈયાર ખેંચો . ફૂટર , ડ્રોપડાઉન , સૂચિ જૂથો અને મોડલ્સનો સમાવેશ થાય છે .

• પોપોવર્સ અને ટૂલટિપ્સમાંથી બિનઉપયોગી પોઝિશનિંગ શૈલીઓ દૂર કરી કારણ કે આ ફક્ત પોપર દ્વારા નિયંત્રિત થાય છે. $tooltip-marginનાપસંદ કરવામાં આવ્યું છે અને nullપ્રક્રિયામાં સેટ કરવામાં આવ્યું છે.

વધુ માહિતી જોઈએ છે? v5.1.0 બ્લોગ પોસ્ટ વાંચો.

અવલંબન

• jQuery છોડી દીધી.
• પોપર v1.x થી પોપર v2.x પર અપગ્રેડ કર્યું.
• લિબસાસને ડાર્ટ સાસ સાથે બદલ્યું કારણ કે અમારા સાસ કમ્પાઇલર લિબસાસને નાપસંદ કરવામાં આવ્યું હતું.
• અમારા દસ્તાવેજો બનાવવા માટે જેકિલથી હ્યુગોમાં સ્થળાંતર કર્યું

બ્રાઉઝર સપોર્ટ

• ઈન્ટરનેટ એક્સપ્લોરર 10 અને 11 છોડ્યું
• માઈક્રોસોફ્ટ એજ < 16 (લેગસી એજ) છોડ્યો
• ફાયરફોક્સ <60 છોડ્યું
• સફારી < 12 છોડી દીધી
• iOS સફારી < 12 છોડ્યું
• ડ્રોપ ક્રોમ <60

દસ્તાવેજીકરણ ફેરફારો

• ફરીથી ડિઝાઇન કરેલ હોમપેજ, દસ્તાવેજ લેઆઉટ અને ફૂટર.
• નવી પાર્સલ માર્ગદર્શિકા ઉમેરાઈ .
• Sass, વૈશ્વિક રૂપરેખાંકન વિકલ્પો, રંગ યોજનાઓ, CSS ચલો અને વધુ પર નવી વિગતો સાથે, v4 ના થીમિંગ પૃષ્ઠને બદલીને નવો કસ્ટમાઇઝ વિભાગ ઉમેર્યો .
• બધા ફોર્મ દસ્તાવેજીકરણને નવા ફોર્મ વિભાગમાં પુનઃસંગઠિત કર્યા , સામગ્રીને વધુ કેન્દ્રિત પૃષ્ઠોમાં તોડીને.
• એ જ રીતે, ગ્રીડ સામગ્રીને વધુ સ્પષ્ટ રીતે બહાર લાવવા માટે લેઆઉટ વિભાગને અપડેટ કર્યો.
• "Navs" ઘટક પૃષ્ઠનું નામ બદલીને "Navs અને Tabs" કર્યું.
• "ચેક્સ" પૃષ્ઠનું નામ બદલીને "ચેક્સ અને રેડિયો" રાખ્યું.
• નેવબારને ફરીથી ડિઝાઇન કર્યું અને અમારી સાઇટ્સ અને ડૉક્સ વર્ઝનની આસપાસ મેળવવાનું સરળ બનાવવા માટે એક નવું સબનેવ ઉમેર્યું.
• શોધ ક્ષેત્ર માટે નવો કીબોર્ડ શોર્ટકટ ઉમેર્યો: Ctrl + /.

સસ

• બિનજરૂરી મૂલ્યોને દૂર કરવાનું સરળ બનાવવા માટે અમે ડિફૉલ્ટ સાસ મેપ મર્જને છોડી દીધું છે. ધ્યાનમાં રાખો કે તમારે હવે Sass નકશામાં તમામ મૂલ્યો વ્યાખ્યાયિત કરવા પડશે જેમ કે $theme-colors. સાસ નકશા સાથે કેવી રીતે વ્યવહાર કરવો તે તપાસો .

• બ્રેકિંગcolor-yiq()ફંક્શન અને સંબંધિત ચલોનું નામ બદલ્યું color-contrast()કારણ કે તે હવે YIQ રંગ જગ્યા સાથે સંબંધિત નથી. જુઓ #30168.

  • $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(), અને ફંક્શન્સ છોડ્યા. જુઓ #29083 .gray()

• બ્રેકિંગ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()

• બ્રેકિંગSass ના પોતાના કલર સ્કેલિંગ ફંક્શન સાથે અથડામણ ટાળવા માટે scale-color()ફંક્શનનું નામ બદલ્યું .shift-color()

• box-shadowmixins હવે nullમૂલ્યોને મંજૂરી આપે છે અને noneબહુવિધ દલીલોમાંથી છોડે છે. જુઓ #30394 .

• મિક્સિન પાસે હવે border-radius()ડિફોલ્ટ મૂલ્ય છે.

રંગ સિસ્ટમ

• કલર સિસ્ટમ કે જે નવી કલર સિસ્ટમની તરફેણમાં કામ કરતી હતી color-level()અને તેને દૂર કરવામાં આવી હતી. $theme-color-intervalઅમારા કોડબેઝમાંના તમામ lighten()અને darken()કાર્યો અને દ્વારા બદલવામાં આવે tint-color()છે shade-color(). આ ફંક્શન્સ રંગને સફેદ અથવા કાળો રંગ સાથે મિશ્રિત કરશે, તેની હળવાશને નિશ્ચિત રકમ દ્વારા બદલવાને બદલે. તેનું shift-color()વજન પરિમાણ સકારાત્મક છે કે નકારાત્મક તેના આધારે તે રંગને ટિન્ટ અથવા શેડ કરશે. વધુ વિગતો માટે જુઓ #30622 .

• દરેક રંગ માટે નવા ટિન્ટ્સ અને શેડ્સ ઉમેર્યા, દરેક બેઝ કલર માટે નવ અલગ અલગ રંગો પૂરા પાડે છે, નવા સાસ વેરિયેબલ્સ તરીકે.

• સુધારેલ રંગ વિરોધાભાસ. ડબલ્યુસીએજી 2.1 એએ કોન્ટ્રાસ્ટ સુનિશ્ચિત કરવા માટે 3:1 થી 4.5:1 સુધીનો રંગ કોન્ટ્રાસ્ટ રેશિયો બમ્પ કર્યો અને વાદળી, લીલો, સ્યાન અને ગુલાબી રંગો અપડેટ કર્યા. અમારા કલર કોન્ટ્રાસ્ટ કલરમાંથી પણ $gray-900બદલ્યો $black.

• અમારી રંગ પ્રણાલીને ટેકો આપવા માટે, અમે અમારા રંગોને યોગ્ય રીતે મિશ્રિત કરવા માટે નવા કસ્ટમ tint-color()અને કાર્યો ઉમેર્યા છે.shade-color()

ગ્રીડ અપડેટ્સ

• નવો બ્રેકપોઇન્ટ! માટે અને ઉપર નવો xxlબ્રેકપોઇન્ટ ઉમેર્યો . 1400pxઅન્ય તમામ બ્રેકપોઈન્ટમાં કોઈ ફેરફાર નથી.

• સુધારેલ ગટર. 1.5remગટર હવે રેમ્સમાં સેટ છે, અને v4 ( , અથવા લગભગ 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()આપમેળેfont-sizeવ્યૂપોર્ટ સાથે તેમના સ્કેલને સમાયોજિત કરશે. આ સુવિધા અગાઉ v4 સાથે પસંદ કરવામાં આવી હતી.

• બ્રેકિંગઅમારા $display-*ચલોને બદલવા અને $display-font-sizesસાસ નકશા સાથે અમારી ડિસ્પ્લે ટાઇપોગ્રાફીનું સમારકામ કર્યું. $display-*-weightએકલ $display-font-weightઅને સમાયોજિત font-sizes માટે વ્યક્તિગત ચલોને પણ દૂર કર્યા .

• બે નવા .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કરવાને બદલે ઉપયોગ કરે છે. આનાથી ગાઢ વિભાજકો (દા.ત., ) બનાવવા માટે પેડિંગ ઉપયોગિતાઓનો ઉપયોગ પણ સક્ષમ બને છે .bordersize<hr class="py-1">

• ડિફૉલ્ટ હોરીઝોન્ટલ padding-leftચાલુ <ul>અને <ol>તત્વોને બ્રાઉઝર ડિફૉલ્ટથી પર રીસેટ 40pxકરો 2rem.

• ઉમેરાયેલ $enable-smooth-scroll, જે વૈશ્વિક સ્તરે લાગુ પડે છે— મીડિયા ક્વેરી scroll-behavior: smoothદ્વારા ઓછી ગતિ માટે પૂછતા વપરાશકર્તાઓ સિવાય . જુઓ #31877prefers-reduced-motion

આરટીએલ

• ફ્લેક્સબોક્સ લેઆઉટમાં જોવા મળતા લોજિકલ પ્રોપર્ટીઝનો ઉપયોગ કરવા માટે આડી દિશામાં ચોક્કસ વેરિયેબલ્સ, ઉપયોગિતાઓ અને મિક્સિનનું નામ બદલવામાં આવ્યું છે—દા.ત., 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 સાથે s પર લાગુ થતા નથી multiple.

• scss/forms/ઇનપુટ જૂથ શૈલીઓ સહિત, હેઠળ ફરીથી ગોઠવેલ સ્રોત Sass ફાઇલો .

ઘટકો

• paddingચેતવણીઓ, બ્રેડક્રમ્સ, કાર્ડ્સ, ડ્રોપડાઉન્સ, સૂચિ જૂથો, મોડલ્સ, પોપોવર્સ અને ટૂલટિપ્સ માટે એકીકૃત મૂલ્યો અમારા $spacerચલ પર આધારિત છે. જુઓ #30564 .

એકોર્ડિયન

• નવું એકોર્ડિયન ઘટક ઉમેર્યું .

ચેતવણીઓ

• ચેતવણીઓમાં હવે ચિહ્નો સાથે ઉદાહરણો છે .

• <hr>દરેક ચેતવણીમાં s માટે કસ્ટમ શૈલીઓ દૂર કરી કારણ કે તેઓ પહેલેથી જ ઉપયોગ કરે છે currentColor.

બેજ

• બ્રેકિંગપૃષ્ઠભૂમિ ઉપયોગિતાઓ માટે તમામ .badge-*રંગ વર્ગો છોડી દીધા (દા.ત., .bg-primaryની જગ્યાએ ઉપયોગ કરો .badge-primary).

• બ્રેકિંગડ્રોપ - તેના બદલે ઉપયોગિતાનો .badge-pillઉપયોગ કરો ..rounded-pill

• બ્રેકિંગ<a>અને <button>તત્વો માટે હોવર અને ફોકસ શૈલીઓ દૂર કરી .

• .25em/ .5emથી .35em/ બેજેસ માટે ડિફોલ્ટ પેડિંગમાં વધારો .65em.

બ્રેડક્રમ્સ

• padding, , background-colorઅને border-radius.

• --bs-breadcrumb-dividerCSS પુનઃસંકલિત કરવાની જરૂર વગર સરળ કસ્ટમાઇઝેશન માટે નવી CSS કસ્ટમ પ્રોપર્ટી ઉમેરી .

બટનો

• બ્રેકિંગ ટૉગલ બટનો , ચેકબોક્સ અથવા રેડિયો સાથે, હવે જાવાસ્ક્રિપ્ટની જરૂર નથી અને નવા માર્કઅપ છે. અમને હવે રેપિંગ ઘટકની જરૂર નથી,.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-imagea ને બદલે (એમ્બેડેડ SVG) નો ઉપયોગ કરે છે ×, તમારા માર્કઅપને સ્પર્શ કર્યા વિના સરળ કસ્ટમાઇઝેશન માટે પરવાનગી આપે છે.

• ઘાટા પૃષ્ઠભૂમિ સામે ઉચ્ચ કોન્ટ્રાસ્ટ ડિસમિસ આઇકોન્સને સક્ષમ કરવા માટે ઉપયોગ કરે છે તે નવું .btn-close-whiteવેરિઅન્ટ ઉમેર્યું.filter: invert(1)

સંકુચિત કરો

• એકોર્ડિયન માટે સ્ક્રોલ એન્કરિંગ દૂર કર્યું.

ડ્રોપડાઉન

• ઑન-ડિમાન્ડ ડાર્ક ડ્રોપડાઉન માટે નવા .dropdown-menu-darkપ્રકાર અને સંકળાયેલ ચલો ઉમેર્યા.

• માટે નવું ચલ ઉમેર્યું $dropdown-padding-x.

• સુધારેલ કોન્ટ્રાસ્ટ માટે ડ્રોપડાઉન વિભાજકને અંધારું કર્યું.

• બ્રેકિંગડ્રોપડાઉન માટેની તમામ ઇવેન્ટ્સ હવે ડ્રોપડાઉન ટૉગલ બટન પર ટ્રિગર થાય છે અને પછી પિતૃ તત્વ સુધી બબલ કરવામાં આવે છે.

• data-bs-popper="static"જ્યારે ડ્રોપડાઉનની સ્થિતિ સ્થિર હોય અથવા ડ્રોપડાઉન નવબારમાં હોય ત્યારે ડ્રોપડાઉન મેનુમાં હવે એક વિશેષતા સેટ હોય છે. આ અમારી JavaScript દ્વારા ઉમેરવામાં આવ્યું છે અને પોપરની પોઝિશનિંગમાં દખલ કર્યા વિના કસ્ટમ પોઝિશન સ્ટાઇલનો ઉપયોગ કરવામાં અમને મદદ કરે છે.

• બ્રેકિંગમૂળ પોપર flipરૂપરેખાંકનની તરફેણમાં ડ્રોપડાઉન પ્લગઇન માટે ડ્રોપ કરેલ વિકલ્પ. તમે હવે ફ્લિપ મોડિફાયરમાં fallbackPlacementsવિકલ્પ માટે ખાલી એરે પસાર કરીને ફ્લિપિંગ વર્તનને અક્ષમ કરી શકો છો.

• ડ્રોપડાઉન મેનુઓ હવે ઓટો ક્લોઝ બિહેવિયરનેautoClose હેન્ડલ કરવા માટે નવા વિકલ્પ સાથે ક્લિક કરી શકાય છે . તમે આ વિકલ્પનો ઉપયોગ ડ્રોપડાઉન મેનૂની અંદર અથવા બહારના ક્લિકને ઇન્ટરેક્ટિવ બનાવવા માટે સ્વીકારવા માટે કરી શકો છો.

• ડ્રોપડાઉન હવે .dropdown-items માં આવરિત s ને સપોર્ટ કરે છે <li>.

જમ્બોટ્રોન

• બ્રેકિંગજમ્બોટ્રોન ઘટકને છોડી દીધું કારણ કે તે ઉપયોગિતાઓ સાથે નકલ કરી શકાય છે. ડેમો માટે અમારું નવું જમ્બોટ્રોન ઉદાહરણ જુઓ.

સૂચિ જૂથ

• જૂથોની સૂચિમાં નવું .list-group-numberedસંશોધક ઉમેર્યું.

Navs અને ટેબ

• , , , અને વર્ગ માટે નવા nullચલો ઉમેર્યા.font-sizefont-weightcolor:hover color.nav-link

નવબાર્સ

• બ્રેકિંગનેવબાર્સને હવે અંદર કન્ટેનરની જરૂર છે (અંતરની જરૂરિયાતો અને CSS આવશ્યકતાઓને ભારે સરળ બનાવવા માટે).
• બ્રેકિંગ.activeવર્ગ હવે s પર લાગુ કરી શકાતો નથી , .nav-itemતે સીધો .nav-links પર લાગુ થવો જોઈએ.

ઑફકેનવાસ

• નવો ઑફકેનવાસ ઘટક ઉમેર્યો .

પૃષ્ઠ ક્રમાંકન

• પૃષ્ઠ ક્રમાંકન લિંક્સ હવે કસ્ટમાઇઝ કરી શકાય margin-leftતેવી છે જે એક બીજાથી અલગ હોય ત્યારે તમામ ખૂણાઓ પર ગતિશીલ રીતે ગોળાકાર હોય છે.

• transitionપૃષ્ઠ ક્રમાંકન લિંક્સમાં s ઉમેર્યું .

પોપોવર્સ

• બ્રેકિંગઅમારા ડિફૉલ્ટ પોપઓવર નમૂનામાં નામ બદલ્યું .arrow..popover-arrow

• whiteListવિકલ્પનું નામ બદલ્યું allowList.

સ્પિનર્સ

• સ્પિનરો હવે prefers-reduced-motion: reduceએનિમેશનને ધીમું કરીને સન્માન કરે છે. જુઓ #31882 .

• સુધારેલ સ્પિનર ​​વર્ટિકલ ગોઠવણી.

ટોસ્ટ્સ

• પોઝિશનિંગ યુટિલિટીઝની મદદથી ટોસ્ટને હવે એમાં ગોઠવી શકાય છે ..toast-container

• ડિફોલ્ટ ટોસ્ટ સમયગાળો 5 સેકન્ડમાં બદલ્યો.

• toasts માંથી દૂર અને કાર્યો સાથે યોગ્ય s સાથે overflow: hiddenબદલાઈ .border-radiuscalc()

ટૂલટિપ્સ

• બ્રેકિંગઅમારા ડિફૉલ્ટ ટૂલટિપ નમૂનામાં નામ બદલ્યું .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, મોટાથી નાના) જેવા જ સ્કેલનો ઉપયોગ કરે છે અને સાસ મેપ દ્વારા સુધારી શકાય છે.

• બ્રેકિંગસંક્ષિપ્તતા અને સુસંગતતા માટે .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 ચલો હવે જનરેટ થાય છે અને Sass નકશામાં દરેક મૂલ્ય માટે સમાવેશ થાય છે. કોઈપણ કસ્ટમ આસ્પેક્ટ રેશિયો બનાવવા માટે પરના --bs-aspect-ratioચલમાં ફેરફાર કરો ..ratio

• બ્રેકિંગ "સ્ક્રીન રીડર" વર્ગો હવે "દૃષ્ટિમાં છુપાયેલા" વર્ગો છે .

  • 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 માં પ્લગઈન્સ ફરીથી લખ્યા.

• બ્રેકિંગતમામ 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().