Back to Question Center
0

ਬਲਮਾ ਨਾਲ 6 ਮਿੰਟ ਵਿੱਚ ਇੱਕ CSS ਫਰੇਮਵਰਕ ਸਿੱਖੋ            Bulma ਨਾਲ 6 ਮਿੰਟ ਵਿੱਚ ਇੱਕ CSS ਫਰੇਮਵਰਕ ਸਿੱਖੋ: ਬੂਟਸਟਰੈਪ HTML ਔਡੀਓ ਅਤੇ & ਵੀਡਿਓਫ੍ਰਾਮੇਵਰਕਸਸੀਐੱਸ

1 answers:
ਬਲਮਾ ਨਾਲ 6 ਮਿੰਟ ਵਿੱਚ ਇੱਕ CSS ਫਰੇਮਵਰਕ ਸਿੱਖੋ

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

ਅਸੀਂ ਇੱਕ ਕੋਟਿੰਗ ਕੈਟਾਗਜ਼ ਪੰਨਾ ਬਣਾਵਾਂਗੇ, ਇੱਕ ਹੀਰੋ ਬੈਨਰ, ਕਾਲਮ, ਕਾਰਡ, ਬਟਨ ਅਤੇ ਹੋਰ ਸਮੇਤ Bulma ਦੇ ਯੂਆਈ ਦੇ ਭਾਗਾਂ ਨੂੰ ਵਰਤਣਾ.
ਬਲਮਾ ਨਾਲ 6 ਮਿੰਟ ਵਿੱਚ ਇੱਕ CSS ਫਰੇਮਵਰਕ ਸਿੱਖੋBulma ਨਾਲ 6 ਮਿੰਟ ਵਿੱਚ ਇੱਕ CSS ਫਰੇਮਵਰਕ ਸਿੱਖੋ:
ਬੂਟਸਟਰੈਪ HTML ਔਡੀਓ ਅਤੇ ਵੀਡਿਓਫ੍ਰਾਮੇਵਰਕਸੀਐੱਸ

ਪਹਿਲਾਂ, ਆਓ ਬਲਮਾ ਨੂੰ ਸਥਾਪਿਤ ਕਰੀਏ. ਤੁਸੀਂ npm bulma ਇੰਸਟਾਲ ਕਰ ਸਕਦੇ ਹੋ, ਜਾਂ ਤੁਸੀਂ ਪ੍ਰਾਜੈਕਟ ਅਯਾਤ ਕਰ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਕਿ ਕੋਡ ਦੀਆਂ ਹੇਠਲੀਆਂ ਲਾਈਨਾਂ ਨਾਲ. ਪਹਿਲੀ ਲਾਈਨ ਫੋਂਟ ਅਸੈਸਬ੍ਰੀ ਲਾਇਬ੍ਰੀਰੀ ਆਯਾਤ ਕਰਦੀ ਹੈ ਤਾਂ ਜੋ ਅਸੀਂ ਉਹਨਾਂ ਦੇ ਆਈਕਨਸ ਨੂੰ ਵਰਤ ਸਕੀਏ.

              

ਅੱਗੇ, ਅਸੀਂ ਇੱਕ ਭਾਗ ਦੇ ਤੱਤ ਅਤੇ ਬੱਲਮਾ ਕਲਾਸ ਨਾਇਕ ਅਤੇ ਨਾਇਕ-ਬਾਡੀ ਦੇ ਕਲਾਸ ਨਾਲ ਇੱਕ ਡੀਵੀ ਬਣਾਉਣ ਲਈ ਇੱਕ ਹੀਰੋ ਬੈਨਰ ਬਣਾਵਾਂਗੇ.

      <ਭਾਗ ਕਲਾ = "ਨਾਇਕ">  

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

      <ਭਾਗ ਕਲਾਸ = "ਨਾਇਕ ਹੈ-ਪ੍ਰਾਇਮਰੀ ਈ-ਮੀਡੀਅਮ">  ਹੈ 
ਐਚ 1 ਅਤੇ ਐਚ 2 ਦੇ ਲਈ ਅਸੀਂ ਕੰਟੇਨਰ ਡਿਵੀਡ ਨੂੰ ਜੋੜਾਂਗੇ, ਜੋ ਅਸੀਂ ਹੀਰੋ-ਬਾਡੀ ਦਾ ਸਿਰਲੇਖ ਅਤੇ ਸਬ-ਟਾਈਟਲ ਦੇ ਰੂਪ ਵਿਚ ਲਵਲੀ ਸ਼ੈਲੀ. ਸਿਰਲੇਖ ਨੂੰ ਇੱਕ is-1 ਮੋਡੀਫਾਇਰ ਦੇਣ ਨਾਲ ਇਹ ਵੱਡਾ ਹੋ ਜਾਵੇਗਾ.

      

ਕੋਡਿੰਗ ਕਿਓਟ

ਆਪਣੇ ਮਨਪਸੰਦਾਂ ਦੀ ਤਰ੍ਹਾਂ

ਬਲਮਾ ਨਾਲ 6 ਮਿੰਟ ਵਿੱਚ ਇੱਕ CSS ਫਰੇਮਵਰਕ ਸਿੱਖੋBulma ਨਾਲ 6 ਮਿੰਟ ਵਿੱਚ ਇੱਕ CSS ਫਰੇਮਵਰਕ ਸਿੱਖੋ:
ਬੂਟਸਟਰੈਪ HTML ਔਡੀਓ ਅਤੇ ਵੀਡਿਓਫ੍ਰਾਮੇਵਰਕਸੀਐੱਸ

