Source

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

ਬੂਟਸਟਰੈਪ 4 ਪੂਰੇ ਪ੍ਰੋਜੈਕਟ ਦਾ ਇੱਕ ਪ੍ਰਮੁੱਖ ਮੁੜ ਲਿਖਣਾ ਹੈ। ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਤਬਦੀਲੀਆਂ ਦਾ ਸਾਰ ਹੇਠਾਂ ਦਿੱਤਾ ਗਿਆ ਹੈ, ਇਸਦੇ ਬਾਅਦ ਸੰਬੰਧਿਤ ਭਾਗਾਂ ਵਿੱਚ ਹੋਰ ਖਾਸ ਬਦਲਾਅ ਕੀਤੇ ਗਏ ਹਨ।

ਸਥਿਰ ਤਬਦੀਲੀਆਂ

ਬੀਟਾ 3 ਤੋਂ ਸਾਡੀ ਸਥਿਰ v4.0 ਰੀਲੀਜ਼ ਵਿੱਚ ਜਾਣ ਨਾਲ, ਕੋਈ ਤੋੜਨ ਵਾਲੀਆਂ ਤਬਦੀਲੀਆਂ ਨਹੀਂ ਹਨ, ਪਰ ਕੁਝ ਮਹੱਤਵਪੂਰਨ ਤਬਦੀਲੀਆਂ ਹਨ।

ਛਪਾਈ

  • ਸਥਿਰ ਟੁੱਟੀਆਂ ਪ੍ਰਿੰਟ ਉਪਯੋਗਤਾਵਾਂ। ਪਹਿਲਾਂ, ਇੱਕ .d-print-*ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਅਚਾਨਕ ਕਿਸੇ ਹੋਰ .d-*ਕਲਾਸ ਨੂੰ ਓਵਰਰੂਲ ਕਰ ਦਿੰਦੀ ਸੀ। ਹੁਣ, ਉਹ ਸਾਡੀਆਂ ਹੋਰ ਡਿਸਪਲੇ ਸਹੂਲਤਾਂ ਨਾਲ ਮੇਲ ਖਾਂਦੇ ਹਨ ਅਤੇ ਸਿਰਫ਼ ਉਸ ਮੀਡੀਆ ( @media print) 'ਤੇ ਲਾਗੂ ਹੁੰਦੇ ਹਨ।

  • ਹੋਰ ਉਪਯੋਗਤਾਵਾਂ ਨਾਲ ਮੇਲ ਕਰਨ ਲਈ ਉਪਲਬਧ ਪ੍ਰਿੰਟ ਡਿਸਪਲੇ ਉਪਯੋਗਤਾਵਾਂ ਦਾ ਵਿਸਤਾਰ ਕੀਤਾ ਗਿਆ। ਬੀਟਾ 3 ਅਤੇ ਪੁਰਾਣੇ ਕੋਲ ਸਿਰਫ਼ block, inline-block, inline, ਅਤੇ noneਸੀ. ਸਥਿਰ v4 ਜੋੜਿਆ ਗਿਆ flex, inline-flex, table, table-row, ਅਤੇ table-cell.

  • ਨਿਸ਼ਚਿਤ ਪ੍ਰਿੰਟ ਸ਼ੈਲੀਆਂ ਦੇ ਨਾਲ ਬ੍ਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਸਥਿਰ ਪ੍ਰਿੰਟ ਪ੍ਰੀਵਿਊ ਰੈਂਡਰਿੰਗ @page size।

ਬੀਟਾ 3 ਬਦਲਦਾ ਹੈ

ਜਦੋਂ ਕਿ ਬੀਟਾ 2 ਨੇ ਬੀਟਾ ਪੜਾਅ ਦੌਰਾਨ ਸਾਡੀਆਂ ਵੱਡੀਆਂ ਤਬਦੀਲੀਆਂ ਨੂੰ ਦੇਖਿਆ, ਪਰ ਸਾਡੇ ਕੋਲ ਅਜੇ ਵੀ ਕੁਝ ਹਨ ਜਿਨ੍ਹਾਂ ਨੂੰ ਬੀਟਾ 3 ਰੀਲੀਜ਼ ਵਿੱਚ ਸੰਬੋਧਿਤ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਇਹ ਤਬਦੀਲੀਆਂ ਲਾਗੂ ਹੁੰਦੀਆਂ ਹਨ ਜੇਕਰ ਤੁਸੀਂ ਬੀਟਾ 2 ਜਾਂ ਬੂਟਸਟਰੈਪ ਦੇ ਕਿਸੇ ਪੁਰਾਣੇ ਸੰਸਕਰਣ ਤੋਂ ਬੀਟਾ 3 ਨੂੰ ਅੱਪਡੇਟ ਕਰ ਰਹੇ ਹੋ।

ਫੁਟਕਲ

  • $thumbnail-transitionਨਾ ਵਰਤੇ ਵੇਰੀਏਬਲ ਨੂੰ ਹਟਾ ਦਿੱਤਾ ਗਿਆ । ਅਸੀਂ ਕੁਝ ਵੀ ਤਬਦੀਲ ਨਹੀਂ ਕਰ ਰਹੇ ਸੀ, ਇਸ ਲਈ ਇਹ ਸਿਰਫ਼ ਵਾਧੂ ਕੋਡ ਸੀ।
  • npm ਪੈਕੇਜ ਵਿੱਚ ਹੁਣ ਸਾਡੇ ਸਰੋਤ ਅਤੇ ਡਿਸਟ ਫਾਈਲਾਂ ਤੋਂ ਇਲਾਵਾ ਕੋਈ ਹੋਰ ਫਾਈਲਾਂ ਸ਼ਾਮਲ ਨਹੀਂ ਹਨ; ਜੇਕਰ ਤੁਸੀਂ ਉਹਨਾਂ 'ਤੇ ਭਰੋਸਾ ਕਰਦੇ ਹੋ ਅਤੇ ਫੋਲਡਰ ਰਾਹੀਂ ਸਾਡੀਆਂ ਸਕ੍ਰਿਪਟਾਂ ਨੂੰ ਚਲਾ ਰਹੇ node_modulesਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਆਪਣੇ ਵਰਕਫਲੋ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣਾ ਚਾਹੀਦਾ ਹੈ।

ਫਾਰਮ

  • ਕਸਟਮ ਅਤੇ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਚੈਕਬਾਕਸ ਅਤੇ ਰੇਡੀਓ ਦੋਵਾਂ ਨੂੰ ਦੁਬਾਰਾ ਲਿਖੋ। ਹੁਣ, ਦੋਵਾਂ ਕੋਲ ਮੇਲ ਖਾਂਦਾ HTML ਢਾਂਚਾ ( <div>sibling <input>ਅਤੇ <label>) ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ ਅਤੇ ਉਹੀ ਲੇਆਉਟ ਸਟਾਈਲ (ਸਟੈਕਡ ਡਿਫੌਲਟ, ਮੋਡੀਫਾਇਰ ਕਲਾਸ ਦੇ ਨਾਲ ਇਨਲਾਈਨ) ਹਨ। ਇਹ ਸਾਨੂੰ ਇਨਪੁਟ ਦੀ ਸਥਿਤੀ ਦੇ ਆਧਾਰ 'ਤੇ ਲੇਬਲ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ, disabledਵਿਸ਼ੇਸ਼ਤਾ ਲਈ ਸਮਰਥਨ ਨੂੰ ਸਰਲ ਬਣਾਉਂਦਾ ਹੈ (ਪਹਿਲਾਂ ਇੱਕ ਪੇਰੈਂਟ ਕਲਾਸ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ) ਅਤੇ ਸਾਡੇ ਫਾਰਮ ਪ੍ਰਮਾਣਿਕਤਾ ਦਾ ਬਿਹਤਰ ਸਮਰਥਨ ਕਰਦਾ ਹੈ।

    ਇਸ ਦੇ ਹਿੱਸੇ ਵਜੋਂ, ਅਸੀਂ background-imageਕਸਟਮ ਫਾਰਮ ਚੈੱਕਬਾਕਸ ਅਤੇ ਰੇਡੀਓ 'ਤੇ ਮਲਟੀਪਲ s ਦੇ ਪ੍ਰਬੰਧਨ ਲਈ CSS ਨੂੰ ਬਦਲ ਦਿੱਤਾ ਹੈ। ਪਹਿਲਾਂ, ਹੁਣ ਹਟਾਏ ਗਏ .custom-control-indicatorਤੱਤ ਵਿੱਚ ਪਿਛੋਕੜ ਦਾ ਰੰਗ, ਗਰੇਡੀਐਂਟ, ਅਤੇ SVG ਆਈਕਨ ਸੀ। ਬੈਕਗ੍ਰਾਉਂਡ ਗਰੇਡੀਐਂਟ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨ ਦਾ ਮਤਲਬ ਹੈ ਉਹਨਾਂ ਸਾਰਿਆਂ ਨੂੰ ਹਰ ਵਾਰ ਬਦਲਣਾ ਜਦੋਂ ਤੁਹਾਨੂੰ ਸਿਰਫ਼ ਇੱਕ ਨੂੰ ਬਦਲਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਹੁਣ, ਸਾਡੇ ਕੋਲ .custom-control-label::beforeਭਰਨ ਅਤੇ ਗਰੇਡੀਐਂਟ ਲਈ ਹੈ ਅਤੇ .custom-control-label::afterਆਈਕਨ ਨੂੰ ਹੈਂਡਲ ਕਰਦਾ ਹੈ।

    ਕਸਟਮ ਚੈੱਕ ਇਨਲਾਈਨ ਬਣਾਉਣ ਲਈ, ਜੋੜੋ .custom-control-inline।

  • ਇਨਪੁਟ-ਅਧਾਰਿਤ ਬਟਨ ਸਮੂਹਾਂ ਲਈ ਅੱਪਡੇਟ ਕੀਤਾ ਚੋਣਕਾਰ। [data-toggle="buttons"] { }ਸ਼ੈਲੀ ਅਤੇ ਵਿਵਹਾਰ ਦੀ ਬਜਾਏ , ਅਸੀਂ dataਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਸਿਰਫ਼ JS ਵਿਹਾਰਾਂ ਲਈ ਕਰਦੇ ਹਾਂ ਅਤੇ .btn-group-toggleਸਟਾਈਲਿੰਗ ਲਈ ਇੱਕ ਨਵੀਂ ਕਲਾਸ 'ਤੇ ਭਰੋਸਾ ਕਰਦੇ ਹਾਂ।

  • .col-form-legendਇੱਕ ਥੋੜ੍ਹਾ ਸੁਧਾਰ ਦੇ ਹੱਕ ਵਿੱਚ ਹਟਾਇਆ .col-form-label. ਇਸ ਤਰੀਕੇ ਨਾਲ .col-form-label-smਅਤੇ ਆਸਾਨੀ ਨਾਲ ਤੱਤ .col-form-label-lg'ਤੇ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ .<legend>

  • ਕਸਟਮ ਫਾਈਲ ਇਨਪੁਟਸ ਨੇ ਉਹਨਾਂ ਦੇ $custom-file-textSass ਵੇਰੀਏਬਲ ਵਿੱਚ ਇੱਕ ਤਬਦੀਲੀ ਪ੍ਰਾਪਤ ਕੀਤੀ। ਇਹ ਹੁਣ ਇੱਕ ਨੇਸਟਡ ਸਾਸ ਮੈਪ ਨਹੀਂ ਹੈ ਅਤੇ ਹੁਣ ਸਿਰਫ ਇੱਕ ਸਤਰ ਨੂੰ ਪਾਵਰ Browseਦਿੰਦਾ ਹੈ — ਉਹ ਬਟਨ ਕਿਉਂਕਿ ਹੁਣ ਸਾਡੇ ਸਾਸ ਤੋਂ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਇੱਕੋ ਇੱਕ ਸੂਡੋ-ਤੱਤ ਹੈ। Choose fileਟੈਕਸਟ ਹੁਣ ਤੋਂ ਆਉਂਦਾ ਹੈ .custom-file-label।

