Back to Question Center
0

CSS ਗਰਿੱਡ ਅਤੇ ਫਲੇਕਬਾਕਸ ਨਾਲ ਟ੍ਰੇਲੋ ਲੇਆਉਟ ਬਣਾਉਣਾ            CSS ਗਰ੍ਿੱਡ ਅਤੇ ਫਲੇਕਬੈਕਸ ਨਾਲ ਟ੍ਰੇਲੋ ਲੇਆਉਟ ਬਣਾ ਰਿਹਾ ਹੈਰੇਲਿਤ ਵਿਸ਼ਿਆਂ: ਆਡੀਓ & VideoSassBootstrapCSS ਸਮਾਲਟ

1 answers:
CSS ਗ੍ਰਾਡ ਅਤੇ ਫਲੇਕਬਾਕਸ ਨਾਲ ਟ੍ਰੇਲੋ ਲੇਆਉਟ ਬਣਾਉਣਾ

ਇਸ ਟਿਯੂਟੋਰਿਅਲ ਵਿਚ, ਮੈਂ ਤੁਹਾਨੂੰ ਟ੍ਰੇਲੋ ਬੋਰਡ ਸਕ੍ਰੀਨ ਦੇ ਬੁਨਿਆਦੀ ਲੇਆਊਟ ਦੇ ਲਾਗੂ ਕਰਨ ਦੁਆਰਾ ਚਲੇਗਾ (ਉਦਾਹਰਣ ਵੱਜੋਂ ਵੇਖੋ). ਇਹ ਇੱਕ ਜਵਾਬਦੇਹ, ਸਮਾਲ ਦਾ ਹੱਲ ਹੈ, ਅਤੇ ਲੇਆਉਟ ਦੀ ਕੇਵਲ ਢਾਂਚਾਗਤ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹੀ ਵਿਕਸਿਤ ਕੀਤੀਆਂ ਜਾਣਗੀਆਂ.

ਪ੍ਰੀਵਿਊ ਲਈ, ਇੱਥੇ ਅੰਤਮ ਨਤੀਜੇ ਦਾ ਸਮਾਲ ਡੈਮੋ ਹੈ

CSS ਗਰਿੱਡ ਅਤੇ ਫਲੇਕਬਾਕਸ ਨਾਲ ਟ੍ਰੇਲੋ ਲੇਆਉਟ ਬਣਾਉਣਾCSS ਗਰ੍ਿੱਡ ਅਤੇ ਫਲੇਕਬੈਕਸ ਨਾਲ ਟ੍ਰੇਲੋ ਲੇਆਉਟ ਬਣਾ ਰਿਹਾ ਹੈਰੇਲਿਤ ਵਿਸ਼ਿਆਂ:
ਆਡੀਓ ਅਤੇ ਵੀਡੀਓਸੱਸਬੂਟੱਸਟਸੀਐੱਸ.ਐੱਸ.ਐੱਸ.ਐਮ.ਐਲ.

ਗ੍ਰਿਡ ਲੇਆਉਟ ਅਤੇ ਫਲੇਕਬਾਕਸ ਦੇ ਇਲਾਵਾ, ਹੱਲ਼ ਕੈਲਕ ਅਤੇ ਵਿਊਪੋਰਟ ਇਕਾਈਆਂ ਨੂੰ ਨਿਯੁਕਤ ਕਰਦਾ ਹੈ. ਕੋਡ ਨੂੰ ਵਧੇਰੇ ਪੜ੍ਹਨਯੋਗ ਅਤੇ ਕੁਸ਼ਲ ਬਣਾਉਣ ਲਈ, ਸਾਮਾਲ ਵੀ ਸਾਸ ਵੇਰੀਬਲਾਂ ਦਾ ਲਾਭ ਲੈਂਦਾ ਹੈ.

