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

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

ਇਸ ਪੰਨੇ 'ਤੇ

v5.2.0

ਤਾਜ਼ਾ ਡਿਜ਼ਾਇਨ

Bootstrap v5.2.0 ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਮੁੱਠੀ ਭਰ ਭਾਗਾਂ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ ਇੱਕ ਸੂਖਮ ਡਿਜ਼ਾਈਨ ਅੱਪਡੇਟ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਰੱਖਦਾ ਹੈ, ਖਾਸ ਤੌਰ border-radius'ਤੇ ਬਟਨਾਂ ਅਤੇ ਫਾਰਮ ਨਿਯੰਤਰਣਾਂ 'ਤੇ ਸ਼ੁੱਧ ਮੁੱਲਾਂ ਦੁਆਰਾ । ਸਾਡੇ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਇੱਕ ਨਵੇਂ ਹੋਮਪੇਜ, ਸਰਲ ਡੌਕਸ ਲੇਆਉਟ ਨਾਲ ਵੀ ਅੱਪਡੇਟ ਕੀਤਾ ਗਿਆ ਹੈ ਜੋ ਹੁਣ ਸਾਈਡਬਾਰ ਦੇ ਭਾਗਾਂ ਨੂੰ ਨਹੀਂ ਸਮੇਟਦਾ ਹੈ, ਅਤੇ ਬੂਟਸਟਰੈਪ ਆਈਕਨਾਂ ਦੀਆਂ ਹੋਰ ਪ੍ਰਮੁੱਖ ਉਦਾਹਰਣਾਂ ।

ਹੋਰ CSS ਵੇਰੀਏਬਲ

ਅਸੀਂ CSS ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਸਾਡੇ ਸਾਰੇ ਭਾਗਾਂ ਨੂੰ ਅੱਪਡੇਟ ਕਰ ਦਿੱਤਾ ਹੈ। ਜਦੋਂ ਕਿ Sass ਅਜੇ ਵੀ ਹਰ ਚੀਜ਼ ਨੂੰ ਅੰਡਰਪਿੰਨ ਕਰਦਾ ਹੈ, ਹਰੇਕ ਕੰਪੋਨੈਂਟ ਨੂੰ ਕੰਪੋਨੈਂਟ ਬੇਸ ਕਲਾਸਾਂ (ਉਦਾਹਰਨ ਲਈ, .btn) ਉੱਤੇ CSS ਵੇਰੀਏਬਲ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਅੱਪਡੇਟ ਕੀਤਾ ਗਿਆ ਹੈ, ਜਿਸ ਨਾਲ ਬੂਟਸਟਰੈਪ ਦੇ ਹੋਰ ਰੀਅਲ-ਟਾਈਮ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੱਤੀ ਜਾ ਸਕੇ। ਅਗਲੀਆਂ ਰੀਲੀਜ਼ਾਂ ਵਿੱਚ, ਅਸੀਂ CSS ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਨੂੰ ਸਾਡੇ ਖਾਕੇ, ਫਾਰਮਾਂ, ਸਹਾਇਕਾਂ ਅਤੇ ਉਪਯੋਗਤਾਵਾਂ ਵਿੱਚ ਵਧਾਉਣਾ ਜਾਰੀ ਰੱਖਾਂਗੇ। ਉਹਨਾਂ ਦੇ ਸਬੰਧਤ ਦਸਤਾਵੇਜ਼ ਪੰਨਿਆਂ 'ਤੇ ਹਰੇਕ ਹਿੱਸੇ ਵਿੱਚ CSS ਵੇਰੀਏਬਲਾਂ ਬਾਰੇ ਹੋਰ ਪੜ੍ਹੋ।

Bootstrap 6 ਤੱਕ ਸਾਡੀ CSS ਵੇਰੀਏਬਲ ਵਰਤੋਂ ਕੁਝ ਹੱਦ ਤੱਕ ਅਧੂਰੀ ਰਹੇਗੀ। ਹਾਲਾਂਕਿ ਅਸੀਂ ਇਹਨਾਂ ਨੂੰ ਪੂਰੇ ਬੋਰਡ ਵਿੱਚ ਲਾਗੂ ਕਰਨਾ ਪਸੰਦ ਕਰਾਂਗੇ, ਪਰ ਇਹ ਟੁੱਟਣ ਵਾਲੀਆਂ ਤਬਦੀਲੀਆਂ ਦਾ ਖ਼ਤਰਾ ਬਣਾਉਂਦੇ ਹਨ। ਉਦਾਹਰਨ ਲਈ, ਜੇਕਰ ਤੁਸੀਂ ਕਿਸੇ ਕਾਰਨ ਕਰਕੇ $alert-border-width: var(--bs-border-width)ਕਰ ਰਹੇ ਹੋ ਤਾਂ ਸਾਡੇ ਸਰੋਤ ਕੋਡ ਵਿੱਚ ਸੈਟਿੰਗ ਤੁਹਾਡੇ ਆਪਣੇ ਕੋਡ ਵਿੱਚ ਸੰਭਾਵੀ Sass ਨੂੰ ਤੋੜ ਦਿੰਦੀ ਹੈ।$alert-border-width * 2

