ਮੁੱਖ ਸਮੱਗਰੀ ਤੇ ਜਾਓ ਡੌਕਸ ਨੈਵੀਗੇਸ਼ਨ 'ਤੇ ਜਾਓ
in English

v5 ਵਿੱਚ ਮਾਈਗਰੇਟ ਕਰਨਾ

ਬੂਟਸਟਰੈਪ ਸਰੋਤ ਫਾਈਲਾਂ, ਦਸਤਾਵੇਜ਼ਾਂ ਅਤੇ ਭਾਗਾਂ ਵਿੱਚ ਤਬਦੀਲੀਆਂ ਨੂੰ ਟ੍ਰੈਕ ਕਰੋ ਅਤੇ ਸਮੀਖਿਆ ਕਰੋ ਤਾਂ ਜੋ ਤੁਹਾਨੂੰ v4 ਤੋਂ v5 ਵਿੱਚ ਮਾਈਗਰੇਟ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕੀਤੀ ਜਾ ਸਕੇ।

ਨਿਰਭਰਤਾਵਾਂ

  • jQuery ਨੂੰ ਛੱਡ ਦਿੱਤਾ।
  • Popper v1.x ਤੋਂ Popper v2.x ਤੱਕ ਅੱਪਗਰੇਡ ਕੀਤਾ ਗਿਆ।
  • Libsass ਨੂੰ Dart Sass ਨਾਲ ਬਦਲਿਆ ਗਿਆ ਕਿਉਂਕਿ ਸਾਡੇ Sass ਕੰਪਾਈਲਰ ਦਿੱਤੇ ਗਏ Libsass ਨੂੰ ਬਰਤਰਫ਼ ਕੀਤਾ ਗਿਆ ਸੀ।
  • ਸਾਡੇ ਦਸਤਾਵੇਜ਼ ਬਣਾਉਣ ਲਈ ਜੇਕੀਲ ਤੋਂ ਹਿਊਗੋ ਤੱਕ ਪਰਵਾਸ ਕੀਤਾ

ਬਰਾਊਜ਼ਰ ਸਹਿਯੋਗ

  • ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 10 ਅਤੇ 11 ਨੂੰ ਛੱਡ ਦਿੱਤਾ ਗਿਆ
  • ਛੱਡਿਆ Microsoft Edge <16 (ਪੁਰਾਤਨ ਕਿਨਾਰਾ)
  • ਫਾਇਰਫਾਕਸ <60 ਛੱਡਿਆ ਗਿਆ
  • ਸਫਾਰੀ <12 ਛੱਡੀ ਗਈ
  • ਛੱਡਿਆ ਗਿਆ iOS Safari <12
  • ਡ੍ਰੌਪ ਕਰੋਮ <60

ਦਸਤਾਵੇਜ਼ੀ ਤਬਦੀਲੀਆਂ

  • ਮੁੜ-ਡਿਜ਼ਾਈਨ ਕੀਤਾ ਹੋਮਪੇਜ, ਡੌਕਸ ਲੇਆਉਟ, ਅਤੇ ਫੁੱਟਰ।
  • ਨਵੀਂ ਪਾਰਸਲ ਗਾਈਡ ਸ਼ਾਮਲ ਕੀਤੀ ਗਈ ।
  • Sass 'ਤੇ ਨਵੇਂ ਵੇਰਵਿਆਂ, ਗਲੋਬਲ ਕੌਂਫਿਗਰੇਸ਼ਨ ਵਿਕਲਪਾਂ, ਰੰਗ ਸਕੀਮਾਂ, CSS ਵੇਰੀਏਬਲ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਦੇ ਨਾਲ, v4 ਦੇ ਥੀਮਿੰਗ ਪੰਨੇ ਨੂੰ ਬਦਲ ਕੇ, ਨਵਾਂ ਕਸਟਮਾਈਜ਼ ਸੈਕਸ਼ਨ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ।
  • ਸਾਰੇ ਫਾਰਮ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਨਵੇਂ ਫਾਰਮ ਸੈਕਸ਼ਨ ਵਿੱਚ ਪੁਨਰਗਠਿਤ ਕੀਤਾ ਗਿਆ , ਸਮੱਗਰੀ ਨੂੰ ਹੋਰ ਫੋਕਸ ਕੀਤੇ ਪੰਨਿਆਂ ਵਿੱਚ ਵੰਡਿਆ ਗਿਆ।
  • ਇਸੇ ਤਰ੍ਹਾਂ, ਗਰਿੱਡ ਸਮਗਰੀ ਨੂੰ ਹੋਰ ਸਪਸ਼ਟ ਰੂਪ ਵਿੱਚ ਬਾਹਰ ਕੱਢਣ ਲਈ, ਖਾਕਾ ਸੈਕਸ਼ਨ ਨੂੰ ਅਪਡੇਟ ਕੀਤਾ ਗਿਆ ਹੈ।
  • "Navs" ਕੰਪੋਨੈਂਟ ਪੇਜ ਦਾ ਨਾਮ ਬਦਲ ਕੇ "Navs ਅਤੇ ਟੈਬਸ" ਰੱਖਿਆ ਗਿਆ ਹੈ।
  • "ਚੈੱਕਸ" ਪੰਨੇ ਦਾ ਨਾਮ ਬਦਲ ਕੇ "ਚੈੱਕ ਅਤੇ ਰੇਡੀਓ" ਰੱਖਿਆ ਗਿਆ ਹੈ।
  • ਸਾਡੀਆਂ ਸਾਈਟਾਂ ਅਤੇ ਡੌਕਸ ਸੰਸਕਰਣਾਂ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਜਾਣ ਨੂੰ ਆਸਾਨ ਬਣਾਉਣ ਲਈ ਨੇਵਬਾਰ ਨੂੰ ਮੁੜ ਡਿਜ਼ਾਈਨ ਕੀਤਾ ਅਤੇ ਇੱਕ ਨਵਾਂ ਸਬਨੈਵ ਸ਼ਾਮਲ ਕੀਤਾ।
  • ਖੋਜ ਖੇਤਰ ਲਈ ਨਵਾਂ ਕੀਬੋਰਡ ਸ਼ਾਰਟਕੱਟ ਜੋੜਿਆ ਗਿਆ: Ctrl + /.