ਕੋਈ ਫਾਲਬੈਕ ਪ੍ਰਦਾਨ ਨਹੀਂ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਇਸ ਲਈ ਇੱਕ ਸਹਾਇਕ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਕੋਡ ਨੂੰ ਚਲਾਉਣ ਲਈ ਇਹ ਯਕੀਨੀ ਬਣਾਓ. ਹੋਰ ਅੱਗੇ ਪਾਉ, ਆਓ, ਇਕਦਮ ਬਾਅਦ ਸਕਰੀਨ ਦੇ ਹਿੱਸਿਆਂ ਦਾ ਵਿਕਾਸ ਕਰੀਏ - cloud one llc.

ਸਕਰੀਨ ਲੇਆਉਟ

ਟ੍ਰੇਲੋ ਬੋਰਡ ਦੀ ਸਕ੍ਰੀਨ ਇੱਕ ਐਪ ਬਾਰ, ਇੱਕ ਬੋਰਡ ਬਾਰ ਅਤੇ ਕਾਰਡ ਸੂਚੀਆਂ ਵਾਲਾ ਇੱਕ ਭਾਗ ਹੁੰਦਾ ਹੈ. ਮਿਮਾਲਟ ਇਸ ਢਾਂਚੇ ਨੂੰ ਹੇਠ ਦਿੱਤੇ ਮਾਰਕਅੱਪ ਜੁੱਤੇ ਨਾਲ ਬਣਾਉ:

      

ਇਹ ਖਾਕਾ ਇੱਕ CSS ਗ੍ਰੇਡ ਨਾਲ ਪ੍ਰਾਪਤ ਕੀਤਾ ਜਾਵੇਗਾ. ਖਾਸ ਕਰਕੇ, ਇੱਕ 3 × 1 ਗਰਿੱਡ (ਜੋ ਕਿ ਇੱਕ ਕਾਲਮ ਅਤੇ ਤਿੰਨ ਕਤਾਰਾਂ ਹਨ). ਪਹਿਲੀ ਲਾਈਨ ਐਪ ਬਾਰ ਲਈ ਹੋਵੇਗੀ, ਬੋਰਡ ਪੱਟੀ ਲਈ ਦੂਜੀ ਅਤੇ ਲਈ ਤੀਸਰੀ. ਸੂਚੀ ਤੱਤ.

ਪਹਿਲੀਆਂ ਦੋ ਕਤਾਰਾਂ ਵਿੱਚ ਇੱਕ ਨਿਸ਼ਚਿਤ ਉਚਾਈ ਹੁੰਦੀ ਹੈ, ਜਦਕਿ ਤੀਜੀ ਲਾਈਨ ਵਿੱਚ ਬਾਕੀ ਦੀ ਵਿਊਪੋਰਟ ਦੀ ਉਚਾਈ 'ਤੇ ਸਪੈਨ ਕੀਤਾ ਜਾਵੇਗਾ:

    . ui {ਉਚਾਈ: 100 ਵੀ.ਡਿਸਪਲੇ: ਗਰਿੱਡ;ਗਰਿੱਡ-ਟੈਮਪਲੇਟ-ਕਤਾਰ: $ ਐਪਲੈਪ-ਉਚਾਈ $ ਨੈਬਰ-ਉਚਾਈ 1 ਫਰੰਟ;}     

ਵਿਊਪੋਰਟ ਯੂਨਿਟ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹਨ ਕਿ . ui ਕੰਟੇਨਰ ਬਰਾਊਜ਼ਰ ਦੇ ਵਿਊਪੋਰਟ ਦੇ ਰੂਪ ਵਿੱਚ ਹਮੇਸ਼ਾ ਲੰਬਾ ਹੋਵੇਗਾ.