ਇਸ ਤਰ੍ਹਾਂ, ਜਿੱਥੇ ਵੀ ਸੰਭਵ ਹੋਵੇ, ਅਸੀਂ ਹੋਰ CSS ਵੇਰੀਏਬਲਾਂ ਵੱਲ ਧੱਕਣਾ ਜਾਰੀ ਰੱਖਾਂਗੇ, ਪਰ ਕਿਰਪਾ ਕਰਕੇ ਪਛਾਣੋ ਕਿ ਸਾਡੇ ਲਾਗੂਕਰਨ ਨੂੰ v5 ਵਿੱਚ ਥੋੜ੍ਹਾ ਸੀਮਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

ਨਵਾਂ`_maps.scss`

ਬੂਟਸਟਰੈਪ v5.2.0 ਨਾਲ ਇੱਕ ਨਵੀਂ Sass ਫਾਈਲ ਪੇਸ਼ ਕੀਤੀ ਗਈ ਹੈ _maps.scss। ਇਹ ਇੱਕ ਮੁੱਦੇ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ ਕਈ Sass ਨਕਸ਼ੇ ਨੂੰ ਬਾਹਰ ਕੱਢਦਾ ਹੈ _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. ਉਦਾਹਰਨ ਲਈ ਟੇਬਲ ਡੌਕਸ ਦੇਖੋ।
Scrollspy ਨੂੰ ਇੰਟਰਸੈਕਸ਼ਨ ਆਬਜ਼ਰਵਰ API ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਦੁਬਾਰਾ ਲਿਖਿਆ ਗਿਆ ਹੈ , ਜਿਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਹੁਣ ਸੰਬੰਧਿਤ ਪੇਰੈਂਟ ਰੈਪਰ, ਬਰਤਰਫ਼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 ਨਿਯੰਤਰਣ <body>ਸਟਾਈਲ ਲਈ ਪੱਧਰ 'ਤੇ ਕਈ ਨਵੇਂ CSS ਵੇਰੀਏਬਲ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ ਹਨ। ਸਾਡੀਆਂ ਉਪਯੋਗਤਾਵਾਂ ਅਤੇ ਭਾਗਾਂ ਸਮੇਤ ਹੋਰ ਕੰਮ ਚੱਲ ਰਹੇ ਹਨ, ਪਰ ਹੁਣ ਲਈ ਕਸਟਮਾਈਜ਼ ਸੈਕਸ਼ਨ ਵਿੱਚ CSS ਵੇਰੀਏਬਲ ਪੜ੍ਹੋ ।
CSS ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਰੰਗ ਅਤੇ ਬੈਕਗ੍ਰਾਉਂਡ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਓਵਰਹਾਲ ਕੀਤਾ ਗਿਆ ਹੈ, ਅਤੇ ਨਵੀਂ ਟੈਕਸਟ ਧੁੰਦਲਾਪਣ ਅਤੇ ਬੈਕਗ੍ਰਾਉਂਡ ਧੁੰਦਲਾਪਣ ਉਪਯੋਗਤਾਵਾਂ ਸ਼ਾਮਲ ਕੀਤੀਆਂ ਗਈਆਂ ਹਨ। — .text-* ਅਤੇ .bg-*ਉਪਯੋਗਤਾਵਾਂ ਹੁਣ CSS ਵੇਰੀਏਬਲ ਅਤੇ rgba()ਰੰਗ ਮੁੱਲਾਂ ਨਾਲ ਬਣਾਈਆਂ ਗਈਆਂ ਹਨ, ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਨਵੀਂ ਧੁੰਦਲੀ ਉਪਯੋਗਤਾਵਾਂ ਨਾਲ ਕਿਸੇ ਵੀ ਉਪਯੋਗਤਾ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹੋ।
ਸਾਡੇ ਭਾਗਾਂ ਨੂੰ ਕਸਟਮਾਈਜ਼ ਕਿਵੇਂ ਕਰਨਾ ਹੈ ਇਹ ਦਿਖਾਉਣ ਲਈ ਨਵੇਂ ਸਨਿੱਪਟ ਉਦਾਹਰਨਾਂ ਸ਼ਾਮਲ ਕੀਤੀਆਂ ਗਈਆਂ। — ਸਾਡੀਆਂ ਨਵੀਆਂ ਸਨਿੱਪਟਾਂ ਦੀਆਂ ਉਦਾਹਰਨਾਂ ਨਾਲ ਕਸਟਮਾਈਜ਼ ਕੀਤੇ ਭਾਗਾਂ ਅਤੇ ਹੋਰ ਆਮ ਡਿਜ਼ਾਈਨ ਪੈਟਰਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਤਿਆਰ ਖਿੱਚੋ । ਪਦਲੇਖ , ਡਰਾਪਡਾਉਨ , ਸੂਚੀ ਸਮੂਹ , ਅਤੇ ਮਾਡਲਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ .
ਪੋਪਓਵਰ ਅਤੇ ਟੂਲਟਿਪਸ ਤੋਂ ਅਣਵਰਤੀਆਂ ਪੋਜੀਸ਼ਨਿੰਗ ਸਟਾਈਲਾਂ ਨੂੰ ਹਟਾ ਦਿੱਤਾ ਗਿਆ ਹੈ ਕਿਉਂਕਿ ਇਹਨਾਂ ਨੂੰ ਸਿਰਫ਼ ਪੋਪਰ ਦੁਆਰਾ ਸੰਭਾਲਿਆ ਜਾਂਦਾ ਹੈ। $tooltip-marginਨੂੰ ਬਰਤਰਫ਼ ਕੀਤਾ ਗਿਆ ਹੈ ਅਤੇ nullਪ੍ਰਕਿਰਿਆ ਵਿੱਚ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ।