ਸੱਸ

  • ਬੇਲੋੜੇ ਮੁੱਲਾਂ ਨੂੰ ਹਟਾਉਣਾ ਆਸਾਨ ਬਣਾਉਣ ਲਈ ਅਸੀਂ ਡਿਫੌਲਟ Sass ਮੈਪ ਮਰਜ ਨੂੰ ਛੱਡ ਦਿੱਤਾ ਹੈ। ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ ਕਿ ਤੁਹਾਨੂੰ ਹੁਣ 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(), ਅਤੇ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਛੱਡਿਆ ਗਿਆ। ਵੇਖੋ #29083gray()

  • ਤੋੜਨਾ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-shadowmixins ਹੁਣ ਮੁੱਲਾਂ ਨੂੰ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹਨ ਅਤੇ ਮਲਟੀਪਲ ਆਰਗੂਮੈਂਟਾਂ ਤੋਂ nullਡਰਾਪ ਕਰਦੇ ਹਨ। ਵੇਖੋ #30394 .none

  • ਮਿਕਸਿਨ ਦਾ border-radius()ਹੁਣ ਇੱਕ ਮੂਲ ਮੁੱਲ ਹੈ।

ਰੰਗ ਸਿਸਟਮ

  • ਰੰਗ ਪ੍ਰਣਾਲੀ ਜਿਸ ਨਾਲ ਕੰਮ ਕੀਤਾ ਗਿਆ ਸੀ color-level()ਅਤੇ $theme-color-intervalਇੱਕ ਨਵੀਂ ਰੰਗ ਪ੍ਰਣਾਲੀ ਦੇ ਹੱਕ ਵਿੱਚ ਹਟਾ ਦਿੱਤਾ ਗਿਆ ਸੀ। ਸਾਡੇ ਕੋਡਬੇਸ ਵਿੱਚ ਸਾਰੇ lighten()ਅਤੇ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਅਤੇ ਦੁਆਰਾ ਬਦਲਿਆ ਗਿਆ ਹੈ । ਇਹ ਫੰਕਸ਼ਨ ਇੱਕ ਨਿਸ਼ਚਿਤ ਮਾਤਰਾ ਦੁਆਰਾ ਇਸਦੀ ਹਲਕੀਤਾ ਨੂੰ ਬਦਲਣ ਦੀ ਬਜਾਏ ਰੰਗ ਨੂੰ ਚਿੱਟੇ ਜਾਂ ਕਾਲੇ ਨਾਲ ਮਿਲਾਉਣਗੇ। ਇਹ ਇਸ ਗੱਲ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ ਕਿ ਕੀ ਇਸਦਾ ਭਾਰ ਪੈਰਾਮੀਟਰ ਸਕਾਰਾਤਮਕ ਹੈ ਜਾਂ ਨਕਾਰਾਤਮਕ ਹੈ, ਰੰਗ ਨੂੰ ਰੰਗਤ ਜਾਂ ਰੰਗਤ ਕਰੇਗਾ। ਹੋਰ ਵੇਰਵਿਆਂ ਲਈ #30622 ਦੇਖੋ ।darken()tint-color()shade-color()shift-color()

  • ਨਵੇਂ Sass ਵੇਰੀਏਬਲ ਦੇ ਰੂਪ ਵਿੱਚ, ਹਰੇਕ ਬੇਸ ਕਲਰ ਲਈ ਨੌਂ ਵੱਖਰੇ ਰੰਗ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹੋਏ, ਹਰ ਰੰਗ ਲਈ ਨਵੇਂ ਟਿੰਟ ਅਤੇ ਸ਼ੇਡ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ ਹਨ।

  • ਸੁਧਾਰਿਆ ਰੰਗ ਵਿਪਰੀਤ. ਡਬਲਯੂਸੀਏਜੀ 2.1 ਏਏ ਕੰਟ੍ਰਾਸਟ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ 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-sizesSass ਨਕਸ਼ੇ ਨਾਲ ਸਾਡੀ ਡਿਸਪਲੇ ਟਾਈਪੋਗ੍ਰਾਫੀ ਨੂੰ ਓਵਰਹਾਲ ਕੀਤਾ ਗਿਆ। ਇੱਕ ਸਿੰਗਲ ਅਤੇ ਐਡਜਸਟਡ s $display-*-weightਲਈ ਵਿਅਕਤੀਗਤ ਵੇਰੀਏਬਲ ਵੀ ਹਟਾ ਦਿੱਤੇ ਗਏ ਹਨ ।$display-font-weightfont-size

  • ਦੋ ਨਵੇਂ .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

  • ਡਿਫੌਲਟ ਹਰੀਜੱਟਲ padding-leftਚਾਲੂ <ul>ਅਤੇ <ol>ਐਲੀਮੈਂਟਸ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ 40pxਤੋਂ 2rem.

  • ਜੋੜਿਆ $enable-smooth-scrollਗਿਆ, ਜੋ ਕਿ ਵਿਸ਼ਵ ਪੱਧਰ 'ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ— ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ scroll-behavior: smoothਰਾਹੀਂ ਘੱਟ ਗਤੀ ਦੀ ਮੰਗ ਕਰਨ ਵਾਲੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਛੱਡ ਕੇ । #31877 ਦੇਖੋprefers-reduced-motion

