મુખ્ય સામગ્રી પર જાઓ ડૉક્સ નેવિગેશન પર જાઓ
in English

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

તમને v4 થી v5 માં સ્થાનાંતરિત કરવામાં મદદ કરવા માટે બુટસ્ટ્રેપ સ્રોત ફાઇલો, દસ્તાવેજીકરણ અને ઘટકોમાં ફેરફારોને ટ્રૅક કરો અને સમીક્ષા કરો.

આ પૃષ્ઠ પર

અવલંબન

  • 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

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

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

આરટીએલ

  • ફ્લેક્સબોક્સ લેઆઉટમાં જોવા મળતા લોજિકલ પ્રોપર્ટીઝનો ઉપયોગ કરવા માટે હોરીઝોન્ટલ ડિરેક્શન સ્પેસિફિક વેરિએબલ્સ, યુટિલિટીઝ અને મિક્સિન્સ બધાનું નામ બદલવામાં આવ્યું છે—દા.ત., startઅને અને ની endજગ્યાએ .leftright

સ્વરૂપો

  • નવા ફ્લોટિંગ સ્વરૂપો ઉમેર્યા! અમે ફ્લોટિંગ લેબલ્સના ઉદાહરણને સંપૂર્ણપણે સપોર્ટેડ ફોર્મ ઘટકો માટે પ્રમોટ કર્યું છે. નવું ફ્લોટિંગ લેબલ્સ પેજ જુઓ.

  • બ્રેકિંગ એકીકૃત મૂળ અને કસ્ટમ ફોર્મ ઘટકો. ચેકબોક્સ, રેડિયો, સિલેક્ટ્સ અને અન્ય ઇનપુટ્સ કે જેઓ 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 સાથે 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આધારિત એકોર્ડિયનને નવા એકોર્ડિયન ઘટક સાથે બદલ્યું .

બંધ કરો બટન

  • બ્રેકિંગઓછા સામાન્ય નામ માટે .closeનામ બદલ્યું ..btn-close

  • ક્લોઝ બટનો હવે HTML માં background-imagea ને બદલે (એમ્બેડેડ SVG) નો ઉપયોગ કરે છે &times;, તમારા માર્કઅપને સ્પર્શ કર્યા વિના સરળ કસ્ટમાઇઝેશન માટે પરવાનગી આપે છે.

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

સંકુચિત કરો

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

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

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

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

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

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

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

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

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

જમ્બોટ્રોન

સૂચિ જૂથ

  • , , , અને વર્ગ માટે નવા nullચલો ઉમેર્યા.font-sizefont-weightcolor:hover color.nav-link
  • બ્રેકિંગનેવબાર્સને હવે અંદર કન્ટેનરની જરૂર છે (અંતરની જરૂરિયાતો અને CSS આવશ્યકતાઓને ભારે સરળ બનાવવા માટે).

ઑફકેનવાસ

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

  • પૃષ્ઠ ક્રમાંકન લિંક્સ હવે કસ્ટમાઇઝ કરી શકાય 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 પસંદગીકારને પાસ કરી શકો છો:

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

  • popperConfigફંક્શન તરીકે પસાર કરી શકાય છે કે જે બુટસ્ટ્રેપની ડિફોલ્ટ પોપર રૂપરેખાને દલીલ તરીકે સ્વીકારે છે, જેથી તમે આ ડિફોલ્ટ રૂપરેખાંકનને તમારી રીતે મર્જ કરી શકો. ડ્રોપડાઉન, પોપોવર્સ અને ટૂલટિપ્સ પર લાગુ થાય છે.

  • પોપર એલિમેન્ટ્સના બહેતર પ્લેસમેન્ટ માટે માટે ડિફૉલ્ટ મૂલ્ય fallbackPlacementsબદલાઈ ગયું છે . ડ્રોપડાઉન, પોપોવર્સ અને ટૂલટિપ્સ પર લાગુ થાય છે.['top', 'right', 'bottom', 'left']

  • _getInstance()જાહેર સ્થિર પદ્ધતિઓ જેમ કે → માંથી અન્ડરસ્કોર દૂર કર્યો getInstance().