ਹੋਰ ਜਾਣਕਾਰੀ ਚਾਹੁੰਦੇ ਹੋ? v5.1.0 ਬਲੌਗ ਪੋਸਟ ਪੜ੍ਹੋ।

ਹੇ ਉਥੇ! Bootstrap 5, v5.0.0 ਦੇ ਸਾਡੇ ਪਹਿਲੇ ਪ੍ਰਮੁੱਖ ਰੀਲੀਜ਼ ਵਿੱਚ ਬਦਲਾਅ ਹੇਠਾਂ ਦਸਤਾਵੇਜ਼ੀ ਤੌਰ 'ਤੇ ਦਿੱਤੇ ਗਏ ਹਨ। ਉਹ ਉੱਪਰ ਦਿਖਾਈਆਂ ਗਈਆਂ ਵਾਧੂ ਤਬਦੀਲੀਆਂ ਨੂੰ ਨਹੀਂ ਦਰਸਾਉਂਦੇ।

ਨਿਰਭਰਤਾਵਾਂ

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
ਤੋੜਨਾ <hr>ਤੱਤ ਹੁਣ ਗੁਣ ਨੂੰ ਬਿਹਤਰ ਸਮਰਥਨ ਦੇਣ ਦੀ heightਬਜਾਏ ਵਰਤਦੇ ਹਨ। ਇਹ ਮੋਟੇ ਡਿਵਾਈਡਰ (ਉਦਾਹਰਨ ਲਈ, ) ਬਣਾਉਣ ਲਈ ਪੈਡਿੰਗ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਨੂੰ ਵੀ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।bordersize<hr class="py-1">
ਡਿਫੌਲਟ ਹਰੀਜੱਟਲ padding-leftਚਾਲੂ <ul>ਅਤੇ <ol>ਐਲੀਮੈਂਟਸ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ 40pxਤੋਂ 2rem.
ਜੋੜਿਆ $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'ਤੇ ਆਧਾਰਿਤ ਹੋਣ ਲਈ ਅਲਰਟ, ਬ੍ਰੈੱਡਕ੍ਰੰਬਸ, ਕਾਰਡ, ਡ੍ਰੌਪਡਾਉਨ, ਸੂਚੀ ਸਮੂਹ, ਮਾਡਲ, ਪੌਪਓਵਰ ਅਤੇ ਟੂਲਟਿਪਸ ਲਈ ਯੂਨੀਫਾਈਡ ਮੁੱਲ। ਵੇਖੋ #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ਆਧਾਰਿਤ ਐਕੋਰਡਿਅਨ ਨੂੰ ਇੱਕ ਨਵੇਂ ਐਕੋਰਡਿਅਨ ਕੰਪੋਨੈਂਟ ਨਾਲ ਬਦਲਿਆ ਗਿਆ ।