RTL

  • ਲੇਟਵੀਂ ਦਿਸ਼ਾ ਵਿਸ਼ੇਸ਼ ਵੇਰੀਏਬਲ, ਉਪਯੋਗਤਾਵਾਂ, ਅਤੇ ਮਿਕਸਿਨਸ ਦਾ ਨਾਮ ਬਦਲਿਆ ਗਿਆ ਹੈ ਜਿਵੇਂ ਕਿ ਫਲੈਕਸਬਾਕਸ ਲੇਆਉਟ ਵਿੱਚ ਪਾਏ ਜਾਣ ਵਾਲੇ ਲਾਜ਼ੀਕਲ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ — ਜਿਵੇਂ ਕਿ, 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 ਦੇ ਨਾਲ ਲਾਗੂ ਨਹੀਂ ਕੀਤੇ ਜਾਂਦੇ ਹਨ multiple

  • scss/forms/ਇਨਪੁਟ ਗਰੁੱਪ ਸਟਾਈਲ ਸਮੇਤ, ਦੇ ਅਧੀਨ ਮੁੜ ਵਿਵਸਥਿਤ ਸਰੋਤ Sass ਫਾਈਲਾਂ ।


ਕੰਪੋਨੈਂਟਸ

  • ਸਾਡੇ ਵੇਰੀਏਬਲ padding'ਤੇ ਆਧਾਰਿਤ ਹੋਣ ਲਈ ਅਲਰਟ, ਬ੍ਰੈੱਡਕ੍ਰੰਬਸ, ਕਾਰਡ, ਡ੍ਰੌਪਡਾਉਨ, ਸੂਚੀ ਸਮੂਹ, ਮਾਡਲ, ਪੌਪਓਵਰ ਅਤੇ ਟੂਲਟਿਪਸ ਲਈ ਯੂਨੀਫਾਈਡ ਮੁੱਲ। ਵੇਖੋ #30564 .$spacer

ਅਕਾਰਡੀਅਨ

ਚੇਤਾਵਨੀਆਂ

  • ਚੇਤਾਵਨੀਆਂ ਵਿੱਚ ਹੁਣ ਆਈਕਾਨਾਂ ਨਾਲ ਉਦਾਹਰਨਾਂ ਹਨ

  • <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 ਕਸਟਮ ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕੀਤੀ ਗਈ।