ਇਹ ਸਾਡੀ ਸਾਈਟ ਦੇ ਸਿਖਰ ਨੂੰ ਪੂਰਾ ਕਰਦਾ ਹੈ, ਹੁਣ ਆਓ ਕੁਝ ਕਾਲਮਾਂ ਦਾ ਨਿਰਮਾਣ ਕਰੀਏ. ਪਹਿਲਾਂ, ਅਸੀਂ ਸੈਕਸ਼ਨ ਨੂੰ ਬੰਦ ਕਰਾਂਗੇ, ਤਾਂ ਅਸੀਂ ਉਨ੍ਹਾਂ ਲਈ ਕੰਟੇਨਰ ਬਣਾਵਾਂਗੇ.

      <ਭਾਗ ਕਲਾਸ = "ਭਾਗ">  

ਸਾਡੇ ਕੰਟੇਨਰ ਦੇ ਅੰਦਰ, ਅਸੀਂ ਕਾਲਮ ਮਾਪਦੇ ਹੋਏ div

      <ਭਾਗ ਕਲਾਸ = "ਭਾਗ">  

ਤਦ ਅਸੀਂ ਤਿੰਨ ਕਾਲਮ ਦੇ ਅੰਦਰ ਬੱਚੇ ਦੇ ਰੂਪ ਵਿੱਚ ਪਾਵਾਂਗੇ. ਉਹ ਆਟੋਮੈਟਿਕ ਹੀ ਆਪਣੇ ਵਿਊਪੋਰਟ ਦੇ ਤੀਜੇ ਹਿੱਸੇ ਵਿੱਚ ਵਿਭਾਜਨ ਕਰਨਗੇ, ਭਾਵੇਂ ਕਿ ਖਿਤਿਜੀ ਜਾਂ ਲੰਬਕਾਰੀ (ਮੋਬਾਈਲ ਤੇ) ਦੇਖੇ ਗਏ. Bulma ਅਸਲ ਵਿੱਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਜਵਾਬਦੇਹ ਹੈ.

      <ਭਾਗ ਕਲਾਸ = "ਭਾਗ">  
1
2
3

"ਹਵਾਲਾ"

ਪ੍ਰੋਗਰਾਮਰ

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

      

"ਹਵਾਲਾ"

ਪ੍ਰੋਗਰਾਮਰ

<ਫੁੱਟਰ ਕਲਾਸ = "ਕਾਰਡ-ਫੁਟਰ">

ਬਲਮਾ ਨਾਲ 6 ਮਿੰਟ ਵਿੱਚ ਇੱਕ CSS ਫਰੇਮਵਰਕ ਸਿੱਖੋBulma ਨਾਲ 6 ਮਿੰਟ ਵਿੱਚ ਇੱਕ CSS ਫਰੇਮਵਰਕ ਸਿੱਖੋ:
ਬੂਟਸਟਰੈਪ HTML ਔਡੀਓ ਅਤੇ ਵੀਡਿਓਫ੍ਰਾਮੇਵਰਕਸੀਐੱਸ

ਹੁਣ ਅਸੀਂ ਇਕ ਕਾਲਮ ਨੂੰ ਸਫਲਤਾਪੂਰਵਕ ਤਿਆਰ ਕੀਤਾ ਹੈ, ਅਸੀਂ ਆਪਣੇ ਤਿੰਨ ਕਾਲਮ ਬਣਾਉਣ ਲਈ ਬਸ ਕਾਲਮ ਦੇ ਕੋਡ ਨੂੰ ਕਾਪੀ ਅਤੇ ਪੇਸਟ ਕਰ ਸਕਦੇ ਹਾਂ ਅਤੇ ਸਾਡੀ ਸਾਈਟ ਤਿਆਰ ਹੈ. png "alt ="ਬਲਮਾ ਨਾਲ 6 ਮਿੰਟ ਵਿੱਚ ਇੱਕ CSS ਫਰੇਮਵਰਕ ਸਿੱਖੋBulma ਨਾਲ 6 ਮਿੰਟ ਵਿੱਚ ਇੱਕ CSS ਫਰੇਮਵਰਕ ਸਿੱਖੋ: ਬੂਟਸਟਰੈਪ HTML ਔਡੀਓ ਅਤੇ ਵੀਡਿਓਫ੍ਰਾਮੇਵਰਕਸੀਐੱਸ "/>

ਜੇਕਰ ਤੁਸੀਂ ਬਲਮਾ ਬਾਰੇ ਹੋਰ ਸਿੱਖਣ ਵਿੱਚ ਦਿਲਚਸਪੀ ਰੱਖਦੇ ਹੋ, ਤਾਂ ਬਿਲਮਾ ਦੇ ਉਦਾਹਰਨ ਸਾਈਟਾਂ ਅਤੇ ਦਸਤਾਵੇਜ਼ ਵੇਖੋ. ਓ. ਅਤੇ ਇਸ ਤਰ੍ਹਾਂ ਹੋਰ ਸਮਗਰੀ ਲਈ, ਓਪਨ ਸ੍ਰੋਸਰਕ੍ਰਾਟ ਤੇ ਜਾਓ.

March 1, 2018