ਕੈਰੋਸਲ

ਗੂੜ੍ਹੇ ਟੈਕਸਟ, ਨਿਯੰਤਰਣ ਅਤੇ ਸੂਚਕਾਂ ਲਈ ਨਵਾਂ .carousel-darkਰੂਪ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ (ਹਲਕੇ ਬੈਕਗ੍ਰਾਊਂਡ ਲਈ ਵਧੀਆ)।
ਬੂਟਸਟਰੈਪ ਆਈਕਨਾਂ ਤੋਂ ਨਵੇਂ SVGs ਨਾਲ ਕੈਰੋਜ਼ਲ ਨਿਯੰਤਰਣ ਲਈ ਸ਼ੈਵਰੋਨ ਆਈਕਨਾਂ ਨੂੰ ਬਦਲਿਆ ਗਿਆ ।

ਬੰਦ ਕਰੋ ਬਟਨ

ਤੋੜਨਾਇੱਕ ਘੱਟ ਆਮ ਨਾਮ ਲਈ ਨਾਮ ਬਦਲਿਆ .closeਗਿਆ ।.btn-close
ਬੰਦ ਕਰੋ ਬਟਨ ਹੁਣ HTML background-imageਵਿੱਚ ਇੱਕ ਦੀ ਬਜਾਏ ਇੱਕ (ਏਮਬੈਡਡ 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

ਨਵਬਾਰ

ਤੋੜਨਾNavbars ਨੂੰ ਹੁਣ ਅੰਦਰ ਇੱਕ ਕੰਟੇਨਰ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ (ਸਪੇਸਿੰਗ ਲੋੜਾਂ ਅਤੇ CSS ਦੀ ਲੋੜ ਨੂੰ ਬਹੁਤ ਸਰਲ ਬਣਾਉਣ ਲਈ)।
ਤੋੜਨਾਕਲਾਸ ਨੂੰ .activeਹੁਣ s 'ਤੇ ਲਾਗੂ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ .nav-item, ਇਹ s 'ਤੇ ਸਿੱਧਾ ਲਾਗੂ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ .nav-link।

ਆਫਕੈਨਵਸ

ਨਵਾਂ ਆਫਕੈਨਵਸ ਕੰਪੋਨੈਂਟ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ ।

ਪੰਨਾ ਨੰਬਰ

ਪੇਜਿਨੇਸ਼ਨ ਲਿੰਕਾਂ ਵਿੱਚ ਹੁਣ ਅਨੁਕੂਲਿਤ 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 ਚੋਣਕਾਰ ਪਾਸ ਕਰ ਸਕਦੇ ਹੋ:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigਇੱਕ ਫੰਕਸ਼ਨ ਵਜੋਂ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਜੋ ਬੂਟਸਟਰੈਪ ਦੀ ਡਿਫਾਲਟ ਪੋਪਰ ਸੰਰਚਨਾ ਨੂੰ ਇੱਕ ਆਰਗੂਮੈਂਟ ਵਜੋਂ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ, ਤਾਂ ਜੋ ਤੁਸੀਂ ਇਸ ਡਿਫੌਲਟ ਸੰਰਚਨਾ ਨੂੰ ਆਪਣੇ ਤਰੀਕੇ ਨਾਲ ਮਿਲ ਸਕੋ। ਡ੍ਰੌਪਡਾਊਨ, ਪੌਪਓਵਰ ਅਤੇ ਟੂਲਟਿਪਸ 'ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ।
ਪੋਪਰ ਐਲੀਮੈਂਟਸ ਦੀ ਬਿਹਤਰ ਪਲੇਸਮੈਂਟ ਲਈ ਲਈ ਡਿਫੌਲਟ ਮੁੱਲ fallbackPlacementsਨੂੰ ਬਦਲਿਆ ਗਿਆ ਹੈ । ਡ੍ਰੌਪਡਾਊਨ, ਪੌਪਓਵਰ ਅਤੇ ਟੂਲਟਿਪਸ 'ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ।['top', 'right', 'bottom', 'left']
_getInstance()ਜਨਤਕ ਸਥਿਰ ਵਿਧੀਆਂ ਜਿਵੇਂ ਕਿ → ਤੋਂ ਅੰਡਰਸਕੋਰ ਹਟਾਇਆ ਗਿਆ getInstance()।