ਗਰਿੱਡ ਫਾਰਮੈਟਿੰਗ ਪ੍ਰਸੰਗ ਕੰਟੇਨਰ ਨੂੰ ਦਿੱਤਾ ਗਿਆ ਹੈ, ਅਤੇ ਉਪਰ ਦੱਸੇ ਗਏ ਗਰਿੱਡ ਦੀਆਂ ਕਤਾਰਾਂ ਅਤੇ ਕਾਲਮਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ. ਵਧੇਰੇ ਸਹੀ ਹੋਣ ਲਈ, ਸਿਰਫ਼ ਕਤਾਰਾਂ ਹੀ ਪ੍ਰਭਾਸ਼ਿਤ ਕੀਤੀਆਂ ਗਈਆਂ ਹਨ ਕਿਉਂਕਿ ਵਿਲੱਖਣ ਕਾਲਮ ਘੋਸ਼ਿਤ ਕਰਨ ਦੀ ਕੋਈ ਲੋੜ ਨਹੀਂ ਹੈ. ਕਤਾਰਾਂ ਦੀ ਅਦਾਇਗੀ ਬਾਰਾਂ ਦੀ ਉਚਾਈ ਅਤੇ fr ਯੂਨਿਟ ਦੇ ਦੀ ਉਚਾਈ ਬਣਾਉਣ ਲਈ ਕੁਝ ਸਾਸ ਵੈਰੀਏਬਲਾਂ ਨਾਲ ਕੀਤੀ ਜਾਂਦੀ ਹੈ. ਸੂਚੀਆਂ ਤੱਤ ਬਾਕੀ ਦੇ ਵਿਊਪੋਰਟ ਦੀ ਉਚਾਈ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ

ਕਾਰਡ ਦੀ ਸੂਚੀ ਸੈਕਸ਼ਨ

ਜਿਵੇਂ ਕਿ ਦੱਸਿਆ ਗਿਆ ਹੈ, ਸਕ੍ਰੀਨ ਗਰਿੱਡ ਦੀ ਤੀਜੀ ਲਾਈਨ ਕਾਰਡ ਸੂਚੀਆਂ ਲਈ ਕੰਟੇਨਰ ਦੀ ਮੇਜ਼ਬਾਨੀ ਕਰਦੀ ਹੈ. ਇਸ ਦੀ ਨਿਸ਼ਾਨਦੇਹੀ ਦੀ ਰੂਪ ਰੇਖਾ:

      

