Z- ਸੂਚਕਾਂਕ
ਜਦੋਂ ਕਿ ਬੂਟਸਟਰੈਪ ਦੇ ਗਰਿੱਡ ਸਿਸਟਮ ਦਾ ਹਿੱਸਾ ਨਹੀਂ ਹੈ, z-ਇੰਡੈਕਸ ਇਸ ਵਿੱਚ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਭੂਮਿਕਾ ਨਿਭਾਉਂਦੇ ਹਨ ਕਿ ਸਾਡੇ ਹਿੱਸੇ ਕਿਵੇਂ ਇੱਕ ਦੂਜੇ ਨਾਲ ਓਵਰਲੇਅ ਅਤੇ ਇੰਟਰੈਕਟ ਕਰਦੇ ਹਨ।
ਕਈ ਬੂਟਸਟਰੈਪ ਭਾਗ z-index
, CSS ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ ਜੋ ਸਮੱਗਰੀ ਨੂੰ ਵਿਵਸਥਿਤ ਕਰਨ ਲਈ ਇੱਕ ਤੀਜਾ ਧੁਰਾ ਪ੍ਰਦਾਨ ਕਰਕੇ ਨਿਯੰਤਰਣ ਲੇਆਉਟ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ। ਅਸੀਂ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਇੱਕ ਪੂਰਵ-ਨਿਰਧਾਰਤ z-ਇੰਡੈਕਸ ਸਕੇਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ਜੋ ਸਹੀ ਢੰਗ ਨਾਲ ਨੈਵੀਗੇਸ਼ਨ, ਟੂਲਟਿਪਸ ਅਤੇ ਪੌਪਓਵਰ, ਮਾਡਲਾਂ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਕਰਨ ਲਈ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ।
ਇਹ ਉੱਚ ਮੁੱਲ ਇੱਕ ਆਰਬਿਟਰੇਰੀ ਨੰਬਰ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ, ਉੱਚ ਅਤੇ ਖਾਸ ਤੌਰ 'ਤੇ ਵਿਵਾਦਾਂ ਤੋਂ ਬਚਣ ਲਈ ਕਾਫ਼ੀ ਖਾਸ। ਸਾਨੂੰ ਸਾਡੇ ਲੇਅਰਡ ਕੰਪੋਨੈਂਟਸ ਵਿੱਚ ਇਹਨਾਂ ਦੇ ਇੱਕ ਮਿਆਰੀ ਸੈੱਟ ਦੀ ਲੋੜ ਹੈ-ਟੂਲਟਿਪਸ, ਪੌਪਓਵਰ, ਨੇਵਬਾਰ, ਡ੍ਰੌਪਡਾਉਨ, ਮੋਡਲ—ਤਾਂ ਜੋ ਅਸੀਂ ਵਿਹਾਰਾਂ ਵਿੱਚ ਵਾਜਬ ਤੌਰ 'ਤੇ ਇਕਸਾਰ ਹੋ ਸਕੀਏ। ਅਜਿਹਾ ਕੋਈ ਕਾਰਨ ਨਹੀਂ ਹੈ ਕਿ ਅਸੀਂ 100
+ ਜਾਂ 500
+ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕਰ ਸਕਦੇ।
ਅਸੀਂ ਇਹਨਾਂ ਵਿਅਕਤੀਗਤ ਮੁੱਲਾਂ ਦੇ ਅਨੁਕੂਲਣ ਨੂੰ ਉਤਸ਼ਾਹਿਤ ਨਹੀਂ ਕਰਦੇ ਹਾਂ; ਕੀ ਤੁਹਾਨੂੰ ਇੱਕ ਬਦਲਣਾ ਚਾਹੀਦਾ ਹੈ, ਤੁਹਾਨੂੰ ਸੰਭਾਵਤ ਤੌਰ 'ਤੇ ਉਨ੍ਹਾਂ ਸਾਰਿਆਂ ਨੂੰ ਬਦਲਣ ਦੀ ਲੋੜ ਹੈ।
$zindex-dropdown: 1000;
$zindex-sticky: 1020;
$zindex-fixed: 1030;
$zindex-modal-backdrop: 1040;
$zindex-offcanvas: 1050;
$zindex-modal: 1060;
$zindex-popover: 1070;
$zindex-tooltip: 1080;
ਕੰਪੋਨੈਂਟਸ ਦੇ ਅੰਦਰ ਓਵਰਲੈਪਿੰਗ ਬਾਰਡਰਾਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ (ਜਿਵੇਂ ਕਿ, ਬਟਨ ਅਤੇ ਇਨਪੁਟ ਸਮੂਹਾਂ ਵਿੱਚ ਇਨਪੁਟ), ਅਸੀਂ , , ਅਤੇ ਡਿਫੌਲਟ, ਹੋਵਰ, ਅਤੇ ਕਿਰਿਆਸ਼ੀਲ ਸਥਿਤੀਆਂ ਲਈ ਘੱਟ ਸਿੰਗਲ ਡਿਜਿਟ z-index
ਮੁੱਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। ਹੋਵਰ/ਫੋਕਸ/ਐਕਟਿਵ 'ਤੇ, ਅਸੀਂ ਸਿਬਲ ਐਲੀਮੈਂਟਸ ਉੱਤੇ ਉਹਨਾਂ ਦੀ ਬਾਰਡਰ ਦਿਖਾਉਣ ਲਈ ਇੱਕ ਖਾਸ ਤੱਤ ਨੂੰ ਉੱਚੇ ਮੁੱਲ ਦੇ ਨਾਲ ਅੱਗੇ ਲਿਆਉਂਦੇ ਹਾਂ ।1
2
3
z-index