ਬਟਨ

  • ਤੋੜਨਾ ਟੌਗਲ ਬਟਨ , ਚੈਕਬਾਕਸ ਜਾਂ ਰੇਡੀਓ ਦੇ ਨਾਲ, ਹੁਣ JavaScript ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ ਅਤੇ ਨਵਾਂ ਮਾਰਕਅੱਪ ਹੈ। ਸਾਨੂੰ ਹੁਣ ਕਿਸੇ ਲਪੇਟਣ ਵਾਲੇ ਤੱਤ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ, ਵਿੱਚ ਜੋੜੋ.btn-check,<input>ਅਤੇ ਇਸਨੂੰ ਕਿਸੇ ਵੀ.btnਕਲਾਸ<label>। ਵੇਖੋ #30650 ਇਸਦੇ ਲਈ ਦਸਤਾਵੇਜ਼ ਸਾਡੇ ਬਟਨ ਪੰਨੇ ਤੋਂ ਨਵੇਂ ਫਾਰਮ ਸੈਕਸ਼ਨ ਵਿੱਚ ਚਲੇ ਗਏ ਹਨ।

  • ਤੋੜਨਾ ਸਹੂਲਤਾਂ .btn-blockਲਈ ਛੱਡ ਦਿੱਤਾ ਗਿਆ। .btn-block'ਤੇ ਵਰਤਣ ਦੀ ਬਜਾਏ , ਲੋੜ ਅਨੁਸਾਰ ਉਹਨਾਂ ਨੂੰ ਸਪੇਸ ਕਰਨ ਲਈ .btnਆਪਣੇ ਬਟਨਾਂ .d-gridਅਤੇ ਉਪਯੋਗਤਾ ਨਾਲ ਲਪੇਟੋ। .gap-*ਉਹਨਾਂ 'ਤੇ ਹੋਰ ਨਿਯੰਤਰਣ ਲਈ ਜਵਾਬਦੇਹ ਕਲਾਸਾਂ 'ਤੇ ਜਾਓ। ਕੁਝ ਉਦਾਹਰਣਾਂ ਲਈ ਦਸਤਾਵੇਜ਼ ਪੜ੍ਹੋ।

  • ਵਾਧੂ ਮਾਪਦੰਡਾਂ ਦਾ ਸਮਰਥਨ ਕਰਨ ਲਈ ਸਾਡੇ button-variant()ਅਤੇ ਮਿਕਸਿਨ ਨੂੰ ਅਪਡੇਟ ਕੀਤਾ ।button-outline-variant()

  • ਹੋਵਰ ਅਤੇ ਕਿਰਿਆਸ਼ੀਲ ਸਥਿਤੀਆਂ 'ਤੇ ਵਧੇ ਹੋਏ ਅੰਤਰ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਅੱਪਡੇਟ ਕੀਤੇ ਬਟਨ।

  • ਅਯੋਗ ਬਟਨ ਹੁਣ ਹਨ pointer-events: none;.

ਕਾਰਡ

  • ਤੋੜਨਾ.card-deckਸਾਡੇ ਗਰਿੱਡ ਦੇ ਹੱਕ ਵਿੱਚ ਸੁੱਟ ਦਿੱਤਾ। ਆਪਣੇ ਕਾਰਡਾਂ ਨੂੰ ਕਾਲਮ ਕਲਾਸਾਂ ਵਿੱਚ ਲਪੇਟੋ ਅਤੇ .row-cols-*ਕਾਰਡ ਡੈੱਕ ਨੂੰ ਮੁੜ ਬਣਾਉਣ ਲਈ ਇੱਕ ਪੇਰੈਂਟ ਕੰਟੇਨਰ ਸ਼ਾਮਲ ਕਰੋ (ਪਰ ਜਵਾਬਦੇਹ ਅਲਾਈਨਮੈਂਟ ਉੱਤੇ ਵਧੇਰੇ ਨਿਯੰਤਰਣ ਦੇ ਨਾਲ)।

  • ਤੋੜਨਾਮਿਸਤਰੀ .card-columnsਦੇ ਹੱਕ ਵਿੱਚ ਭੁਗਤ ਗਏ। ਵੇਖੋ #28922

  • ਤੋੜਨਾ.cardਆਧਾਰਿਤ ਐਕੋਰਡਿਅਨ ਨੂੰ ਇੱਕ ਨਵੇਂ ਐਕੋਰਡਿਅਨ ਕੰਪੋਨੈਂਟ ਨਾਲ ਬਦਲਿਆ ਗਿਆ ।

ਬੰਦ ਕਰੋ ਬਟਨ

  • ਤੋੜਨਾਇੱਕ ਘੱਟ ਆਮ ਨਾਮ ਲਈ ਨਾਮ ਬਦਲਿਆ .closeਗਿਆ ।.btn-close

  • ਬੰਦ ਕਰੋ ਬਟਨ ਹੁਣ HTML background-imageਵਿੱਚ ਇੱਕ ਦੀ ਬਜਾਏ ਇੱਕ (ਏਮਬੈਡਡ SVG) ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ &times;, ਜਿਸ ਨਾਲ ਤੁਹਾਡੇ ਮਾਰਕਅੱਪ ਨੂੰ ਛੂਹਣ ਦੀ ਲੋੜ ਤੋਂ ਬਿਨਾਂ ਆਸਾਨ ਅਨੁਕੂਲਤਾ ਦੀ ਆਗਿਆ ਮਿਲਦੀ ਹੈ।

  • ਨਵਾਂ ਰੂਪ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ ਹੈ ਜੋ ਗੂੜ੍ਹੇ ਬੈਕਗ੍ਰਾਉਂਡ ਦੇ ਵਿਰੁੱਧ ਉੱਚ ਕੰਟ੍ਰਾਸਟ ਖਾਰਜ ਆਈਕਨਾਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਣ ਲਈ .btn-close-whiteਵਰਤਦਾ ਹੈ।filter: invert(1)