ਮੈਂ ਸੂਚਕਾਂ ਨੂੰ ਫਾਰਮੈਟ ਕਰਨ ਲਈ ਇੱਕ ਪੂਰੀ ਵਿਊਪੋਰਟ-ਚੌੜਾ ਸਲੈਂਟ ਇੱਕ-ਲਾਈਨ ਲਾਈਨ ਕੰਟੇਨਰ ਵਰਤ ਰਿਹਾ ਹਾਂ:

    . ਸੂਚੀਆਂ {ਡਿਸਪਲੇ: ਫੈਕਸ;ਓਵਰਫਲੋ-ਐਕਸ: ਆਟੋ;> * {flex: 0 0 ਆਟੋ; // 'ਸਖ਼ਤ' ਸੂਚੀਆਂਹਾਸ਼ੀਆ-ਖੱਬੇ: $ ਪਾੜਾ;}& :: ਦੇ ਬਾਅਦ {ਸਮੱਗਰੀ: '';flex: 0 $ $ ਪਾਖ;}}     

ਓਵਰਫਲੋ-ਐਕਸ ਸੰਪਤੀ ਨੂੰ ਆਟੋ ਵੈਲਯੂ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਨਾਲ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਸਕ੍ਰੀਨ ਦੇ ਹੇਠਾਂ ਖਿਤਿਜੀ ਸਕ੍ਰੋਲਬਾਰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਕਿਹਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਸੂਚੀਆਂ ਵਿਊਪੋਰਟ ਦੁਆਰਾ ਮੁਹੱਈਆ ਕੀਤੀ ਚੌੜਾਈ ਵਿੱਚ ਫਿੱਟ ਨਹੀਂ ਹੁੰਦੀਆਂ.

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

ਅੱਗੇ ਮੈਨੂੰ ਸੂਚੀਆਂ ਦੇ ਵਿੱਚ ਇੱਕ ਖਿਤਿਜੀ ਅਲੰਕਾਰ ਨੂੰ ਜੋੜਨ ਦੀ ਲੋੜ ਪਵੇਗੀ. ਇਸ ਨੂੰ ਠੀਕ ਕਰਨ ਲਈ, ਸੂਚੀਆਂ ਨੂੰ ਖੱਬੇ ਹਾਸ਼ੀਏ ਨਾਲ ਵੱਖ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਅਤੇ ਆਖਰੀ ਸੂਚੀ ਅਤੇ ਸਹੀ ਵਿਊਪੋਰਟ ਕਿਨਾਰੇ ਵਿਚਕਾਰ ਸਪੇਸ ਨੂੰ ਇੱਕ :: ਬਾਅਦ ਸਿਡਓ-ਤੱਤ ਦੇ ਨਾਲ ਜੋੜ ਕੇ ਕੀਤਾ ਜਾਂਦਾ ਹੈ. ਸੂਚੀ ਤੱਤ. ਡਿਫਾਲਟ ਫੈਕਸ-ਕੰਪਰਕ: 1 ਨੂੰ ਓਵਰਰਾਈਡ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਨਹੀਂ ਤਾਂ ਸੂਡੋ-ਐਂਟੀਮੈਂਟ ਸਾਰੀਆਂ ਰਿੰਗ ਸਪੇਸ ਨੂੰ 'ਜਜ਼ਬ ਕਰ ਦੇਵੇਗਾ' ਅਤੇ ਇਹ ਗਾਇਬ ਹੋ ਜਾਵੇਗਾ.

ਧਿਆਨ ਦਿਓ ਕਿ ਫਾਇਰਫਾਕਸ <54 ਉੱਤੇ ਸਪਸ਼ਟ ਚੌੜਾਈ: 100% ਉੱਤੇ . ਸਹੀ ਲੇਆਉਟ ਪੇਸ਼ਕਾਰੀ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਸੂਚੀਆਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ.

ਕਾਰਡ ਸੂਚੀ

ਹਰ ਇੱਕ ਕਾਰਡ ਸੂਚੀ ਹੈਡਰ ਬਾਰ, ਇੱਕ ਕ੍ਰਮ ਕਾਰਡ ਅਤੇ ਪੈਟਰ ਬਾਰ. ਹੇਠ ਦਿੱਤੇ HTML ਸਨਿੱਪਟ ਇਸ ਢਾਂਚੇ ਨੂੰ ਹਾਸਲ ਕਰਦਾ ਹੈ:

      
ਸੂਚੀ ਸਿਰਲੇਖ
  • <ਫੁੱਟਰ> ਇੱਕ ਕਾਰਡ ਸ਼ਾਮਲ ਕਰੋ .

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

ਪਰ ਉਚਾਈ ਹਮੇਸ਼ਾ ਲਈ ਨਹੀਂ ਵੱਧ ਸਕਦੀ, ਇਸ ਲਈ ਉਚਾਈ ਦੀ ਹੱਦ ਦੀ ਜ਼ਰੂਰਤ ਹੈ . ਸੂਚੀ ਤੱਤ. ਇੱਕ ਵਾਰ ਜਦੋਂ ਇਹ ਸੀਮਾ ਪੂਰੀ ਹੋ ਜਾਂਦੀ ਹੈ, ਤਾਂ ਮੈਂ ਇੱਕ ਵਰਟੀਕਲ ਸਕ੍ਰੋਲਬਾਰ ਨੂੰ ਵੇਖਣਾ ਚਾਹੁੰਦਾ ਹਾਂ ਜੋ ਸੂਚੀ ਵਿੱਚ ਭਰਨ ਵਾਲੇ ਕਾਰਡਸ ਤੱਕ ਪਹੁੰਚ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ.

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

CSS ਗਰਿੱਡ ਅਤੇ ਫਲੇਕਬਾਕਸ ਨਾਲ ਟ੍ਰੇਲੋ ਲੇਆਉਟ ਬਣਾਉਣਾCSS ਗਰ੍ਿੱਡ ਅਤੇ ਫਲੇਕਬੈਕਸ ਨਾਲ ਟ੍ਰੇਲੋ ਲੇਆਉਟ ਬਣਾ ਰਿਹਾ ਹੈਰੇਲਿਤ ਵਿਸ਼ਿਆਂ:
ਆਡੀਓ ਅਤੇ ਵੀਡੀਓਸੱਸਬੂਟੱਸਟਸੀਐੱਸ.ਐੱਸ.ਐੱਸ.ਐਮ.ਐਲ.

ਇਸ ਲਈ, ਇਸ ਦੀ ਬਜਾਏ ਅੰਦਰੂਨੀ

    ਤੇ ਅਧਿਕਤਮ-ਉੱਚਾਈ ਪਾਬੰਦੀ ਲਾਗੂ ਕਰੋ. ਕਿਹੜਾ ਮੁੱਲ ਵਰਤਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ? ਸਿਰਲੇਖ ਅਤੇ ਪਦਲੇਖ ਦੀ ਉਚਾਈ ਸੂਚੀ ਨੂੰ ਮਾਪਦੰਡ ਵਾਲੇ ਕੰਟੇਨਰ ਦੀ ਉਚਾਈ ਤੋਂ ਘਟਾਈ ਜਾਣੀ ਚਾਹੀਦੀ ਹੈ ( ਸੂਚੀਆਂ ):

         ਉਲ ~ਅਧਿਕਤਮ-ਉਚਾਈ: ਕੈਲਕ (100% - # {$ ਸੂਚੀ-ਸਿਰਲੇਖ-ਉਚਾਈ} - # {$ ਸੂਚੀ-ਫੁਟਰ-ਉਚਾਈ});}     

    ਪਰ ਇੱਕ ਸਮੱਸਿਆ ਹੈ. ਪ੍ਰਤੀਸ਼ਤ ਮੁੱਲ ਦਾ ਮਤਲਬ ਨਹੀਂ ਹੈ. ਸੂਚੀਆਂ , ਪਰ

      ਤੱਤ ਦੇ ਮਾਪੇ, . ਸੂਚੀ , ਅਤੇ ਇਸ ਤੱਤ ਦੀ ਨਿਸ਼ਚਿਤ ਉਚਾਈ ਨਹੀਂ ਹੈ ਅਤੇ ਇਸ ਲਈ ਇਹ ਪ੍ਰਤੀਸ਼ਤਤਾ ਹੱਲ ਨਹੀਂ ਕੀਤੀ ਜਾ ਸਕਦੀ. ਇਸ ਨੂੰ ਬਣਾ ਕੇ ਨਿਸ਼ਚਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ . ਸੂਚੀ ਦੇ ਰੂਪ ਵਿੱਚ ਲੰਬਾ . ਸੂਚੀਆਂ :

          . ਸੂਚੀ {ਉਚਾਈ: 100%;}     

      ਇਸ ਤਰੀਕੇ ਨਾਲ, . ਸੂਚੀ ਹਮੇਸ਼ਾਂ ਉੱਚੀ ਹੈ . ਸੂਚੀਆਂ , ਇਸਦੀ ਸਮੱਗਰੀ ਦੀ ਪਰਵਾਹ ਕੀਤੇ ਬਿਨਾਂ, ਇਸਦਾ ਬੈਕਗਰਾਊਂਡ-ਰੰਗ ਸੰਪਤੀ ਨੂੰ ਬੈਕਗਰਾਊਂਡ ਦੀ ਸੂਚੀ ਲਈ ਨਹੀਂ ਵਰਤਿਆ ਜਾ ਸਕਦਾ, ਪਰ ਇਸ ਮਕਸਦ ਲਈ ਇਸਦੇ ਬੱਚਿਆਂ (ਹੈਡਰ, ਪਦ, ਕਾਰਡ) ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਸੰਭਵ ਹੈ.

      ਸੂਚੀ ਦੇ ਅਖੀਰ ਅਤੇ ਵਿਊਪੋਰਟ ਦੇ ਹੇਠਲੇ ਕਿਨਾਰੇ ਵਿਚਕਾਰ ਸਪੇਸ ( $ ਪਾੜੇ ) ਦੀ ਥੋੜ੍ਹੀ ਥੋੜ੍ਹੀ ਲੇਟ ਲਈ ਸੂਚੀ ਦੀ ਉਚਾਈ 'ਤੇ ਆਖਰੀ ਅਡਜੱਸਟ ਕਰਨਾ ਜ਼ਰੂਰੀ ਹੈ:

          . ਸੂਚੀ {ਉਚਾਈ: ਕੈਲਕ (100% - # {$ ਪਾੜਾ} - # {$ ਸਕ੍ਰੋਲਬਾਰ-ਮੋਟਾਈ});}     

      ਇਕ ਹੋਰ $ ਸਕ੍ਰੋਲਬਾਰ-ਮੋਟਾਈ ਦੀ ਮਾਤਰਾ ਸੂਚੀ ਨੂੰ ਨੂੰ ਛੂਹਣ ਤੋਂ ਰੋਕਣ ਲਈ ਘਟਾ ਦਿੱਤੀ ਗਈ ਹੈ. ਸੂਚੀ ਤੱਤ ਦਾ ਹਰੀਜੱਟਲ ਸਕ੍ਰੋਲਬਾਰ ਵਾਸਤਵ ਵਿੱਚ, Chrome ਤੇ ਇਹ ਸਕਰੌਲਬਾਰ ਦੇ ਅੰਦਰ 'ਵਧਦਾ ਹੈ' ਸੂਚੀਆਂ ਬਾਕਸ. ਭਾਵ, 100% ਮੁੱਲ ਦੀ ਉਚਾਈ ਤੋਂ ਹੈ. ਸੂਚੀਆਂ , ਸਕਰॉलਬਾਰ ਵਿੱਚ ਸ਼ਾਮਲ

      ਫਾਇਰਫਾਕਸ ਦੀ ਬਜਾਏ, ਸਕਰੋਲਬਾਰ ਨੂੰ 'ਜੋੜ ਦਿੱਤਾ' ਹੈ. ਸੂਚੀਆਂ ਦੀ ਉਚਾਈ, i. ਈ, 100% ਦੀ ਉਚਾਈ ਦਾ ਹਵਾਲਾ ਦਿੰਦਾ ਹੈ ਸੂਚੀਆਂ ਸਕਰੋਲਬਾਰ ਨੂੰ ਸ਼ਾਮਲ ਨਹੀਂ ਕਰਦੀਆਂ. ਇਸ ਲਈ ਇਸ ਘਟਾਉ ਦੀ ਲੋੜ ਨਹੀਂ ਹੋਵੇਗੀ.

      ਇੱਥੇ ਇਸ ਭਾਗ ਲਈ ਸੰਬੰਧਤ CSS ਨਿਯਮ ਹਨ:

          . ਸੂਚੀ {ਚੌੜਾਈ: $ ਸੂਚੀ-ਚੌੜਾਈ;ਉਚਾਈ: ਕੈਲਕ (100% - # {$ ਪਾੜਾ} - # {$ ਸਕ੍ਰੋਲਬਾਰ-ਮੋਟਾਈ});> * {ਬੈਕਗ੍ਰਾਉਂਡ-ਕਲਰ: $ list-bg-color;ਰੰਗ: # 333;ਪੈਡਿੰਗ: 0 $ ਪਾਵਰ;}ਹੈਡਰ {ਲਾਈਨ-ਉਚਾਈ: $ ਸੂਚੀ-ਸਿਰਲੇਖ-ਉਚਾਈ;ਫੌਂਟ-ਆਕਾਰ: 16px;ਫੌਂਟ-ਭਾਰ: ਬੋਲਡ;ਬਾਰਡਰ-ਚੋਟੀ-ਖੱਬੇ-ਰੇਡੀਅਸ: $ ਸੂਚੀ-ਸੀਮਾ-ਰੇਡੀਅਸ;ਬਾਰਡਰ-ਟਾਪ-ਸੱਜੇ-ਰੇਡੀਅਸ: $ ਸੂਚੀ-ਸੀਮਾ-ਰੇਡੀਅਸ;}ਫੁੱਟਰ {ਲਾਈਨ-ਉਚਾਈ: $ ਸੂਚੀ-ਫੁਟਰ-ਉਚਾਈ;border-bottom-left-radius: $ ਸੂਚੀ-ਸੀਮਾ-ਰੇਡੀਅਸ;border-bottom-right-radius: $ ਸੂਚੀ-ਸੀਮਾ-ਰੇਡੀਅਸ;ਰੰਗ: # 888;}ਉਲ {ਸੂਚੀ-ਸ਼ੈਲੀ: ਕੋਈ ਨਹੀਂ;ਹਾਸ਼ੀਆ: 0;ਅਧਿਕਤਮ-ਉਚਾਈ: ਕੈਲਕ (100% - # {$ ਸੂਚੀ-ਸਿਰਲੇਖ-ਉਚਾਈ} - # {$ ਸੂਚੀ-ਫੁਟਰ-ਉਚਾਈ});ਓਵਰਫਲੋ-y: ਆਟੋ;}}     

      ਜਿਵੇਂ ਕਿ ਦੱਸਿਆ ਗਿਆ ਹੈ, ਸੂਚੀ ਬੈਕਗ੍ਰਾਉਂਡ ਰੰਗ ਨੂੰ $ ਸੂਚੀ-ਬੀਜੀ-ਰੰਗ ਮੁੱਲ ਨੂੰ ਬੈਕਗਰਾਊਂਡ-ਰੰਗ ਹਰੇਕ ਦੀ ਸੰਪਤੀ ਦੇ ਕੇ ਦਰਸਾਇਆ ਗਿਆ ਹੈ. ਸੂਚੀ ਤੱਤ ਦੇ ਬੱਚੇ ਓਵਰਫਲੋ -ਅਜ਼ ਕਾਰਡ ਦੀ ਪੱਟੀ ਵੇਖਾਉਂਦੀ ਹੈ ਜਦੋਂ ਲੋੜ ਹੋਵੇ ਅੰਤ ਵਿੱਚ, ਕੁਝ ਸਧਾਰਨ ਸਟਾਈਲ ਸਿਰਲੇਖ ਅਤੇ ਪਦਲੇਰ ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ.

      ਫਿਨਿਸ਼ਿੰਗ ਟੂਚ

      ਸਿੰਗਲ ਕਾਰਡ ਲਈ ਐਚਟੀਐਮਐਲ ਕੇਵਲ ਇਕ ਸੂਚੀ ਆਈਟਮ ਰੱਖਦਾ ਹੈ:

            
    • ਵਿਹਾਰਕ ਤੌਰ 'ਤੇ ਨਿਯਮਿਤ ਤੌਰ' ਤੇ ਨਿਯਤ ਕੀਤਾ ਗਿਆ ਹੈ,
    • ਜਾਂ, ਜੇ ਕਾਰਡ ਦੀ ਇੱਕ ਕਵਰ ਚਿੱਤਰ ਹੈ:

            
    • . ਸਾਡੀ ਵੈਬਸਾਈਟ
    • ਇਹ ਸੰਬੰਧਿਤ CSS ਹੈ:

           ਲੀ {ਬੈਕਗ੍ਰਾਉਂਡ-ਰੰਗ: #fff;ਪੈਡਿੰਗ: $ ਪਾਖ;&: ਨਹੀਂ (: ਆਖਰੀ-ਬਾਲ) {ਹਾਸ਼ੀਆ-ਤਲ: $ ਪਾੜਾ;}ਬਾਰਡਰ-ਰੇਡੀਅਸ: $ ਕਾਰਡ-ਸੀਮਾ-ਰੇਡੀਅਸ;ਬਾਕਸ-ਸ਼ੈਡੋ: 0 1 ਪੈਕਸ 1 ਪੈਕਸ ਰਗਬਾ (0,0,0, 0. 1);img {ਡਿਸਪਲੇ: ਬਲਾਕ;ਚੌੜਾਈ: ਕੈਲਕ (100% + 2 * # {$ ਪਾੜਾ});ਹਾਸ਼ੀਆ: - $ ਪਾੜਾ $ $ ਪਾੜਾ (- $ ਪਾੜਾ);ਸਰਹੱਦ ਤੇ ਚੋਟੀ ਦੇ ਖੱਬੇ-ਰੇਡੀਅਸ: $ ਕਾਰਡ-ਸੀਮਾ-ਰੇਡੀਅਸ;ਬਾਰਡਰ-ਟਾਪ-ਸੱਜੇ-ਰੇਡੀਅਸ: $ ਕਾਰਡ-ਸੀਮਾ-ਰੇਡੀਅਸ;}}     

      ਸੈਮਿਟ ਨੇ ਪਿਛੋਕੜ, ਪੈਡਿੰਗ, ਅਤੇ ਹੇਠਲੇ ਹਾਸ਼ੀਏ ਦੀ ਸਥਾਪਨਾ ਕੀਤੀ, ਕਵਰ ਚਿੱਤਰ ਲੇਆਉਟ ਤਿਆਰ ਹੈ. ਚਿੱਤਰ ਦੀ ਚੌੜਾਈ ਪੂਰੀ ਪੱਟੀ ਨੂੰ ਖੱਬੇ ਪੈਡਿੰਗ ਦੇ ਕਿਨਾਰੇ ਤੋਂ ਸੱਜੇ ਪੈਡਿੰਗ ਐਂਜ 'ਤੇ ਲਾਉਣੀ ਚਾਹੀਦੀ ਹੈ:

           ਚੌੜਾਈ: ਕੈਲਕ (100% + 2 * # {$ gap}};     

      ਤਦ, ਖਿਤਿਜੀ ਅਤੇ ਲੰਬਕਾਰੀ ਚਿੱਤਰ ਨੂੰ ਇਕਸਾਰ ਕਰਨ ਲਈ ਨੈਗੇਟਿਵ ਹਾਸ਼ੀਆ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ:

           ਮਾਰਜਿਨ: - $ ਪਾੜਾ $ $ ਪਾੜਾ (- $ ਪਾੜਾ);     

      ਤੀਜੇ ਸਕਾਰਾਤਮਕ ਹਾਸ਼ੀਏ ਦਾ ਮੁੱਲ ਕਵਰ ਚਿੱਤਰ ਅਤੇ ਕਾਰਡ ਪਾਠ ਦੇ ਵਿਚਕਾਰ ਦੀ ਜਗ੍ਹਾ ਦਾ ਧਿਆਨ ਰੱਖਦਾ ਹੈ.

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

      ਸਿੱਟਾ

      ਇਹ ਡਿਜ਼ਾਈਨ ਪੂਰਾ ਕਰਨ ਦਾ ਸਿਰਫ ਇੱਕ ਹੀ ਤਰੀਕਾ ਹੈ ਅਤੇ ਇਹ ਹੋਰ ਢੰਗਾਂ ਨੂੰ ਦੇਖਣਾ ਦਿਲਚਸਪ ਹੋਵੇਗਾ. ਨਾਲ ਹੀ, ਲੇਆਉਟ ਨੂੰ ਅੰਤਿਮ ਰੂਪ ਦੇਣਾ ਵਧੀਆ ਹੋਵੇਗਾ, ਜਿਵੇਂ ਕਿ ਦੋ ਸਕ੍ਰੀਨ ਬਾਰ ਮੁਕੰਮਲ ਕਰਨਾ.

      ਸਮਮੋਲ ਸੰਭਾਵੀ ਵਾਧਾ ਕਾਰਡ ਸੂਚੀਆਂ ਲਈ ਕਸਟਮ ਸਕਾਲਰਬਾਰਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨਾ ਹੋ ਸਕਦਾ ਹੈ.

      ਇਸ ਲਈ, ਡੈਮੋ ਨੂੰ ਫੋਰਕ ਕਰੋ ਅਤੇ ਹੇਠ ਦਿੱਤੇ ਚਰਚਾ ਵਿੱਚ ਇੱਕ ਲਿੰਕ ਪੋਸਟ ਕਰੋ.

March 1, 2018