ਇਨਪੁਟ ਸਮੂਹ

  • ਇਨਪੁਟ ਗਰੁੱਪ ਐਡਆਨ ਹੁਣ ਇੱਕ ਇਨਪੁਟ ਦੇ ਸਬੰਧ ਵਿੱਚ ਉਹਨਾਂ ਦੀ ਪਲੇਸਮੈਂਟ ਲਈ ਖਾਸ ਹਨ। ਅਸੀਂ ਛੱਡ ਦਿੱਤਾ ਹੈ .input-group-addonਅਤੇ .input-group-btnਦੋ ਨਵੀਆਂ ਕਲਾਸਾਂ ਲਈ, .input-group-prependਅਤੇ .input-group-append. ਸਾਡੇ ਬਹੁਤ ਸਾਰੇ CSS ਨੂੰ ਸਰਲ ਬਣਾਉਣ ਲਈ, ਤੁਹਾਨੂੰ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਹੁਣੇ ਇੱਕ ਐਪੈਂਡ ਜਾਂ ਪ੍ਰੀਪੇਂਡ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ। ਇੱਕ ਜੋੜ ਜਾਂ ਪ੍ਰਿਪੇਂਡ ਦੇ ਅੰਦਰ, ਆਪਣੇ ਬਟਨਾਂ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਰੱਖੋ ਜਿਵੇਂ ਕਿ ਉਹ ਕਿਤੇ ਵੀ ਮੌਜੂਦ ਹੋਣਗੇ, ਪਰ ਟੈਕਸਟ ਨੂੰ ਵਿੱਚ ਲਪੇਟੋ .input-group-text।

  • ਪ੍ਰਮਾਣਿਕਤਾ ਸ਼ੈਲੀਆਂ ਹੁਣ ਸਮਰਥਿਤ ਹਨ, ਜਿਵੇਂ ਕਿ ਮਲਟੀਪਲ ਇਨਪੁਟਸ ਹਨ (ਹਾਲਾਂਕਿ ਤੁਸੀਂ ਪ੍ਰਤੀ ਸਮੂਹ ਸਿਰਫ ਇੱਕ ਇਨਪੁਟ ਨੂੰ ਪ੍ਰਮਾਣਿਤ ਕਰ ਸਕਦੇ ਹੋ)।

  • ਸਾਈਜ਼ਿੰਗ ਕਲਾਸਾਂ ਮਾਤਾ-ਪਿਤਾ 'ਤੇ ਹੋਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ .input-groupਨਾ ਕਿ ਵਿਅਕਤੀਗਤ ਰੂਪ ਦੇ ਤੱਤਾਂ 'ਤੇ।

ਬੀਟਾ 2 ਬਦਲਦਾ ਹੈ

ਬੀਟਾ ਵਿੱਚ ਹੋਣ ਦੇ ਦੌਰਾਨ, ਸਾਡਾ ਟੀਚਾ ਹੈ ਕਿ ਕੋਈ ਤੋੜ-ਵਿਛੋੜਾ ਨਾ ਹੋਵੇ। ਹਾਲਾਂਕਿ, ਚੀਜ਼ਾਂ ਹਮੇਸ਼ਾਂ ਯੋਜਨਾ ਅਨੁਸਾਰ ਨਹੀਂ ਹੁੰਦੀਆਂ ਹਨ। ਬੀਟਾ 1 ਤੋਂ ਬੀਟਾ 2 ਵਿੱਚ ਜਾਣ ਵੇਲੇ ਧਿਆਨ ਵਿੱਚ ਰੱਖਣ ਲਈ ਹੇਠਾਂ ਤੋੜਨ ਵਾਲੀਆਂ ਤਬਦੀਲੀਆਂ ਹਨ।

ਤੋੜਨਾ

  • $badge-color'ਤੇ ਵੇਰੀਏਬਲ ਅਤੇ ਇਸਦੀ ਵਰਤੋਂ ਨੂੰ ਹਟਾਇਆ ਗਿਆ .badge। colorਅਸੀਂ 'ਤੇ ਅਧਾਰਤ ਇੱਕ ਨੂੰ ਚੁਣਨ ਲਈ ਇੱਕ ਰੰਗ ਕੰਟਰਾਸਟ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ background-color, ਇਸਲਈ ਵੇਰੀਏਬਲ ਬੇਲੋੜਾ ਹੈ।
  • CSS ਮੂਲ ਫਿਲਟਰ ਨਾਲ ਵਿਵਾਦ ਨੂੰ ਤੋੜਨ ਤੋਂ ਬਚਣ ਲਈ grayscale()ਫੰਕਸ਼ਨ ਦਾ ਨਾਮ ਬਦਲਿਆ ਗਿਆ ।gray()grayscale
  • ਕਿਤੇ ਹੋਰ ਵਰਤੀਆਂ ਜਾਣ ਵਾਲੀਆਂ ਸਾਡੀਆਂ ਰੰਗ ਸਕੀਮਾਂ ਨਾਲ ਮੇਲ ਖਾਂਦਾ .table-inverse, , .thead-inverse, ਅਤੇ .thead-defaultto .*-darkਅਤੇ , ਨਾਮ ਬਦਲਿਆ ।.*-light
  • ਜਵਾਬਦੇਹ ਸਾਰਣੀਆਂ ਹੁਣ ਹਰੇਕ ਗਰਿੱਡ ਬ੍ਰੇਕਪੁਆਇੰਟ ਲਈ ਕਲਾਸਾਂ ਤਿਆਰ ਕਰਦੀਆਂ ਹਨ। ਇਹ ਬੀਟਾ 1 ਤੋਂ ਇਸ ਤਰ੍ਹਾਂ ਟੁੱਟਦਾ ਹੈ ਕਿ .table-responsiveਤੁਸੀਂ ਜੋ ਵਰਤ ਰਹੇ ਹੋ, ਉਹ ਇਸ ਤਰ੍ਹਾਂ ਹੈ .table-responsive-md। ਤੁਸੀਂ ਹੁਣ ਵਰਤੋਂ .table-responsiveਜਾਂ .table-responsive-{sm,md,lg,xl}ਲੋੜ ਅਨੁਸਾਰ ਕਰ ਸਕਦੇ ਹੋ।
  • ਪੈਕੇਜ ਮੈਨੇਜਰ ਦੇ ਤੌਰ 'ਤੇ ਡ੍ਰੌਪ ਕੀਤਾ ਬੋਵਰ ਸਮਰਥਨ ਵਿਕਲਪਾਂ (ਜਿਵੇਂ ਕਿ, ਯਾਰਨ ਜਾਂ npm) ਲਈ ਬਰਤਰਫ਼ ਕੀਤਾ ਗਿਆ ਹੈ। ਵੇਰਵਿਆਂ ਲਈ bower/bower#2298 ਦੇਖੋ।
  • ਬੂਟਸਟਰੈਪ ਨੂੰ ਅਜੇ ਵੀ jQuery 1.9.1 ਜਾਂ ਇਸ ਤੋਂ ਉੱਚੇ ਦੀ ਲੋੜ ਹੈ, ਪਰ ਤੁਹਾਨੂੰ ਵਰਜਨ 3.x ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸਲਾਹ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ ਕਿਉਂਕਿ v3.x ਦੇ ਸਮਰਥਿਤ ਬ੍ਰਾਊਜ਼ਰ ਉਹ ਹਨ ਜੋ ਬੂਟਸਟਰੈਪ ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ ਅਤੇ v3.x ਵਿੱਚ ਕੁਝ ਸੁਰੱਖਿਆ ਫਿਕਸ ਹਨ।
  • .form-control-labelਨਾ ਵਰਤੀ ਗਈ ਕਲਾਸ ਨੂੰ ਹਟਾ ਦਿੱਤਾ ਗਿਆ । ਜੇਕਰ ਤੁਸੀਂ ਇਸ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਹੈ, ਤਾਂ ਇਹ ਉਸ ਕਲਾਸ ਦਾ ਡੁਪਲੀਕੇਟ ਸੀ ਜਿਸ ਨੇ ਹਰੀਜੱਟਲ ਫਾਰਮ ਲੇਆਉਟ ਵਿੱਚ ਇਸਦੇ ਸਬੰਧਿਤ ਇਨਪੁਟ ਦੇ ਨਾਲ .col-form-labelਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕੀਤਾ ਸੀ।<label>
  • color-yiqਨੂੰ ਇੱਕ ਮਿਕਸਿਨ ਤੋਂ ਬਦਲਿਆ ਜਿਸ ਵਿੱਚ colorਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਇੱਕ ਫੰਕਸ਼ਨ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ ਹੈ ਜੋ ਇੱਕ ਮੁੱਲ ਵਾਪਸ ਕਰਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਇਸਨੂੰ ਕਿਸੇ ਵੀ CSS ਸੰਪੱਤੀ ਲਈ ਵਰਤ ਸਕਦੇ ਹੋ। ਉਦਾਹਰਨ ਲਈ, ਦੀ ਬਜਾਏ color-yiq(#000), ਤੁਸੀਂ ਲਿਖੋਗੇ color: color-yiq(#000);।

ਹਾਈਲਾਈਟਸ

  • pointer-eventsਮਾਡਲਾਂ 'ਤੇ ਨਵੀਂ ਵਰਤੋਂ ਦੀ ਸ਼ੁਰੂਆਤ ਕੀਤੀ। ਬਾਹਰੀ ਕਸਟਮ ਕਲਿੱਕ ਹੈਂਡਲਿੰਗ (ਕਿਸੇ ਵੀ ਕਲਿੱਕਾਂ ਲਈ ਸਿਰਫ਼ 'ਤੇ ਸੁਣਨਾ ਸੰਭਵ ਬਣਾਉਂਦਾ ਹੈ) .modal-dialogਦੇ ਨਾਲ ਇਵੈਂਟਾਂ ਵਿੱਚੋਂ ਲੰਘਦਾ ਹੈ , ਅਤੇ ਫਿਰ ਇਸਦੇ ਨਾਲ ਅਸਲ ਲਈ ਇਸਦਾ ਮੁਕਾਬਲਾ ਕਰਦਾ ਹੈ ।pointer-events: none.modal-backdrop.modal-contentpointer-events: auto

ਸੰਖੇਪ