ਸਮੇਟਣਾ

  • ਐਕੌਰਡੀਅਨਜ਼ ਲਈ ਹਟਾਈ ਗਈ ਸਕ੍ਰੋਲ ਐਂਕਰਿੰਗ।
  • .dropdown-menu-darkਆਨ-ਡਿਮਾਂਡ ਡਾਰਕ ਡ੍ਰੌਪਡਾਉਨ ਲਈ ਨਵਾਂ ਰੂਪ ਅਤੇ ਸੰਬੰਧਿਤ ਵੇਰੀਏਬਲ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ ।

  • ਲਈ ਨਵਾਂ ਵੇਰੀਏਬਲ ਜੋੜਿਆ ਗਿਆ $dropdown-padding-x

  • ਸੁਧਰੇ ਹੋਏ ਕੰਟ੍ਰਾਸਟ ਲਈ ਡ੍ਰੌਪਡਾਉਨ ਡਿਵਾਈਡਰ ਨੂੰ ਗੂੜ੍ਹਾ ਕੀਤਾ।

  • ਤੋੜਨਾਡ੍ਰੌਪਡਾਉਨ ਲਈ ਸਾਰੇ ਇਵੈਂਟਾਂ ਨੂੰ ਹੁਣ ਡ੍ਰੌਪਡਾਉਨ ਟੌਗਲ ਬਟਨ 'ਤੇ ਚਾਲੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਅਤੇ ਫਿਰ ਮੂਲ ਤੱਤ ਤੱਕ ਬਬਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।

  • ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਵਿੱਚ ਹੁਣ ਇੱਕ data-bs-popper="static"ਵਿਸ਼ੇਸ਼ਤਾ ਸੈੱਟ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਡ੍ਰੌਪਡਾਉਨ ਦੀ ਸਥਿਤੀ ਸਥਿਰ ਹੁੰਦੀ ਹੈ ਅਤੇ data-bs-popper="none"ਜਦੋਂ ਡ੍ਰੌਪਡਾਉਨ ਨਵਬਾਰ ਵਿੱਚ ਹੁੰਦਾ ਹੈ। ਇਹ ਸਾਡੀ JavaScript ਦੁਆਰਾ ਜੋੜਿਆ ਗਿਆ ਹੈ ਅਤੇ ਪੌਪਰ ਦੀ ਸਥਿਤੀ ਵਿੱਚ ਦਖਲ ਦਿੱਤੇ ਬਿਨਾਂ ਕਸਟਮ ਸਥਿਤੀ ਸ਼ੈਲੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਿੱਚ ਸਾਡੀ ਮਦਦ ਕਰਦਾ ਹੈ।

  • ਤੋੜਨਾਮੂਲ ਪੌਪਰ ਕੌਂਫਿਗਰੇਸ਼ਨ ਦੇ ਪੱਖ ਵਿੱਚ ਡ੍ਰੌਪਡਾਉਨ ਪਲੱਗਇਨ ਲਈ ਡ੍ਰੌਪ flipਵਿਕਲਪ। ਤੁਸੀਂ ਹੁਣ ਫਲਿੱਪ ਮੋਡੀਫਾਇਰ fallbackPlacementsਵਿੱਚ ਵਿਕਲਪ ਲਈ ਇੱਕ ਖਾਲੀ ਐਰੇ ਪਾਸ ਕਰਕੇ ਫਲਿੱਪਿੰਗ ਵਿਵਹਾਰ ਨੂੰ ਅਯੋਗ ਕਰ ਸਕਦੇ ਹੋ ।

  • ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਹੁਣ ਆਟੋ ਕਲੋਜ਼ ਵਿਵਹਾਰautoClose ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਇੱਕ ਨਵੇਂ ਵਿਕਲਪ ਨਾਲ ਕਲਿੱਕ ਕਰਨ ਯੋਗ ਹੋ ਸਕਦਾ ਹੈ । ਤੁਸੀਂ ਇਸ ਵਿਕਲਪ ਨੂੰ ਇੰਟਰਐਕਟਿਵ ਬਣਾਉਣ ਲਈ ਡਰਾਪਡਾਉਨ ਮੀਨੂ ਦੇ ਅੰਦਰ ਜਾਂ ਬਾਹਰ ਕਲਿੱਕ ਨੂੰ ਸਵੀਕਾਰ ਕਰਨ ਲਈ ਵਰਤ ਸਕਦੇ ਹੋ।

  • ਡ੍ਰੌਪਡਾਉਨ ਹੁਣ .dropdown-items ਵਿੱਚ ਲਪੇਟਿਆ s ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ <li>

ਜੰਬੋਟ੍ਰੋਨ

ਸੂਚੀ ਸਮੂਹ

  • , , , ਅਤੇ ਕਲਾਸ ਲਈ ਨਵੇਂ nullਵੇਰੀਏਬਲ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ।font-sizefont-weightcolor:hover color.nav-link
  • ਤੋੜਨਾNavbars ਨੂੰ ਹੁਣ ਅੰਦਰ ਇੱਕ ਕੰਟੇਨਰ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ (ਸਪੇਸਿੰਗ ਲੋੜਾਂ ਅਤੇ CSS ਦੀ ਲੋੜ ਨੂੰ ਬਹੁਤ ਸਰਲ ਬਣਾਉਣ ਲਈ)।

ਆਫਕੈਨਵਸ

ਪੰਨਾ ਨੰਬਰ

  • ਪੇਜਿਨੇਸ਼ਨ ਲਿੰਕਾਂ ਵਿੱਚ ਹੁਣ ਅਨੁਕੂਲਿਤ margin-leftਹੈ ਜੋ ਇੱਕ ਦੂਜੇ ਤੋਂ ਵੱਖ ਹੋਣ 'ਤੇ ਸਾਰੇ ਕੋਨਿਆਂ 'ਤੇ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਗੋਲ ਹੁੰਦੇ ਹਨ।

  • transitionਪੇਜਿਨੇਸ਼ਨ ਲਿੰਕਾਂ ਵਿੱਚ s ਜੋੜਿਆ ਗਿਆ ।

ਪੋਪੋਵਰਸ

  • ਤੋੜਨਾਸਾਡੇ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਪੌਪਓਵਰ ਟੈਂਪਲੇਟ ਵਿੱਚ ਨਾਮ ਬਦਲਿਆ .arrowਗਿਆ ।.popover-arrow

  • ਵਿਕਲਪ ਦਾ ਨਾਮ whiteListਬਦਲ ਕੇ allowList.

ਸਪਿਨਰ

  • ਸਪਿਨਰ ਹੁਣ prefers-reduced-motion: reduceਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਹੌਲੀ ਕਰਕੇ ਸਨਮਾਨਿਤ ਕਰਦੇ ਹਨ। ਵੇਖੋ #31882 .

  • ਸਪਿਨਰ ਵਰਟੀਕਲ ਅਲਾਈਨਮੈਂਟ ਵਿੱਚ ਸੁਧਾਰ ਕੀਤਾ ਗਿਆ ਹੈ।

ਟੋਸਟ

  • ਟੋਸਟਾਂ ਨੂੰ ਹੁਣ ਪੋਜੀਸ਼ਨਿੰਗ ਯੂਟਿਲਿਟੀਜ਼.toast-container ਦੀ ਮਦਦ ਨਾਲ ਏ ਵਿੱਚ ਰੱਖਿਆ ਜਾ ਸਕਦਾ ਹੈ ।

  • ਪੂਰਵ-ਨਿਰਧਾਰਤ ਟੋਸਟ ਮਿਆਦ ਨੂੰ 5 ਸਕਿੰਟਾਂ ਵਿੱਚ ਬਦਲਿਆ ਗਿਆ ਹੈ।

  • overflow: hiddenਟੋਸਟ ਤੋਂ ਹਟਾਇਆ ਗਿਆ ਅਤੇ ਫੰਕਸ਼ਨਾਂ ਦੇ ਨਾਲ ਸਹੀ border-radiuss ਨਾਲ ਬਦਲਿਆ ਗਿਆ।calc()

ਟੂਲਟਿੱਪ

  • ਤੋੜਨਾਸਾਡੇ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਟੂਲਟਿਪ ਟੈਮਪਲੇਟ ਵਿੱਚ ਨਾਮ ਬਦਲਿਆ .arrowਗਿਆ ।.tooltip-arrow

  • ਤੋੜਨਾਪੋਪਰ ਐਲੀਮੈਂਟਸ ਦੀ ਬਿਹਤਰ ਪਲੇਸਮੈਂਟ ਲਈ ਲਈ ਡਿਫੌਲਟ ਮੁੱਲ fallbackPlacementsਨੂੰ ਬਦਲਿਆ ਗਿਆ ਹੈ ।['top', 'right', 'bottom', 'left']

  • ਤੋੜਨਾਵਿਕਲਪ ਦਾ ਨਾਮ whiteListਬਦਲ ਕੇ allowList.

ਸਹੂਲਤ

  • ਤੋੜਨਾRTL ਸਮਰਥਨ ਦੇ ਨਾਲ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ ਨਾਵਾਂ ਦੀ ਬਜਾਏ ਲਾਜ਼ੀਕਲ ਸੰਪੱਤੀ ਨਾਮਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਕਈ ਉਪਯੋਗਤਾਵਾਂ ਦਾ ਨਾਮ ਬਦਲਿਆ:

    • ਨਾਮ ਬਦਲਿਆ .left-*ਅਤੇ ਅਤੇ .right-*ਨਾਲ ।.start-*.end-*
    • ਨਾਮ ਬਦਲਿਆ .float-leftਅਤੇ ਅਤੇ .float-rightਨਾਲ ।.float-start.float-end
    • ਨਾਮ ਬਦਲਿਆ .border-leftਅਤੇ ਅਤੇ .border-rightਨਾਲ ।.border-start.border-end
    • ਨਾਮ ਬਦਲਿਆ .rounded-leftਅਤੇ ਅਤੇ .rounded-rightਨਾਲ ।.rounded-start.rounded-end
    • ਨਾਮ ਬਦਲਿਆ .ml-*ਅਤੇ ਅਤੇ .mr-*ਨਾਲ ।.ms-*.me-*
    • ਨਾਮ ਬਦਲਿਆ .pl-*ਅਤੇ ਅਤੇ .pr-*ਨਾਲ ।.ps-*.pe-*
    • ਨਾਮ ਬਦਲਿਆ .text-leftਅਤੇ ਅਤੇ .text-rightਨਾਲ ।.text-start.text-end
  • ਤੋੜਨਾਪੂਰਵ-ਨਿਰਧਾਰਤ ਤੌਰ 'ਤੇ ਨਕਾਰਾਤਮਕ ਹਾਸ਼ੀਏ ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਇਆ ਗਿਆ ਹੈ।

  • ਦੇ ਬੈਕਗ੍ਰਾਊਂਡ ਨੂੰ ਵਾਧੂ ਤੱਤਾਂ 'ਤੇ ਤੇਜ਼ੀ ਨਾਲ ਸੈੱਟ ਕਰਨ ਲਈ ਨਵੀਂ .bg-bodyਕਲਾਸ ਸ਼ਾਮਲ ਕੀਤੀ ਗਈ।<body>

  • , , , ਅਤੇ ਲਈ ਨਵੀਂ ਸਥਿਤੀ ਉਪਯੋਗਤਾਵਾਂ ਸ਼ਾਮਲ ਕੀਤੀਆਂ ਗਈਆਂ । ਮੁੱਲਾਂ ਵਿੱਚ , , ਅਤੇ ਹਰੇਕ ਸੰਪਤੀ ਲਈ ਸ਼ਾਮਲ ਹਨ।toprightbottomleft050%100%

  • ਲੇਟਵੇਂ ਜਾਂ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਸੰਪੂਰਨ/ਸਥਿਰ ਸਥਿਤੀ ਵਾਲੇ ਤੱਤਾਂ ਲਈ ਨਵੀਂਆਂ .translate-middle-xਅਤੇ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਜੋੜਿਆ ਗਿਆ।.translate-middle-y

  • ਨਵੀਆਂ border-widthਸਹੂਲਤਾਂ ਸ਼ਾਮਲ ਕੀਤੀਆਂ ਗਈਆਂ ।

  • ਤੋੜਨਾਦਾ ਨਾਮ ਬਦਲ ਕੇ ਰੱਖਿਆ .text-monospaceਗਿਆ .font-monospace

  • ਤੋੜਨਾਹਟਾਇਆ .text-hideਗਿਆ ਕਿਉਂਕਿ ਇਹ ਟੈਕਸਟ ਨੂੰ ਲੁਕਾਉਣ ਦਾ ਇੱਕ ਪੁਰਾਣਾ ਤਰੀਕਾ ਹੈ ਜਿਸਦੀ ਵਰਤੋਂ ਹੁਣ ਨਹੀਂ ਕੀਤੀ ਜਾਣੀ ਚਾਹੀਦੀ ਹੈ।

  • .fs-*ਉਪਯੋਗਤਾਵਾਂ ਲਈ ਉਪਯੋਗਤਾਵਾਂ ਜੋੜੀਆਂ ਗਈਆਂ font-size(RFS ਸਮਰਥਿਤ ਨਾਲ)। ਇਹ HTML ਦੇ ਡਿਫੌਲਟ ਸਿਰਲੇਖਾਂ (1-6, ਵੱਡੇ ਤੋਂ ਛੋਟੇ) ਦੇ ਸਮਾਨ ਪੈਮਾਨੇ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ, ਅਤੇ Sass ਨਕਸ਼ੇ ਦੁਆਰਾ ਸੋਧਿਆ ਜਾ ਸਕਦਾ ਹੈ।

  • ਤੋੜਨਾਸੰਖੇਪਤਾ ਅਤੇ ਇਕਸਾਰਤਾ ਲਈ .font-weight-*ਉਪਯੋਗਤਾਵਾਂ ਦਾ ਨਾਮ ਬਦਲਿਆ ਗਿਆ।.fw-*

  • ਤੋੜਨਾਸੰਖੇਪਤਾ ਅਤੇ ਇਕਸਾਰਤਾ ਲਈ .font-style-*ਉਪਯੋਗਤਾਵਾਂ ਦਾ ਨਾਮ ਬਦਲਿਆ ਗਿਆ।.fst-*

  • CSS ਗਰਿੱਡ ਅਤੇ flexbox ਲੇਆਉਟ ਲਈ .d-gridਉਪਯੋਗਤਾਵਾਂ ਅਤੇ ਨਵੀਆਂ gapਉਪਯੋਗਤਾਵਾਂ ( ) ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਜੋੜਿਆ ਗਿਆ।.gap

  • ਤੋੜਨਾਨੂੰ ਹਟਾਇਆ .rounded-smਅਤੇ rounded-lg, ਅਤੇ ਕਲਾਸਾਂ ਦਾ ਇੱਕ ਨਵਾਂ ਪੈਮਾਨਾ, .rounded-0ਨੂੰ ਪੇਸ਼ ਕੀਤਾ .rounded-3ਵੇਖੋ #31687 .

  • ਨਵੀਆਂ line-heightਸਹੂਲਤਾਂ ਸ਼ਾਮਲ ਕੀਤੀਆਂ: .lh-1, .lh-sm, .lh-baseਅਤੇ .lh-lg. ਇੱਥੇ ਵੇਖੋ .

  • ਸਾਡੀ CSS ਵਿੱਚ .d-noneਉਪਯੋਗਤਾ ਨੂੰ ਹੋਰ ਡਿਸਪਲੇ ਯੂਟਿਲਿਟੀਜ਼ ਦੇ ਮੁਕਾਬਲੇ ਜ਼ਿਆਦਾ ਭਾਰ ਦੇਣ ਲਈ ਤਬਦੀਲ ਕੀਤਾ।

  • .visually-hidden-focusableਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, ਕੰਟੇਨਰਾਂ 'ਤੇ ਵੀ ਕੰਮ ਕਰਨ ਲਈ ਸਹਾਇਕ ਨੂੰ ਵਧਾਇਆ :focus-within