ਇੱਥੇ ਵੱਡੀਆਂ ਟਿਕਟਾਂ ਦੀਆਂ ਆਈਟਮਾਂ ਹਨ ਜਿਨ੍ਹਾਂ ਬਾਰੇ ਤੁਸੀਂ v3 ਤੋਂ v4 ਤੱਕ ਜਾਣ ਵੇਲੇ ਸੁਚੇਤ ਰਹਿਣਾ ਚਾਹੋਗੇ।

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

  • IE8, IE9, ਅਤੇ iOS 6 ਸਮਰਥਨ ਛੱਡ ਦਿੱਤਾ ਗਿਆ। v4 ਹੁਣ ਸਿਰਫ਼ IE10+ ਅਤੇ iOS 7+ ਹੈ। ਉਹਨਾਂ ਸਾਈਟਾਂ ਲਈ ਜਿਨ੍ਹਾਂ ਨੂੰ ਇਹਨਾਂ ਵਿੱਚੋਂ ਕਿਸੇ ਇੱਕ ਦੀ ਲੋੜ ਹੈ, v3 ਦੀ ਵਰਤੋਂ ਕਰੋ.
  • Android v5.0 Lollipop ਦੇ ਬ੍ਰਾਊਜ਼ਰ ਅਤੇ WebView ਲਈ ਅਧਿਕਾਰਤ ਸਮਰਥਨ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ। Android ਬ੍ਰਾਊਜ਼ਰ ਅਤੇ WebView ਦੇ ਪੁਰਾਣੇ ਸੰਸਕਰਣ ਕੇਵਲ ਅਣਅਧਿਕਾਰਤ ਤੌਰ 'ਤੇ ਸਮਰਥਿਤ ਰਹਿੰਦੇ ਹਨ।