ਮਦਦਗਾਰ

  • ਤੋੜਨਾ ਜਵਾਬਦੇਹ ਏਮਬੇਡ ਹੈਲਪਰਾਂ ਨੂੰ ਨਵੇਂ ਕਲਾਸ ਨਾਮਾਂ ਅਤੇ ਸੁਧਾਰੇ ਹੋਏ ਵਿਵਹਾਰਾਂ ਦੇ ਨਾਲ ਨਾਲ ਇੱਕ ਮਦਦਗਾਰ CSS ਵੇਰੀਏਬਲ ਦੇ ਨਾਲ ਅਨੁਪਾਤ ਸਹਾਇਕਾਂ ਦਾ ਨਾਮ ਦਿੱਤਾ ਗਿਆ ਹੈ।

    • ਵਰਗਾਂ ਨੂੰ ਆਕਾਰ ਅਨੁਪਾਤ ਵਿੱਚ ਬਦਲਣ byਲਈ ਨਾਮ ਦਿੱਤਾ ਗਿਆ ਹੈ। xਉਦਾਹਰਨ ਲਈ, .ratio-16by9ਹੁਣ ਹੈ .ratio-16x9.
    • ਅਸੀਂ .embed-responsive-itemਇੱਕ ਸਧਾਰਨ ਚੋਣਕਾਰ ਦੇ ਹੱਕ ਵਿੱਚ ਅਤੇ ਤੱਤ ਸਮੂਹ ਚੋਣਕਾਰ ਨੂੰ ਛੱਡ ਦਿੱਤਾ ਹੈ .ratio > *। ਕਿਸੇ ਹੋਰ ਕਲਾਸ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ, ਅਤੇ ਅਨੁਪਾਤ ਸਹਾਇਕ ਹੁਣ ਕਿਸੇ ਵੀ HTML ਤੱਤ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ।
    • $embed-responsive-aspect-ratiosSass ਨਕਸ਼ੇ ਦਾ ਨਾਮ ਬਦਲ ਦਿੱਤਾ ਗਿਆ ਹੈ ਅਤੇ $aspect-ratiosਇਸ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਕਲਾਸ ਦੇ ਨਾਮ ਅਤੇ ਪ੍ਰਤੀਸ਼ਤ ਨੂੰ key: valueਜੋੜੀ ਵਜੋਂ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਸਰਲ ਬਣਾਇਆ ਗਿਆ ਹੈ।
    • CSS ਵੇਰੀਏਬਲ ਹੁਣ ਤਿਆਰ ਕੀਤੇ ਗਏ ਹਨ ਅਤੇ Sass ਨਕਸ਼ੇ ਵਿੱਚ ਹਰੇਕ ਮੁੱਲ ਲਈ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ ਹਨ। ਕੋਈ ਵੀ ਕਸਟਮ ਆਸਪੈਕਟ ਰੇਸ਼ੋ ਬਣਾਉਣ ਲਈ --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ਹੁਣ ਸਾਡੇ ਸਹਾਇਕ ਵੀ ਸ਼ਾਮਲ ਹਨ। ਹੈਲਪਰਾਂ ਨੂੰ ਹੁਣ ਕਸਟਮ ਬਿਲਡਾਂ ਵਿੱਚ ਆਯਾਤ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ।

JavaScript

  • 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()