ਗਲੋਬਲ ਬਦਲਾਅ

  • Flexbox ਡਿਫੌਲਟ ਰੂਪ ਵਿੱਚ ਸਮਰੱਥ ਹੈ। ਆਮ ਤੌਰ 'ਤੇ ਇਸਦਾ ਮਤਲਬ ਹੈ ਫਲੋਟਸ ਤੋਂ ਦੂਰ ਜਾਣਾ ਅਤੇ ਸਾਡੇ ਕੰਪੋਨੈਂਟਸ ਵਿੱਚ ਹੋਰ ਵੀ ਬਹੁਤ ਕੁਝ।
  • ਸਾਡੀਆਂ ਸਰੋਤ CSS ਫਾਈਲਾਂ ਲਈ Less ਤੋਂ Sass ਵਿੱਚ ਬਦਲਿਆ ਗਿਆ ।
  • pxਸਾਡੀ ਪ੍ਰਾਇਮਰੀ CSS ਯੂਨਿਟ ਦੇ ਤੌਰ 'ਤੇ ਬਦਲਿਆ ਗਿਆ rem, ਹਾਲਾਂਕਿ ਪਿਕਸਲ ਅਜੇ ਵੀ ਮੀਡੀਆ ਸਵਾਲਾਂ ਅਤੇ ਗਰਿੱਡ ਵਿਵਹਾਰ ਲਈ ਵਰਤੇ ਜਾਂਦੇ ਹਨ ਕਿਉਂਕਿ ਡਿਵਾਈਸ ਵਿਊਪੋਰਟ ਕਿਸਮ ਦੇ ਆਕਾਰ ਦੁਆਰਾ ਪ੍ਰਭਾਵਿਤ ਨਹੀਂ ਹੁੰਦੇ ਹਨ।
  • ਗਲੋਬਲ ਫੌਂਟ-ਸਾਈਜ਼ ਤੋਂ ਤੱਕ ਵਧਾਇਆ 14pxਗਿਆ 16px।
  • ਪੰਜਵੇਂ ਵਿਕਲਪ ਨੂੰ ਜੋੜਨ ਲਈ ਗਰਿੱਡ ਪੱਧਰਾਂ ਨੂੰ ਸੁਧਾਰਿਆ ਗਿਆ (ਛੋਟੀਆਂ ਡਿਵਾਈਸਾਂ 'ਤੇ 576pxਅਤੇ ਹੇਠਾਂ) ਅਤੇ -xsਉਹਨਾਂ ਕਲਾਸਾਂ ਤੋਂ ਇਨਫਿਕਸ ਨੂੰ ਹਟਾ ਦਿੱਤਾ ਗਿਆ। ਉਦਾਹਰਨ: .col-6.col-sm-4.col-md-3.
  • ਵੱਖਰੇ ਵਿਕਲਪਿਕ ਥੀਮ ਨੂੰ SCSS ਵੇਰੀਏਬਲ (ਉਦਾਹਰਨ ਲਈ, $enable-gradients: true) ਦੁਆਰਾ ਸੰਰਚਨਾਯੋਗ ਵਿਕਲਪਾਂ ਨਾਲ ਬਦਲਿਆ ਗਿਆ ਹੈ।
  • Grunt ਦੀ ਬਜਾਏ npm ਸਕ੍ਰਿਪਟਾਂ ਦੀ ਇੱਕ ਲੜੀ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਸਿਸਟਮ ਨੂੰ ਓਵਰਹਾਲ ਕਰੋ। package.jsonਸਾਰੀਆਂ ਸਕ੍ਰਿਪਟਾਂ, ਜਾਂ ਸਥਾਨਕ ਵਿਕਾਸ ਲੋੜਾਂ ਲਈ ਸਾਡਾ ਪ੍ਰੋਜੈਕਟ ਰੀਡਮੀ ਦੇਖੋ ।
  • ਬੂਟਸਟਰੈਪ ਦੀ ਗੈਰ-ਜਵਾਬਦੇਹ ਵਰਤੋਂ ਹੁਣ ਸਮਰਥਿਤ ਨਹੀਂ ਹੈ।
  • ਵਧੇਰੇ ਵਿਆਪਕ ਸੈੱਟਅੱਪ ਦਸਤਾਵੇਜ਼ਾਂ ਅਤੇ ਅਨੁਕੂਲਿਤ ਬਿਲਡਾਂ ਦੇ ਪੱਖ ਵਿੱਚ ਔਨਲਾਈਨ ਕਸਟਮਾਈਜ਼ਰ ਨੂੰ ਛੱਡ ਦਿੱਤਾ ਗਿਆ।
  • ਆਮ CSS ਪ੍ਰਾਪਰਟੀ-ਵੈਲਯੂ ਜੋੜਿਆਂ ਅਤੇ ਹਾਸ਼ੀਏ/ਪੈਡਿੰਗ ਸਪੇਸਿੰਗ ਸ਼ਾਰਟਕੱਟਾਂ ਲਈ ਦਰਜਨਾਂ ਨਵੀਆਂ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਸ਼ਾਮਲ ਕੀਤੀਆਂ ਗਈਆਂ।

ਗਰਿੱਡ ਸਿਸਟਮ

  • flexbox ਵਿੱਚ ਲਿਜਾਇਆ ਗਿਆ।
    • ਗਰਿੱਡ ਮਿਕਸਿਨਸ ਅਤੇ ਪੂਰਵ ਪਰਿਭਾਸ਼ਿਤ ਕਲਾਸਾਂ ਵਿੱਚ ਫਲੈਕਸਬਾਕਸ ਲਈ ਸਮਰਥਨ ਜੋੜਿਆ ਗਿਆ।
    • flexbox ਦੇ ਹਿੱਸੇ ਵਜੋਂ, ਵਰਟੀਕਲ ਅਤੇ ਹਰੀਜੱਟਲ ਅਲਾਈਨਮੈਂਟ ਕਲਾਸਾਂ ਲਈ ਸਮਰਥਨ ਸ਼ਾਮਲ ਹੈ।
  • ਅੱਪਡੇਟ ਕੀਤੇ ਗਰਿੱਡ ਕਲਾਸ ਦੇ ਨਾਮ ਅਤੇ ਇੱਕ ਨਵਾਂ ਗਰਿੱਡ ਟੀਅਰ।
    • ਵਧੇਰੇ ਦਾਣੇਦਾਰ ਨਿਯੰਤਰਣ ਲਈ ਹੇਠਾਂ ਇੱਕ ਨਵਾਂ smਗਰਿੱਡ ਟੀਅਰ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ। 768pxਸਾਡੇ ਕੋਲ ਹੁਣ xs, sm, md, lg, ਅਤੇ xl. ਇਸ ਦਾ ਇਹ ਵੀ ਮਤਲਬ ਹੈ ਕਿ ਹਰ ਟੀਅਰ ਨੂੰ ਇੱਕ ਪੱਧਰ ਉੱਤੇ ਉਛਾਲਿਆ ਗਿਆ ਹੈ (ਇਸ ਲਈ .col-md-6v3 ਵਿੱਚ ਹੁਣ .col-lg-6v4 ਵਿੱਚ ਹੈ)।
    • xsਗਰਿੱਡ ਕਲਾਸਾਂ ਨੂੰ ਸੰਸ਼ੋਧਿਤ ਕੀਤਾ ਗਿਆ ਹੈ ਤਾਂ ਜੋ ਵਧੇਰੇ ਸਹੀ ਢੰਗ ਨਾਲ ਦਰਸਾਉਣ ਲਈ ਇਨਫਿਕਸ ਦੀ ਲੋੜ ਨਾ ਪਵੇ ਕਿ ਉਹ min-width: 0ਇੱਕ ਸੈੱਟ ਪਿਕਸਲ ਮੁੱਲ 'ਤੇ ਸਟਾਈਲ ਲਾਗੂ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰਦੇ ਹਨ। ਦੀ ਬਜਾਏ .col-xs-6, ਇਹ ਹੁਣ ਹੈ .col-6। ਹੋਰ ਸਾਰੇ ਗਰਿੱਡ ਪੱਧਰਾਂ ਨੂੰ ਇਨਫਿਕਸ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ (ਉਦਾਹਰਨ ਲਈ, sm)
  • ਅੱਪਡੇਟ ਕੀਤੇ ਗਰਿੱਡ ਆਕਾਰ, ਮਿਕਸਿਨ, ਅਤੇ ਵੇਰੀਏਬਲ।
    • ਗਰਿੱਡ ਗਟਰਾਂ ਕੋਲ ਹੁਣ ਇੱਕ Sass ਨਕਸ਼ਾ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਹਰੇਕ ਬ੍ਰੇਕਪੁਆਇੰਟ 'ਤੇ ਖਾਸ ਗਟਰ ਚੌੜਾਈ ਨੂੰ ਨਿਸ਼ਚਿਤ ਕਰ ਸਕੋ।
    • make-col-readyਇੱਕ ਪ੍ਰੈਪ ਮਿਕਸਿਨ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਗਰਿੱਡ ਮਿਕਸਿਨ ਅਤੇ ਇੱਕ make-colਨੂੰ ਸੈੱਟ ਕਰਨ ਲਈ flexਅਤੇ max-widthਵਿਅਕਤੀਗਤ ਕਾਲਮ ਆਕਾਰ ਲਈ ਅੱਪਡੇਟ ਕੀਤਾ ਗਿਆ।
    • ਨਵੇਂ ਗਰਿੱਡ ਟੀਅਰ ਦੇ ਹਿਸਾਬ ਨਾਲ ਗਰਿੱਡ ਸਿਸਟਮ ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ ਬ੍ਰੇਕਪੁਆਇੰਟ ਅਤੇ ਕੰਟੇਨਰ ਦੀ ਚੌੜਾਈ ਨੂੰ ਬਦਲਿਆ ਗਿਆ ਹੈ ਅਤੇ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਕਾਲਮ 12ਉਹਨਾਂ ਦੀ ਅਧਿਕਤਮ ਚੌੜਾਈ 'ਤੇ ਬਰਾਬਰ ਵੰਡੇ ਜਾ ਸਕਦੇ ਹਨ।
    • ਗਰਿੱਡ ਬਰੇਕਪੁਆਇੰਟਸ ਅਤੇ ਕੰਟੇਨਰ ਚੌੜਾਈ ਨੂੰ ਹੁਣ ਮੁੱਠੀ ਭਰ ਵੱਖਰੇ ਵੇਰੀਏਬਲਾਂ ਦੀ ਬਜਾਏ Sass ਨਕਸ਼ੇ ( $grid-breakpointsਅਤੇ ) ਦੁਆਰਾ ਹੈਂਡਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। $container-max-widthsਇਹ @screen-*ਵੇਰੀਏਬਲਾਂ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬਦਲ ਦਿੰਦੇ ਹਨ ਅਤੇ ਤੁਹਾਨੂੰ ਗਰਿੱਡ ਟੀਅਰਾਂ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਅਨੁਕੂਲਿਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹਨ।
    • ਮੀਡੀਆ ਦੇ ਸਵਾਲ ਵੀ ਬਦਲ ਗਏ ਹਨ। ਸਾਡੇ ਮੀਡੀਆ ਸਵਾਲ ਘੋਸ਼ਣਾਵਾਂ ਨੂੰ ਹਰ ਵਾਰ ਇੱਕੋ ਜਿਹੇ ਮੁੱਲ ਨਾਲ ਦੁਹਰਾਉਣ ਦੀ ਬਜਾਏ, ਸਾਡੇ ਕੋਲ ਹੁਣ ਹੈ @include media-breakpoint-up/down/only. ਹੁਣ, ਲਿਖਣ ਦੀ ਬਜਾਏ @media (min-width: @screen-sm-min) { ... }, ਤੁਸੀਂ ਲਿਖ ਸਕਦੇ ਹੋ @include media-breakpoint-up(sm) { ... }.

ਕੰਪੋਨੈਂਟਸ

  • ਇੱਕ ਨਵੇਂ ਆਲ-ਇਨਪੇਸਿੰਗ ਕੰਪੋਨੈਂਟ, ਕਾਰਡਾਂ ਲਈ ਪੈਨਲ, ਥੰਬਨੇਲ ਅਤੇ ਖੂਹ ਸੁੱਟੇ ਗਏ ।
  • Glyphicons ਆਈਕਨ ਫੌਂਟ ਛੱਡਿਆ ਗਿਆ। ਜੇਕਰ ਤੁਹਾਨੂੰ ਆਈਕਾਨਾਂ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਕੁਝ ਵਿਕਲਪ ਹਨ:
  • Affix jQuery ਪਲੱਗਇਨ ਨੂੰ ਛੱਡ ਦਿੱਤਾ।
    • position: stickyਅਸੀਂ ਇਸਦੀ ਬਜਾਏ ਵਰਤਣ ਦੀ ਸਿਫਾਰਸ਼ ਕਰਦੇ ਹਾਂ । ਵੇਰਵਿਆਂ ਅਤੇ ਖਾਸ ਪੌਲੀਫਿਲ ਸਿਫ਼ਾਰਸ਼ਾਂ ਲਈ HTML5 ਕਿਰਪਾ ਕਰਕੇ ਐਂਟਰੀ ਦੇਖੋ । ਇੱਕ ਸੁਝਾਅ ਇਸ ਨੂੰ @supportsਲਾਗੂ ਕਰਨ ਲਈ ਇੱਕ ਨਿਯਮ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਹੈ (ਉਦਾਹਰਨ ਲਈ, @supports (position: sticky) { ... })/
    • ਜੇਕਰ ਤੁਸੀਂ ਵਾਧੂ, ਗੈਰ- positionਸਟਾਈਲ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ Affix ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਸੀ, ਤਾਂ ਹੋ ਸਕਦਾ ਹੈ ਕਿ ਪੌਲੀਫਿਲ ਤੁਹਾਡੇ ਵਰਤੋਂ ਦੇ ਕੇਸ ਦਾ ਸਮਰਥਨ ਨਾ ਕਰੇ। ਅਜਿਹੇ ਉਪਯੋਗਾਂ ਲਈ ਇੱਕ ਵਿਕਲਪ ਤੀਜੀ-ਧਿਰ ScrollPos-Styler ਲਾਇਬ੍ਰੇਰੀ ਹੈ।
  • ਪੇਜਰ ਕੰਪੋਨੈਂਟ ਨੂੰ ਛੱਡ ਦਿੱਤਾ ਕਿਉਂਕਿ ਇਹ ਜ਼ਰੂਰੀ ਤੌਰ 'ਤੇ ਥੋੜ੍ਹਾ ਅਨੁਕੂਲਿਤ ਬਟਨ ਸੀ।
  • ਓਵਰ-ਸਪੈਸਿਫਿਕ ਚਿਲਡਰਨ ਸਿਲੈਕਟਰਾਂ ਦੀ ਬਜਾਏ ਜ਼ਿਆਦਾ ਅਨ-ਨੇਸਟਡ ਕਲਾਸ ਚੋਣਕਾਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਲਗਭਗ ਸਾਰੇ ਹਿੱਸਿਆਂ ਨੂੰ ਰੀਫੈਕਟਰ ਕੀਤਾ ਗਿਆ।

ਕੰਪੋਨੈਂਟ ਦੁਆਰਾ

ਇਹ ਸੂਚੀ v3.xx ਅਤੇ v4.0.0 ਵਿਚਕਾਰ ਹਿੱਸੇ ਦੁਆਰਾ ਮੁੱਖ ਤਬਦੀਲੀਆਂ ਨੂੰ ਉਜਾਗਰ ਕਰਦੀ ਹੈ।

ਮੁੜ - ਚਾਲੂ

ਬੂਟਸਟਰੈਪ 4 ਲਈ ਨਵਾਂ ਰੀਬੂਟ ਹੈ , ਇੱਕ ਨਵੀਂ ਸਟਾਈਲਸ਼ੀਟ ਜੋ ਸਾਡੀਆਂ ਆਪਣੀਆਂ ਕੁਝ ਰਾਏਸ਼ੁਦਾ ਰੀਸੈਟ ਸ਼ੈਲੀਆਂ ਦੇ ਨਾਲ ਨਾਰਮਲਾਈਜ਼ 'ਤੇ ਬਣਾਉਂਦੀ ਹੈ। ਇਸ ਫ਼ਾਈਲ ਵਿੱਚ ਦਿਖਾਈ ਦੇਣ ਵਾਲੇ ਚੋਣਕਾਰ ਸਿਰਫ਼ ਤੱਤਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ—ਇੱਥੇ ਕੋਈ ਕਲਾਸਾਂ ਨਹੀਂ ਹਨ। ਇਹ ਵਧੇਰੇ ਮਾਡਯੂਲਰ ਪਹੁੰਚ ਲਈ ਸਾਡੀਆਂ ਰੀਸੈਟ ਸ਼ੈਲੀਆਂ ਨੂੰ ਸਾਡੀਆਂ ਕੰਪੋਨੈਂਟ ਸ਼ੈਲੀਆਂ ਤੋਂ ਅਲੱਗ ਕਰਦਾ ਹੈ। ਇਸ ਵਿੱਚ ਸ਼ਾਮਲ ਕੁਝ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਰੀਸੈੱਟਾਂ ਵਿੱਚ box-sizing: border-boxਬਦਲਾਅ, ਕਈ ਤੱਤਾਂ, ਲਿੰਕ ਸਟਾਈਲ, ਅਤੇ ਕਈ ਰੂਪ ਤੱਤ ਰੀਸੈੱਟਾਂ 'ਤੇ ਇਕਾਈਆਂ ਤੋਂ ਲੈ emਕੇ ਜਾਣਾ ਸ਼ਾਮਲ ਹੈ।rem

ਟਾਈਪੋਗ੍ਰਾਫੀ

  • ਸਾਰੀਆਂ .text-ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ _utilities.scssਫਾਈਲ ਵਿੱਚ ਤਬਦੀਲ ਕੀਤਾ ਗਿਆ।
  • ਇਸ ਦੀਆਂ ਸ਼ੈਲੀਆਂ .page-headerਨੂੰ ਉਪਯੋਗਤਾਵਾਂ ਰਾਹੀਂ ਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
  • .dl-horizontalਸੁੱਟ ਦਿੱਤਾ ਗਿਆ ਹੈ। ਇਸ ਦੀ ਬਜਾਏ, ਇਸ ਦੇ ਅਤੇ ਬੱਚਿਆਂ 'ਤੇ ਗਰਿੱਡ ਕਾਲਮ ਕਲਾਸਾਂ (ਜਾਂ ਮਿਕਸਿਨ) ਦੀ ਵਰਤੋਂ ਕਰੋ ਅਤੇ ਵਰਤੋਂ ਕਰੋ .row।<dl><dt><dd>
  • ਬਲਾਕਕੋਟ ਨੂੰ ਮੁੜ ਡਿਜ਼ਾਇਨ ਕੀਤਾ ਗਿਆ, ਉਹਨਾਂ ਦੀਆਂ ਸ਼ੈਲੀਆਂ ਨੂੰ <blockquote>ਤੱਤ ਤੋਂ ਇੱਕ ਸਿੰਗਲ ਕਲਾਸ ਵਿੱਚ ਲਿਜਾਣਾ, .blockquote. .blockquote-reverseਟੈਕਸਟ ਉਪਯੋਗਤਾਵਾਂ ਲਈ ਮੋਡੀਫਾਇਰ ਨੂੰ ਛੱਡ ਦਿੱਤਾ ਗਿਆ।
  • .list-inlineਹੁਣ ਲੋੜ ਹੈ ਕਿ ਇਸ ਦੇ ਬੱਚਿਆਂ ਦੀ ਸੂਚੀ ਵਾਲੀਆਂ ਆਈਟਮਾਂ ਨੂੰ ਨਵੀਂ .list-inline-itemਕਲਾਸ ਲਾਗੂ ਕੀਤੀ ਜਾਵੇ।

ਚਿੱਤਰ

  • ਦਾ ਨਾਮ ਬਦਲ ਕੇ ਰੱਖਿਆ .img-responsiveਗਿਆ .img-fluid।
  • ਦਾ ਨਾਮ ਬਦਲਿਆ .img-roundedਗਿਆ.rounded
  • ਦਾ ਨਾਮ ਬਦਲਿਆ .img-circleਗਿਆ.rounded-circle

ਟੇਬਲ

  • ਚੋਣਕਾਰ ਦੀਆਂ ਲਗਭਗ ਸਾਰੀਆਂ ਉਦਾਹਰਨਾਂ ਨੂੰ >ਹਟਾ ਦਿੱਤਾ ਗਿਆ ਹੈ, ਮਤਲਬ ਕਿ ਨੇਸਟਡ ਟੇਬਲ ਹੁਣ ਆਪਣੇ ਆਪ ਹੀ ਉਹਨਾਂ ਦੇ ਮਾਪਿਆਂ ਤੋਂ ਸ਼ੈਲੀ ਪ੍ਰਾਪਤ ਕਰਨਗੀਆਂ। ਇਹ ਸਾਡੇ ਚੋਣਕਾਰਾਂ ਅਤੇ ਸੰਭਾਵੀ ਅਨੁਕੂਲਤਾਵਾਂ ਨੂੰ ਬਹੁਤ ਸਰਲ ਬਣਾਉਂਦਾ ਹੈ।
  • ਇਕਸਾਰਤਾ ਲਈ ਨਾਮ ਬਦਲਿਆ .table-condensedਗਿਆ ।.table-sm
  • ਇੱਕ ਨਵਾਂ .table-inverseਵਿਕਲਪ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ।
  • ਟੇਬਲ ਹੈਡਰ ਮੋਡੀਫਾਇਰ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ: .thead-defaultਅਤੇ .thead-inverse.
  • ਪ੍ਰਸੰਗਿਕ ਕਲਾਸਾਂ ਨੂੰ ਇੱਕ .table--ਅਗੇਤਰ ਰੱਖਣ ਲਈ ਨਾਮ ਦਿੱਤਾ ਗਿਆ। ਇਸ ਲਈ .active, .success, .warning, .dangerਅਤੇ .infoਤੋਂ .table-active, .table-success, .table-warning, .table-dangerਅਤੇ .table-info.

ਫਾਰਮ

  • ਤਬਦੀਲ ਐਲੀਮੈਂਟ ਨੂੰ _reboot.scssਫਾਈਲ 'ਤੇ ਰੀਸੈੱਟ ਕੀਤਾ ਗਿਆ।
  • ਦਾ ਨਾਮ ਬਦਲ ਕੇ ਰੱਖਿਆ .control-labelਗਿਆ .col-form-label।
  • ਕ੍ਰਮਵਾਰ ਨਾਮ ਬਦਲਿਆ .input-lgਅਤੇ ਇਸ .input-smਲਈ .form-control-lgਅਤੇ ।.form-control-sm
  • ਸਾਦਗੀ .form-group-*ਦੀ ਖ਼ਾਤਰ ਕਲਾਸਾਂ ਛੱਡ ਦਿੱਤੀਆਂ। .form-control-*ਇਸਦੀ ਬਜਾਏ ਹੁਣੇ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ।
  • ਇਸ ਨੂੰ ਬਲਾਕ-ਪੱਧਰ ਦੀ ਮਦਦ ਟੈਕਸਟ ਲਈ ਛੱਡਿਆ .help-blockਅਤੇ ਬਦਲਿਆ । .form-textਇਨਲਾਈਨ ਮਦਦ ਟੈਕਸਟ ਅਤੇ ਹੋਰ ਲਚਕਦਾਰ ਵਿਕਲਪਾਂ ਲਈ, ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ਜਿਵੇਂ ਕਿ .text-muted।
  • ਸੁੱਟਿਆ .radio-inlineਅਤੇ .checkbox-inline.
  • ਏਕੀਕ੍ਰਿਤ .checkboxਅਤੇ .radioਵੱਖ .form-check-ਵੱਖ .form-check-*ਵਰਗਾਂ ਵਿੱਚ।
  • ਹਰੀਜੱਟਲ ਫਾਰਮ ਓਵਰਹਾਲ ਕੀਤੇ ਗਏ:
    • ਕਲਾਸ ਦੀ .form-horizontalਲੋੜ ਨੂੰ ਛੱਡ ਦਿੱਤਾ.
    • .form-group.rowਹੁਣ via mixin ਤੋਂ ਸਟਾਈਲ ਲਾਗੂ ਨਹੀਂ ਕਰਦਾ , ਇਸਲਈ .rowਹੁਣ ਹਰੀਜੱਟਲ ਗਰਿੱਡ ਲੇਆਉਟ (ਉਦਾਹਰਨ ਲਈ, <div class="form-group row">) ਲਈ ਲੋੜੀਂਦਾ ਹੈ।
    • .col-form-labels ਦੇ ਨਾਲ ਵਰਟੀਕਲ ਸੈਂਟਰ ਲੇਬਲਾਂ ਵਿੱਚ ਨਵੀਂ ਕਲਾਸ ਸ਼ਾਮਲ ਕੀਤੀ ਗਈ .form-control।
    • .form-rowਗਰਿੱਡ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਸੰਖੇਪ ਫਾਰਮ ਲੇਆਉਟ ਲਈ ਨਵਾਂ ਜੋੜਿਆ ਗਿਆ (ਆਪਣੇ .rowਲਈ ਸਵੈਪ ਕਰੋ .form-rowਅਤੇ ਜਾਓ)।
  • ਜੋੜਿਆ ਗਿਆ ਕਸਟਮ ਫਾਰਮ ਸਮਰਥਨ (ਚੈੱਕਬਾਕਸ, ਰੇਡੀਓ, ਚੋਣ ਅਤੇ ਫਾਈਲ ਇਨਪੁਟਸ ਲਈ)।
  • .has-error, .has-warning, ਅਤੇ ਕਲਾਸਾਂ ਨੂੰ CSS ਅਤੇ ਸੂਡੋ-ਕਲਾਸਾਂ .has-successਰਾਹੀਂ HTML5 ਫਾਰਮ ਪ੍ਰਮਾਣਿਕਤਾ ਨਾਲ ਬਦਲਿਆ ਗਿਆ।:invalid:valid
  • ਦਾ ਨਾਮ ਬਦਲ ਕੇ ਰੱਖਿਆ .form-control-staticਗਿਆ .form-control-plaintext।

ਬਟਨ

  • ਦਾ ਨਾਮ ਬਦਲ ਕੇ ਰੱਖਿਆ .btn-defaultਗਿਆ .btn-secondary।
  • ਕਲਾਸ .btn-xsਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਛੱਡ ਦਿੱਤਾ ਕਿਉਂਕਿ .btn-smਅਨੁਪਾਤਕ ਤੌਰ 'ਤੇ v3 ਦੇ ਮੁਕਾਬਲੇ ਬਹੁਤ ਛੋਟਾ ਹੈ।
  • jQuery ਪਲੱਗਇਨ ਦੀ ਸਟੇਟਫੁੱਲ ਬਟਨ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਛੱਡ ਦਿੱਤਾ ਗਿਆ ਹੈ। button.jsਇਸ ਵਿੱਚ $().button(string)ਅਤੇ $().button('reset')ਢੰਗ ਸ਼ਾਮਲ ਹਨ। ਅਸੀਂ ਇਸਦੀ ਬਜਾਏ ਥੋੜ੍ਹੇ ਜਿਹੇ ਕਸਟਮ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸਲਾਹ ਦਿੰਦੇ ਹਾਂ, ਜਿਸਦਾ ਲਾਭ ਉਸੇ ਤਰ੍ਹਾਂ ਦਾ ਵਿਵਹਾਰ ਕਰਨ ਦਾ ਹੋਵੇਗਾ ਜਿਵੇਂ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ।
    • ਨੋਟ ਕਰੋ ਕਿ ਪਲੱਗਇਨ ਦੀਆਂ ਹੋਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ (ਬਟਨ ਚੈੱਕਬਾਕਸ, ਬਟਨ ਰੇਡੀਓ, ਸਿੰਗਲ-ਟੌਗਲ ਬਟਨ) ਨੂੰ v4 ਵਿੱਚ ਬਰਕਰਾਰ ਰੱਖਿਆ ਗਿਆ ਹੈ।
  • ਬਟਨਾਂ [disabled]ਨੂੰ :disabledIE9+ ਦੇ ਸਮਰਥਨ ਵਜੋਂ ਬਦਲੋ :disabled। ਹਾਲਾਂਕਿ fieldset[disabled]ਅਜੇ ਵੀ ਜ਼ਰੂਰੀ ਹੈ ਕਿਉਂਕਿ ਮੂਲ ਅਯੋਗ ਫੀਲਡਸੈੱਟ ਅਜੇ ਵੀ IE11 ਵਿੱਚ ਬੱਗੀ ਹਨ ।

ਬਟਨ ਸਮੂਹ

  • flexbox ਨਾਲ ਕੰਪੋਨੈਂਟ ਨੂੰ ਮੁੜ-ਲਿਖਿਆ।
  • ਹਟਾਇਆ .btn-group-justifiedਗਿਆ। ਇੱਕ ਬਦਲ ਵਜੋਂ ਤੁਸੀਂ <div class="btn-group d-flex" role="group"></div>ਤੱਤ ਦੇ ਆਲੇ ਦੁਆਲੇ ਇੱਕ ਰੈਪਰ ਵਜੋਂ ਵਰਤ ਸਕਦੇ ਹੋ .w-100.
  • .btn-group-xsਨੂੰ ਹਟਾਉਣ ਦੇ ਨਾਲ ਕਲਾਸ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਛੱਡ ਦਿੱਤਾ .btn-xs।
  • ਬਟਨ ਟੂਲਬਾਰਾਂ ਵਿੱਚ ਬਟਨ ਸਮੂਹਾਂ ਵਿਚਕਾਰ ਸਪਸ਼ਟ ਸਪੇਸਿੰਗ ਹਟਾਈ ਗਈ; ਹੁਣ ਮਾਰਜਿਨ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
  • ਹੋਰ ਭਾਗਾਂ ਦੇ ਨਾਲ ਵਰਤਣ ਲਈ ਬਿਹਤਰ ਦਸਤਾਵੇਜ਼।
  • ਸਾਰੇ ਭਾਗਾਂ, ਸੰਸ਼ੋਧਕਾਂ, ਆਦਿ ਲਈ ਮੂਲ ਚੋਣਕਾਰਾਂ ਤੋਂ ਇਕਵਚਨ ਕਲਾਸਾਂ ਵਿੱਚ ਬਦਲਿਆ ਗਿਆ।
  • ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨਾਲ ਜੁੜੇ ਉੱਪਰ ਵੱਲ ਜਾਂ ਹੇਠਾਂ ਵੱਲ ਮੂੰਹ ਵਾਲੇ ਤੀਰਾਂ ਨਾਲ ਹੁਣ ਸ਼ਿਪਿੰਗ ਨਾ ਕਰਨ ਲਈ ਸਰਲ ਡ੍ਰੌਪਡਾਉਨ ਸਟਾਈਲ।
  • ਡ੍ਰੌਪਡਾਊਨ ਹੁਣ <div>s ਜਾਂ <ul>s ਨਾਲ ਬਣਾਏ ਜਾ ਸਕਦੇ ਹਨ।
  • ਡ੍ਰੌਪਡਾਉਨ ਸਟਾਈਲ ਅਤੇ ਮਾਰਕਅੱਪ ਨੂੰ ਮੁੜ-ਬਣਾਇਆ ਗਿਆ ਹੈ ਤਾਂ ਜੋ ਡ੍ਰੌਪਡਾਉਨ ਆਈਟਮਾਂ ਲਈ ਆਸਾਨ, ਬਿਲਟ-ਇਨ ਸਹਾਇਤਾ ਪ੍ਰਦਾਨ ਕੀਤੀ ਜਾ <a>ਸਕੇ <button>।
  • ਦਾ ਨਾਮ ਬਦਲ ਕੇ ਰੱਖਿਆ .dividerਗਿਆ .dropdown-divider।
  • ਡ੍ਰੌਪਡਾਉਨ ਆਈਟਮਾਂ ਦੀ ਹੁਣ ਲੋੜ ਹੈ .dropdown-item।
  • ਡ੍ਰੌਪਡਾਉਨ ਟੌਗਲਾਂ ਨੂੰ ਹੁਣ ਸਪੱਸ਼ਟ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ <span class="caret"></span>; ਇਹ ਹੁਣ CSS ਦੇ ::afteron ਦੁਆਰਾ ਆਪਣੇ ਆਪ ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ .dropdown-toggle।

ਗਰਿੱਡ ਸਿਸਟਮ

  • ਇੱਕ ਨਵਾਂ 576pxਗਰਿੱਡ ਬ੍ਰੇਕਪੁਆਇੰਟ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ ਹੈ sm, ਮਤਲਬ ਕਿ ਹੁਣ ਕੁੱਲ ਪੰਜ ਟੀਅਰ ( xs, sm, md, lg, ਅਤੇ xl) ਹਨ।
  • ਸਰਲ ਗਰਿੱਡ ਕਲਾਸਾਂ ਲਈ ਜਵਾਬਦੇਹ ਗਰਿੱਡ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਦਾ ��ਾਮ ਬਦਲਿਆ .col-{breakpoint}-{modifier}-{size}।.{modifier}-{breakpoint}-{size}
  • ਨਵੀਆਂ ਫਲੈਕਸਬਾਕਸ-ਸੰਚਾਲਿਤ orderਕਲਾਸਾਂ ਲਈ ਪੁਸ਼ ਅਤੇ ਪੁੱਲ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਛੱਡੀਆਂ ਗਈਆਂ। ਉਦਾਹਰਨ ਲਈ, ਅਤੇ ਦੀ ਬਜਾਏ .col-8.push-4, ਤੁਸੀਂ ਅਤੇ ਦੀ .col-4.pull-8ਵਰਤੋਂ ਕਰੋਗੇ ।.col-8.order-2.col-4.order-1
  • ਗਰਿੱਡ ਸਿਸਟਮ ਅਤੇ ਕੰਪੋਨੈਂਟਸ ਲਈ ਫਲੈਕਸਬਾਕਸ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਸ਼ਾਮਲ ਕੀਤੀਆਂ ਗਈਆਂ।

ਸਮੂਹਾਂ ਦੀ ਸੂਚੀ ਬਣਾਓ

  • flexbox ਨਾਲ ਕੰਪੋਨੈਂਟ ਨੂੰ ਮੁੜ-ਲਿਖਿਆ।
  • ਸੂਚੀ ਸਮੂਹ ਆਈਟਮਾਂ ਦੇ ਸਟਾਈਲਿੰਗ ਲਿੰਕ ਅਤੇ ਬਟਨ ਸੰਸਕਰਣਾਂ ਲਈ a.list-group-itemਇੱਕ ਸਪਸ਼ਟ ਕਲਾਸ, , ਨਾਲ ਬਦਲਿਆ ਗਿਆ।.list-group-item-action
  • .list-group-flushਕਾਰਡਾਂ ਨਾਲ ਵਰਤਣ ਲਈ ਕਲਾਸ ਸ਼ਾਮਲ ਕੀਤੀ ਗਈ ।
  • flexbox ਨਾਲ ਕੰਪੋਨੈਂਟ ਨੂੰ ਮੁੜ-ਲਿਖਿਆ।
  • ਫਲੈਕਸਬਾਕਸ ਵਿੱਚ ਜਾਣ 'ਤੇ, ਸਿਰਲੇਖ ਵਿੱਚ ਖਾਰਜ ਆਈਕਨਾਂ ਦੀ ਅਲਾਈਨਮੈਂਟ ਸੰਭਾਵਤ ਤੌਰ 'ਤੇ ਟੁੱਟ ਗਈ ਹੈ ਕਿਉਂਕਿ ਅਸੀਂ ਹੁਣ ਫਲੋਟਸ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕਰ ਰਹੇ ਹਾਂ। ਫਲੋਟਿਡ ਸਮੱਗਰੀ ਪਹਿਲਾਂ ਆਉਂਦੀ ਹੈ, ਪਰ flexbox ਦੇ ਨਾਲ ਹੁਣ ਅਜਿਹਾ ਨਹੀਂ ਹੈ। ਠੀਕ ਕਰਨ ਲਈ ਮਾਡਲ ਸਿਰਲੇਖਾਂ ਤੋਂ ਬਾਅਦ ਆਉਣ ਲਈ ਆਪਣੇ ਖਾਰਜ ਪ੍ਰਤੀਕਾਂ ਨੂੰ ਅੱਪਡੇਟ ਕਰੋ।
  • remoteਵਿਕਲਪ (ਜਿਸਦੀ ਵਰਤੋਂ ਬਾਹਰੀ ਸਮੱਗਰੀ ਨੂੰ ਇੱਕ ਮਾਡਲ ਵਿੱਚ ਆਪਣੇ ਆਪ ਲੋਡ ਕਰਨ ਅਤੇ ਇੰਜੈਕਟ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ) ਅਤੇ ਸੰਬੰਧਿਤ ਘਟਨਾ loaded.bs.modalਨੂੰ ਹਟਾ ਦਿੱਤਾ ਗਿਆ ਸੀ। ਅਸੀਂ ਇਸ ਦੀ ਬਜਾਏ ਕਲਾਇੰਟ-ਸਾਈਡ ਟੈਂਪਲੇਟਿੰਗ ਜਾਂ ਡੇਟਾ ਬਾਈਡਿੰਗ ਫਰੇਮਵਰਕ ਦੀ ਵਰਤੋਂ ਕਰਨ, ਜਾਂ ਆਪਣੇ ਆਪ ਨੂੰ jQuery.load ਕਾਲ ਕਰਨ ਦੀ ਸਿਫਾਰਸ਼ ਕਰਦੇ ਹਾਂ।
  • flexbox ਨਾਲ ਕੰਪੋਨੈਂਟ ਨੂੰ ਮੁੜ-ਲਿਖਿਆ।
  • >ਅਣ-ਨੇਸਟਡ ਕਲਾਸਾਂ ਰਾਹੀਂ ਸਰਲ ਸਟਾਈਲਿੰਗ ਲਈ ਲਗਭਗ ਸਾਰੇ ਚੋਣਕਾਰਾਂ ਨੂੰ ਛੱਡ ਦਿੱਤਾ।
  • HTML-ਵਿਸ਼ੇਸ਼ ਚੋਣਕਾਰਾਂ ਦੀ ਬਜਾਏ , ਅਸੀਂ s, s, ਅਤੇ s .nav > li > aਲਈ ਵੱਖਰੀਆਂ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ । ਇਹ ਤੁਹਾਡੇ HTML ਨੂੰ ਵਧੇਰੇ ਲਚਕਦਾਰ ਬਣਾਉਂਦਾ ਹੈ ਜਦੋਂ ਕਿ ਵਧੀ ਹੋਈ ਵਿਸਤਾਰਯੋਗਤਾ ਨੂੰ ਨਾਲ ਲਿਆਉਂਦਾ ਹੈ।.nav.nav-item.nav-link

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

  • ਜਵਾਬਦੇਹ ਨਵਬਾਰ ਵਿਵਹਾਰ ਹੁਣ .navbarਕਲਾਸ 'ਤੇ ਲੋੜੀਂਦੇ .navbar-expand-{breakpoint} ਦੁਆਰਾ ਲਾਗੂ ਕੀਤੇ ਜਾਂਦੇ ਹਨ ਜਿੱਥੇ ਤੁਸੀਂ ਚੁਣਦੇ ਹੋ ਕਿ ਕਿੱਥੇ ਨੇਵਬਾਰ ਨੂੰ ਸਮੇਟਣਾ ਹੈ। ਪਹਿਲਾਂ ਇਹ ਇੱਕ ਘੱਟ ਵੇਰੀਏਬਲ ਸੋਧ ਸੀ ਅਤੇ ਮੁੜ ਕੰਪਾਈਲਿੰਗ ਦੀ ਲੋੜ ਸੀ।
  • .navbar-defaultਹੁਣ ਹੈ .navbar-light, ਹਾਲਾਂਕਿ .navbar-darkਉਹੀ ਰਹਿੰਦਾ ਹੈ। ਹਰੇਕ ਨਵਬਾਰ 'ਤੇ ਇਹਨਾਂ ਵਿੱਚੋਂ ਇੱਕ ਦੀ ਲੋੜ ਹੈ। ਹਾਲਾਂਕਿ, ਇਹ ਕਲਾਸਾਂ ਹੁਣ ਸੈਟ ਨਹੀਂ ਕਰਦੀਆਂ background-color; ਇਸ ਦੀ ਬਜਾਏ ਉਹ ਜ਼ਰੂਰੀ ਤੌਰ 'ਤੇ ਸਿਰਫ ਪ੍ਰਭਾਵਿਤ ਕਰਦੇ ਹਨ color.
  • ਨਵਬਾਰ ਨੂੰ ਹੁਣ ਕਿਸੇ ਕਿਸਮ ਦੀ ਪਿਛੋਕੜ ਘੋਸ਼ਣਾ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਸਾਡੀਆਂ ਬੈਕਗ੍ਰਾਊਂਡ ਯੂਟਿਲਿਟੀਜ਼ ( ) ਵਿੱਚੋਂ ਚੁਣੋ ਜਾਂ ਮੈਡ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਲਈ.bg-* ਉੱਪਰ ਦਿੱਤੀਆਂ ਲਾਈਟ/ਇਨਵਰਸ ਕਲਾਸਾਂ ਨਾਲ ਆਪਣੀ ਖੁਦ ਦੀ ਸੈੱਟ ਕਰੋ ।
  • flexbox ਸਟਾਈਲ ਦਿੱਤੇ ਗਏ, navbars ਹੁਣ ਆਸਾਨ ਅਲਾਈਨਮੈਂਟ ਵਿਕਲਪਾਂ ਲਈ flexbox ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਨ।
  • .navbar-toggleਹੁਣ ਹੈ .navbar-togglerਅਤੇ ਇਸ ਦੀਆਂ ਵੱਖੋ ਵੱਖਰੀਆਂ ਸ਼ੈਲੀਆਂ ਅਤੇ ਅੰਦਰੂਨੀ ਮਾਰਕਅੱਪ ਹਨ (ਤਿੰਨ ਤੋਂ ਵੱਧ ਨਹੀਂ <span>)।
  • ਕਲਾਸ .navbar-formਪੂਰੀ ਤਰ੍ਹਾਂ ਛੱਡ ਦਿੱਤੀ। ਇਹ ਹੁਣ ਜ਼ਰੂਰੀ ਨਹੀਂ ਹੈ; ਇਸਦੀ ਬਜਾਏ, .form-inlineਲੋੜ ਅਨੁਸਾਰ ਮਾਰਜਿਨ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ਅਤੇ ਲਾਗੂ ਕਰੋ।
  • ਨਵਬਾਰ ਹੁਣ ਸ਼ਾਮਲ ਨਹੀਂ ਹਨ margin-bottomਜਾਂ border-radiusਮੂਲ ਰੂਪ ਵਿੱਚ ਨਹੀਂ ਹਨ। ਲੋੜ ਅਨੁਸਾਰ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
  • ਨਵਬਾਰ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲੀਆਂ ਸਾਰੀਆਂ ਉਦਾਹਰਣਾਂ ਨੂੰ ਨਵਾਂ ਮਾਰਕਅੱਪ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਅੱਪਡੇਟ ਕੀਤਾ ਗਿਆ ਹੈ।

ਪੰਨਾ ਨੰਬਰ

  • flexbox ਨਾਲ ਕੰਪੋਨੈਂਟ ਨੂੰ ਮੁੜ-ਲਿਖਿਆ।
  • ਸਪੱਸ਼ਟ ਸ਼੍ਰੇਣੀਆਂ ( .page-item, ) ਹੁਣ s .page-linkਦੇ ਉੱਤਰਾਧਿਕਾਰੀਆਂ 'ਤੇ ਲੋੜੀਂਦੀਆਂ ਹਨ.pagination
  • ਕੰਪੋਨੈਂਟ .pagerਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਛੱਡ ਦਿੱਤਾ ਕਿਉਂਕਿ ਇਹ ਕਸਟਮਾਈਜ਼ਡ ਆਊਟਲਾਈਨ ਬਟਨਾਂ ਤੋਂ ਥੋੜ੍ਹਾ ਜ਼ਿਆਦਾ ਸੀ।
  • ਇੱਕ ਸਪਸ਼ਟ ਸ਼੍ਰੇਣੀ, , ਹੁਣ s .breadcrumb-itemਦੇ ਉੱਤਰਾਧਿਕਾਰੀਆਂ 'ਤੇ ਲੋੜੀਂਦਾ ਹੈ.breadcrumb

ਲੇਬਲ ਅਤੇ ਬੈਜ

  • ਏਕੀਕ੍ਰਿਤ .labelਅਤੇ ਤੱਤ .badgeਤੋਂ ਅਸਪਸ਼ਟ ਅਤੇ ਸੰਬੰਧਿਤ ਭਾਗਾਂ ਨੂੰ ਸਰਲ ਬਣਾਉਣ ਲਈ।<label>
  • .badge-pillਗੋਲ "ਗੋਲੀ" ਦਿੱਖ ਲਈ ਸੋਧਕ ਵਜੋਂ ਜੋੜਿਆ ਗਿਆ।
  • ਬੈਜ ਹੁਣ ਸੂਚੀ ਸਮੂਹਾਂ ਅਤੇ ਹੋਰ ਹਿੱਸਿਆਂ ਵਿੱਚ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਫਲੋਟ ਨਹੀਂ ਹੁੰਦੇ ਹਨ। ਇਸਦੇ ਲਈ ਹੁਣ ਯੂਟਿਲਿਟੀ ਕਲਾਸਾਂ ਦੀ ਲੋੜ ਹੈ।
  • .badge-defaultਨੂੰ ਛੱਡ ਦਿੱਤਾ ਗਿਆ ਹੈ ਅਤੇ .badge-secondaryਹੋਰ ਕਿਤੇ ਵਰਤੀਆਂ ਜਾਂਦੀਆਂ ਕੰਪੋਨੈਂਟ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ।

ਪੈਨਲ, ਥੰਬਨੇਲ, ਅਤੇ ਖੂਹ

ਨਵੇਂ ਕਾਰਡ ਕੰਪੋਨੈਂਟ ਲਈ ਪੂਰੀ ਤਰ੍ਹਾਂ ਛੱਡਿਆ ਗਿਆ।

ਪੈਨਲ

  • .panelਲਈ .card, ਹੁਣ flexbox ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ।
  • .panel-defaultਹਟਾਇਆ ਗਿਆ ਅਤੇ ਕੋਈ ਬਦਲ ਨਹੀਂ।
  • .panel-groupਹਟਾਇਆ ਗਿਆ ਅਤੇ ਕੋਈ ਬਦਲ ਨਹੀਂ। .card-groupਕੋਈ ਬਦਲ ਨਹੀਂ ਹੈ, ਇਹ ਵੱਖਰਾ ਹੈ।
  • .panel-headingਨੂੰ.card-header
  • .panel-titleਨੂੰ .card-title. ਲੋੜੀਦੀ ਦਿੱਖ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹੋਏ, ਤੁਸੀਂ ਸਿਰਲੇਖ ਤੱਤ ਜਾਂ ਕਲਾਸਾਂ (ਉਦਾਹਰਨ ਲਈ <h3>, .h3) ਜਾਂ ਬੋਲਡ ਐਲੀਮੈਂਟਸ ਜਾਂ ਕਲਾਸਾਂ (ਉਦਾਹਰਨ ਲਈ <strong>, <b>, .font-weight-bold) ਦੀ ਵਰਤੋਂ ਵੀ ਕਰ ਸਕਦੇ ਹੋ। ਨੋਟ ਕਰੋ ਕਿ .card-title, ਜਦੋਂ ਕਿ ਇਸੇ ਤਰ੍ਹਾਂ ਨਾਮ ਦਿੱਤਾ ਗਿਆ ਹੈ, ਤਾਂ ਇਸ ਤੋਂ ਵੱਖਰੀ ਦਿੱਖ ਪੈਦਾ ਕਰਦਾ ਹੈ .panel-title।
  • .panel-bodyਨੂੰ.card-body
  • .panel-footerਨੂੰ.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, ਅਤੇ ਸਾਡੇ ਸਾਸ ਮੈਪ ਤੋਂ ਤਿਆਰ , , ਅਤੇ ਉਪਯੋਗਤਾਵਾਂ .panel-dangerਲਈ ਛੱਡ ਦਿੱਤਾ ਗਿਆ ਹੈ ।.bg-.text-.border$theme-colors

ਤਰੱਕੀ

  • ਪ੍ਰਸੰਗਿਕ .progress-bar-*ਕਲਾਸਾਂ ਨੂੰ .bg-*ਉਪਯੋਗਤਾਵਾਂ ਨਾਲ ਬਦਲਿਆ ਗਿਆ। ਉਦਾਹਰਨ ਲਈ, class="progress-bar progress-bar-danger"ਬਣ ਜਾਂਦਾ ਹੈ class="progress-bar bg-danger".
  • .activeਨਾਲ ਐਨੀਮੇਟਿਡ ਤਰੱਕੀ ਬਾਰਾਂ ਲਈ ਬਦਲਿਆ ਗਿਆ .progress-bar-animated।
  • ਡਿਜ਼ਾਈਨ ਅਤੇ ਸਟਾਈਲਿੰਗ ਨੂੰ ਸਰਲ ਬਣਾਉਣ ਲਈ ਪੂਰੇ ਕੰਪੋਨੈਂਟ ਨੂੰ ਓਵਰਹਾਲ ਕੀਤਾ ਗਿਆ। ਸਾਡੇ ਕੋਲ ਤੁਹਾਡੇ ਲਈ ਓਵਰਰਾਈਡ ਕਰਨ ਲਈ ਘੱਟ ਸਟਾਈਲ ਹਨ, ਨਵੇਂ ਸੰਕੇਤਕ, ਅਤੇ ਨਵੇਂ ਆਈਕਨ।
  • ਸਾਰੇ CSS ਨੂੰ ਅਣ-ਨੇਸਟ ਕੀਤਾ ਗਿਆ ਹੈ ਅਤੇ ਨਾਮ ਬਦਲ ਦਿੱਤਾ ਗਿਆ ਹੈ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਹਰੇਕ ਕਲਾਸ ਦੇ ਨਾਲ ਪ੍ਰੀਫਿਕਸ ਕੀਤਾ ਗਿਆ ਹੈ .carousel-।
    • ਕੈਰੋਜ਼ਲ ਆਈਟਮਾਂ ਲਈ, .next, .prev, .left, ਅਤੇ .rightਹੁਣ ਹਨ .carousel-item-next, .carousel-item-prev, .carousel-item-left, ਅਤੇ .carousel-item-right.
    • .itemਹੁਣ ਵੀ ਹੈ .carousel-item.
    • ਪਿਛਲੇ/ਅਗਲੇ ਨਿਯੰਤਰਣ ਲਈ, .carousel-control.rightਅਤੇ .carousel-control.leftਹੁਣ ਹਨ .carousel-control-nextਅਤੇ .carousel-control-prev, ਮਤਲਬ ਕਿ ਉਹਨਾਂ ਨੂੰ ਹੁਣ ਕਿਸੇ ਖਾਸ ਬੇਸ ਕਲਾਸ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ।
  • ਸਾਰੀਆਂ ਜਵਾਬਦੇਹ ਸਟਾਈਲਿੰਗ ਨੂੰ ਹਟਾ ਦਿੱਤਾ ਗਿਆ, ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਮੁਲਤਵੀ ਕੀਤਾ ਗਿਆ (ਜਿਵੇਂ, ਕੁਝ ਵਿਊਪੋਰਟਾਂ 'ਤੇ ਸੁਰਖੀਆਂ ਦਿਖਾਉਣਾ) ਅਤੇ ਲੋੜ ਅਨੁਸਾਰ ਕਸਟਮ ਸਟਾਈਲ।
  • ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਮੁਲਤਵੀ ਕਰਦੇ ਹੋਏ, ਕੈਰੋਜ਼ਲ ਆਈਟਮਾਂ ਵਿੱਚ ਚਿੱਤਰਾਂ ਲਈ ਹਟਾਇਆ ਗਿਆ ਚਿੱਤਰ ਓਵਰਰਾਈਡ।
  • ਨਵੇਂ ਮਾਰਕਅੱਪ ਅਤੇ ਸਟਾਈਲ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਕੈਰੋਜ਼ਲ ਉਦਾਹਰਨ ਨੂੰ ਟਵੀਕ ਕੀਤਾ ਗਿਆ।

ਟੇਬਲ

  • ਸਟਾਈਲ ਕੀਤੇ ਨੇਸਟਡ ਟੇਬਲ ਲਈ ਸਮਰਥਨ ਹਟਾਇਆ ਗਿਆ। ਸਰਲ ਚੋਣਕਾਰਾਂ ਲਈ ਸਾਰੀਆਂ ਸਾਰਣੀ ਸ਼ੈਲੀਆਂ ਹੁਣ v4 ਵਿੱਚ ਵਿਰਾਸਤ ਵਿੱਚ ਮਿਲੀਆਂ ਹਨ।
  • ਉਲਟ ਸਾਰਣੀ ਵੇਰੀਐਂਟ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ।

ਸਹੂਲਤ

  • ਡਿਸਪਲੇ, ਓਹਲੇ, ਅਤੇ ਹੋਰ:
    • ਡਿਸਪਲੇ ਯੂਟਿਲਟੀਜ਼ ਨੂੰ ਜਵਾਬਦੇਹ ਬਣਾਇਆ ਗਿਆ (ਉਦਾਹਰਨ ਲਈ, .d-noneਅਤੇ d-{sm,md,lg,xl}-none)।
    • .hidden-*ਨਵੀਆਂ ਡਿਸਪਲੇ ਯੂਟਿਲਿਟੀਜ਼ ਲਈ ਬਹੁਤ ਸਾਰੀਆਂ ਯੂਟਿਲਿਟੀਜ਼ ਨੂੰ ਛੱਡ ਦਿੱਤਾ ਗਿਆ ਹੈ । ਉਦਾਹਰਨ ਲਈ, ਦੀ ਬਜਾਏ .hidden-sm-up, ਦੀ ਵਰਤੋਂ ਕਰੋ .d-sm-none। .hidden-printਡਿਸਪਲੇ ਉਪਯੋਗਤਾ ਨਾਮਕਰਨ ਸਕੀਮ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਉਪਯੋਗਤਾਵਾਂ ਦਾ ਨਾਮ ਬਦਲਿਆ ਗਿਆ ਹੈ । ਇਸ ਪੰਨੇ ਦੇ ਜਵਾਬਦੇਹ ਉਪਯੋਗਤਾਵਾਂ ਸੈਕਸ਼ਨ ਦੇ ਅਧੀਨ ਹੋਰ ਜਾਣਕਾਰੀ।
    • .float-{sm,md,lg,xl}-{left,right,none}ਜਵਾਬਦੇਹ ਫਲੋਟਸ ਲਈ ਕਲਾਸਾਂ ਜੋੜੀਆਂ ਗਈਆਂ ਅਤੇ ਹਟਾ ਦਿੱਤੀਆਂ ਗਈਆਂ ਅਤੇ .pull-leftਕਿਉਂਕਿ .pull-rightਉਹ ਅਤੇ ਲਈ ਬੇਲੋੜੀਆਂ .float-leftਹਨ .float-right।
  • ਕਿਸਮ:
    • ਸਾਡੀਆਂ ਟੈਕਸਟ ਅਲਾਈਨਮੈਂਟ ਕਲਾਸਾਂ ਵਿੱਚ ਜਵਾਬਦੇਹ ਭਿੰਨਤਾਵਾਂ ਸ਼ਾਮਲ ਕੀਤੀਆਂ ਗਈਆਂ .text-{sm,md,lg,xl}-{left,center,right}।
  • ਅਲਾਈਨਮੈਂਟ ਅਤੇ ਸਪੇਸਿੰਗ:
  • ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰ ਸੰਸਕਰਣਾਂ ਲਈ ਸਮਰਥਨ ਛੱਡਣ ਲਈ ਕਲੀਅਰਫਿਕਸ ਨੂੰ ਅਪਡੇਟ ਕੀਤਾ ਗਿਆ।

ਵਿਕਰੇਤਾ ਪ੍ਰੀਫਿਕਸ ਮਿਕਸਿਨ

ਬੂਟਸਟਰੈਪ 3 ਦੇ ਵਿਕਰੇਤਾ ਪ੍ਰੀਫਿਕਸ ਮਿਕਸਿਨ, ਜੋ ਕਿ v3.2.0 ਵਿੱਚ ਬਰਤਰਫ਼ ਕੀਤੇ ਗਏ ਸਨ, ਨੂੰ ਬੂਟਸਟਰੈਪ 4 ਵਿੱਚ ਹਟਾ ਦਿੱਤਾ ਗਿਆ ਹੈ। ਕਿਉਂਕਿ ਅਸੀਂ ਆਟੋਪ੍ਰੀਫਿਕਸਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ , ਉਹ ਹੁਣ ਜ਼ਰੂਰੀ ਨਹੀਂ ਹਨ।

ਹੇਠਾਂ ਦਿੱਤੇ ਮਿਸ਼ਰਣਾਂ ਨੂੰ ਹਟਾਇਆ ਗਿਆ : animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform,translatetranslate3duser-select

ਦਸਤਾਵੇਜ਼ੀਕਰਨ

ਸਾਡੇ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਪੂਰੇ ਬੋਰਡ ਵਿੱਚ ਇੱਕ ਅੱਪਗ੍ਰੇਡ ਵੀ ਮਿਲਿਆ ਹੈ। ਹੇਠਾਂ ਹੇਠਾਂ ਹੈ:

  • ਅਸੀਂ ਅਜੇ ਵੀ ਜੇਕੀਲ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹਾਂ, ਪਰ ਸਾਡੇ ਕੋਲ ਮਿਸ਼ਰਣ ਵਿੱਚ ਪਲੱਗਇਨ ਹਨ:
    • bugify.rbਸਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਬੱਗ ਪੰਨੇ 'ਤੇ ਐਂਟਰੀਆਂ ਨੂੰ ਕੁਸ਼ਲਤਾ ਨਾਲ ਸੂਚੀਬੱਧ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।
    • example.rbਡਿਫਾਲਟ highlight.rbਪਲੱਗਇਨ ਦਾ ਇੱਕ ਕਸਟਮ ਫੋਰਕ ਹੈ, ਜੋ ਕਿ ਆਸਾਨ ਉਦਾਹਰਨ-ਕੋਡ ਹੈਂਡਲਿੰਗ ਲਈ ਸਹਾਇਕ ਹੈ।
    • callout.rbਦਾ ਇੱਕ ਸਮਾਨ ਕਸਟਮ ਫੋਰਕ ਹੈ, ਪਰ ਸਾਡੇ ਵਿਸ਼ੇਸ਼ ਡੌਕਸ ਕਾਲਆਊਟਸ ਲਈ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ।
    • jekyll-toc ਦੀ ਵਰਤੋਂ ਸਾਡੀ ਸਮੱਗਰੀ ਦੀ ਸਾਰਣੀ ਬਣਾਉਣ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।
  • ਸਾਰੇ ਡੌਕਸ ਸਮੱਗਰੀ ਨੂੰ ਆਸਾਨ ਸੰਪਾਦਨ ਲਈ ਮਾਰਕਡਾਊਨ (HTML ਦੀ ਬਜਾਏ) ਵਿੱਚ ਦੁਬਾਰਾ ਲਿਖਿਆ ਗਿਆ ਹੈ।
  • ਸਰਲ ਸਮੱਗਰੀ ਅਤੇ ਵਧੇਰੇ ਪਹੁੰਚਯੋਗ ਲੜੀ ਲਈ ਪੰਨਿਆਂ ਨੂੰ ਪੁਨਰਗਠਿਤ ਕੀਤਾ ਗਿਆ ਹੈ।
  • ਅਸੀਂ ਬੂਟਸਟਰੈਪ ਦੇ ਵੇਰੀਏਬਲ, ਮਿਕਸਿਨ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਦਾ ਪੂਰਾ ਲਾਭ ਲੈਣ ਲਈ ਨਿਯਮਤ CSS ਤੋਂ SCSS ਵਿੱਚ ਚਲੇ ਗਏ ਹਾਂ।

ਜਵਾਬਦੇਹ ਉਪਯੋਗਤਾਵਾਂ

@screen-v4.0.0 ਵਿੱਚ ਸਾਰੇ ਵੇਰੀਏਬਲ ਹਟਾ ਦਿੱਤੇ ਗਏ ਹਨ। media-breakpoint-up()ਇਸਦੀ ਬਜਾਏ , media-breakpoint-down(), ਜਾਂ media-breakpoint-only()Sass ਮਿਕਸਿਨ ਜਾਂ $grid-breakpointsSass ਮੈਪ ਦੀ ਵਰਤੋਂ ਕਰੋ ।

displayਸਾਡੀਆਂ ਜਵਾਬਦੇਹ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਨੂੰ ਸਪੱਸ਼ਟ ਉਪਯੋਗਤਾਵਾਂ ਦੇ ਪੱਖ ਵਿੱਚ ਬਹੁਤ ਹੱਦ ਤੱਕ ਹਟਾ ਦਿੱਤਾ ਗਿਆ ਹੈ ।

  • ਅਤੇ ਕਲਾਸਾਂ .hiddenਨੂੰ .showਹਟਾ ਦਿੱਤਾ ਗਿਆ ਹੈ ਕਿਉਂਕਿ ਉਹ jQuery ਦੇ $(...).hide()ਅਤੇ $(...).show()ਤਰੀਕਿਆਂ ਨਾਲ ਟਕਰਾਅ ਸਨ। ਇਸਦੀ ਬਜਾਏ, [hidden]ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਟੌਗਲ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਜਾਂ ਇਨਲਾਈਨ ਸਟਾਈਲ ਜਿਵੇਂ style="display: none;"ਅਤੇ ਵਰਤੋ style="display: block;"।
  • ਸਾਰੀਆਂ .hidden-ਕਲਾਸਾਂ ਨੂੰ ਹਟਾ ਦਿੱਤਾ ਗਿਆ ਹੈ, ਪ੍ਰਿੰਟ ਉਪਯੋਗਤਾਵਾਂ ਲਈ ਸੁਰੱਖਿਅਤ ਕਰੋ ਜਿਨ੍ਹਾਂ ਦਾ ਨਾਮ ਬਦਲਿਆ ਗਿਆ ਹੈ।
    • v3 ਤੋਂ ਹਟਾਇਆ ਗਿਆ:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
    • v4 ਅਲਫ਼ਾਸ ਤੋਂ ਹਟਾਇਆ ਗਿਆ:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • ਪ੍ਰਿੰਟ ਉਪਯੋਗਤਾਵਾਂ ਹੁਣ .hidden-ਜਾਂ ਨਾਲ ਸ਼ੁਰੂ ਨਹੀਂ ਹੁੰਦੀਆਂ ਹਨ .visible-, ਪਰ ਨਾਲ .d-print-।
    • ਪੁਰਾਣੇ ਨਾਮ: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • ਨਵੀਆਂ ਕਲਾਸਾਂ: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

ਸਪੱਸ਼ਟ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਬਜਾਏ .visible-*, ਤੁਸੀਂ ਕਿਸੇ ਤੱਤ ਨੂੰ ਉਸ ਸਕ੍ਰੀਨ ਆਕਾਰ 'ਤੇ ਨਾ ਲੁਕਾ ਕੇ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਉਂਦੇ ਹੋ। .d-*-noneਤੁਸੀਂ ਇੱਕ ਕਲਾਸ ਨੂੰ ਇੱਕ ਕਲਾਸ ਨਾਲ ਜੋੜ ਸਕਦੇ ਹੋ ਤਾਂ .d-*-blockਜੋ ਇੱਕ ਐਲੀਮੈਂਟ ਨੂੰ ਸਿਰਫ਼ ਸਕ੍ਰੀਨ ਆਕਾਰਾਂ ਦੇ ਇੱਕ ਦਿੱਤੇ ਅੰਤਰਾਲ 'ਤੇ ਦਿਖਾਇਆ ਜਾ ਸਕੇ (ਜਿਵੇਂ .d-none.d-md-block.d-xl-noneਕਿ ਐਲੀਮੈਂਟ ਸਿਰਫ਼ ਮੱਧਮ ਅਤੇ ਵੱਡੇ ਡਿਵਾਈਸਾਂ 'ਤੇ ਦਿਖਾਉਂਦਾ ਹੈ)।

ਨੋਟ ਕਰੋ ਕਿ v4 ਵਿੱਚ ਗਰਿੱਡ ਬ੍ਰੇਕਪੁਆਇੰਟ ਵਿੱਚ ਤਬਦੀਲੀਆਂ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਉਹੀ ਨਤੀਜੇ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਇੱਕ ਬ੍ਰੇਕਪੁਆਇੰਟ ਵੱਡਾ ਕਰਨ ਦੀ ਲੋੜ ਪਵੇਗੀ। ਨਵੀਂ ਜਵਾਬਦੇਹ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਘੱਟ ਆਮ ਕੇਸਾਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਨਹੀਂ ਕਰਦੀਆਂ ਹਨ ਜਿੱਥੇ ਇੱਕ ਤੱਤ ਦੀ ਦਿੱਖ ਨੂੰ ਵਿਊਪੋਰਟ ਆਕਾਰਾਂ ਦੀ ਇੱਕ ਇਕਸਾਰ ਸੀਮਾ ਦੇ ਰੂਪ ਵਿੱਚ ਪ੍ਰਗਟ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ; ਤੁਹਾਨੂੰ ਇਸਦੀ ਬਜਾਏ ਅਜਿਹੇ ਮਾਮਲਿਆਂ ਵਿੱਚ ਕਸਟਮ CSS ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੋਏਗੀ.