ਉੱਪਰ
ਛੱਡ ਦਿੱਤਾ
ਸਹੀ
ਹੇਠਾਂ
ਬੂਟਸਟਰੈਪ

ਬੂਟਸਟਰੈਪ, ਟਵਿੱਟਰ ਤੋਂ

ਬੂਟਸਟਰੈਪ ਟਵਿੱਟਰ ਦੀ ਇੱਕ ਟੂਲਕਿੱਟ ਹੈ ਜੋ ਵੈਬ ਐਪਸ ਅਤੇ ਸਾਈਟਾਂ ਦੇ ਵਿਕਾਸ ਨੂੰ ਕਿੱਕਸਟਾਰਟ ਕਰਨ ਲਈ ਤਿਆਰ ਕੀਤੀ ਗਈ ਹੈ।
ਇਸ ਵਿੱਚ ਟਾਈਪੋਗ੍ਰਾਫੀ, ਫਾਰਮ, ਬਟਨ, ਟੇਬਲ, ਗਰਿੱਡ, ਨੈਵੀਗੇਸ਼ਨ ਅਤੇ ਹੋਰ ਲਈ ਬੇਸ CSS ਅਤੇ HTML ਸ਼ਾਮਲ ਹਨ।

ਨੀਰਡ ਚੇਤਾਵਨੀ: ਬੂਟਸਟਰੈਪ ਘੱਟ ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ ਅਤੇ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਧਿਆਨ ਵਿੱਚ ਰੱਖਦੇ ਹੋਏ ਗੇਟ ਤੋਂ ਬਾਹਰ ਕੰਮ ਕਰਨ ਲਈ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ।

CSS ਨੂੰ ਹੌਟਲਿੰਕ ਕਰੋ

ਸਭ ਤੋਂ ਤੇਜ਼ ਅਤੇ ਆਸਾਨ ਸ਼ੁਰੂਆਤ ਲਈ, ਬਸ ਇਸ ਸਨਿੱਪਟ ਨੂੰ ਆਪਣੇ ਵੈਬਪੇਜ ਵਿੱਚ ਕਾਪੀ ਕਰੋ।

ਇਸ ਦੀ ਵਰਤੋਂ ਘੱਟ ਨਾਲ ਕਰੋ

ਘੱਟ ਵਰਤਣ ਦੇ ਇੱਕ ਪ੍ਰਸ਼ੰਸਕ? ਕੋਈ ਸਮੱਸਿਆ ਨਹੀਂ, ਸਿਰਫ ਰੇਪੋ ਨੂੰ ਕਲੋਨ ਕਰੋ ਅਤੇ ਇਹ ਲਾਈਨਾਂ ਜੋੜੋ:

GitHub 'ਤੇ ਫੋਰਕ

Github 'ਤੇ ਅਧਿਕਾਰਤ ਬੂਟਸਟਰੈਪ ਰੈਪੋ ਨਾਲ ਡਾਉਨਲੋਡ, ਫੋਰਕ, ਪੁੱਲ, ਫਾਈਲ ਮੁੱਦੇ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ।

GitHub 'ਤੇ ਬੂਟਸਟਰੈਪ »

ਵਰਤਮਾਨ ਵਿੱਚ v1.3.0

ਬੂਟਸਟਰੈਪ ਸੰਖੇਪ ਇਤਿਹਾਸ, ਬ੍ਰਾਊਜ਼ਰ ਸਹਾਇਤਾ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਬਾਰੇ

ਇਤਿਹਾਸ

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

dev.twitter.com 'ਤੇ ਹੋਰ ਪੜ੍ਹੋ ›

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

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

Chrome, Safari, Internet Explorer, ਅਤੇ Firefox ਵਿੱਚ ਟੈਸਟ ਕੀਤਾ ਅਤੇ ਸਮਰਥਿਤ ਹੈ
  • ਨਵੀਨਤਮ ਸਫਾਰੀ
  • ਨਵੀਨਤਮ ਗੂਗਲ ਕਰੋਮ
  • ਫਾਇਰਫਾਕਸ 4+
  • ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 7+
  • ਓਪੇਰਾ 11

ਕੀ ਸ਼ਾਮਲ ਹੈ

ਬੂਟਸਟਰੈਪ ਕੰਪਾਇਲ ਕੀਤੇ CSS, ਅਨਕੰਪਾਈਲਡ, ਅਤੇ ਉਦਾਹਰਨ ਟੈਂਪਲੇਟਸ ਨਾਲ ਪੂਰਾ ਹੁੰਦਾ ਹੈ।

ਤੁਰੰਤ-ਸ਼ੁਰੂ ਉਦਾਹਰਨ

ਕੁਝ ਤੇਜ਼ ਟੈਂਪਲੇਟਾਂ ਦੀ ਲੋੜ ਹੈ? ਇਹਨਾਂ ਬੁਨਿਆਦੀ ਉਦਾਹਰਣਾਂ ਨੂੰ ਦੇਖੋ ਜੋ ਅਸੀਂ ਇਕੱਠੇ ਰੱਖੇ ਹਨ:

  • ਹੀਰੋ ਯੂਨਿਟ ਦੇ ਨਾਲ ਸਧਾਰਨ ਤਿੰਨ-ਕਾਲਮ ਖਾਕਾ
  • ਸਥਿਰ ਸਾਈਡਬਾਰ ਦੇ ਨਾਲ ਤਰਲ ਖਾਕਾ
  • ਐਪਸ ਲਈ ਸਧਾਰਨ ਲਟਕਣ ਵਾਲਾ ਕੰਟੇਨਰ

ਗਰਿੱਡ ਸਿਸਟਮ ਸਟੈਂਡਰਡ 940px ਨੂੰ ਰੌਕ ਕਰੋ ਜਾਂ ਆਪਣਾ ਰੋਲ ਕਰੋ

ਪੂਰਵ-ਨਿਰਧਾਰਤ ਗਰਿੱਡ

ਬੂਟਸਟਰੈਪ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਪ੍ਰਦਾਨ ਕੀਤਾ ਡਿਫੌਲਟ ਗਰਿੱਡ ਸਿਸਟਮ ਇੱਕ 940px ਚੌੜਾ 16-ਕਾਲਮ ਗਰਿੱਡ ਹੈ। ਇਹ ਪ੍ਰਸਿੱਧ 960 ਗਰਿੱਡ ਸਿਸਟਮ ਦਾ ਸੁਆਦ ਹੈ, ਪਰ ਖੱਬੇ ਅਤੇ ਸੱਜੇ ਪਾਸੇ ਵਾਧੂ ਹਾਸ਼ੀਏ/ਪੈਡਿੰਗ ਤੋਂ ਬਿਨਾਂ।

ਗਰਿੱਡ ਮਾਰਕਅੱਪ ਦੀ ਉਦਾਹਰਨ

ਜਿਵੇਂ ਕਿ ਇੱਥੇ ਦਿਖਾਇਆ ਗਿਆ ਹੈ, ਇੱਕ ਬੁਨਿਆਦੀ ਖਾਕਾ ਦੋ "ਕਾਲਮਾਂ" ਨਾਲ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ, ਹਰ ਇੱਕ 16 ਬੁਨਿਆਦੀ ਕਾਲਮਾਂ ਦੀ ਇੱਕ ਸੰਖਿਆ ਨੂੰ ਫੈਲਾਉਂਦਾ ਹੈ ਜੋ ਅਸੀਂ ਸਾਡੇ ਗਰਿੱਡ ਸਿਸਟਮ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਹੈ। ਹੋਰ ਭਿੰਨਤਾਵਾਂ ਲਈ ਹੇਠਾਂ ਦਿੱਤੀਆਂ ਉਦਾਹਰਣਾਂ ਦੇਖੋ।

  1. <div ਕਲਾਸ = "ਕਤਾਰ" > 
  2.   <div ਕਲਾਸ = "span6" > 
  3.     ...
  4.   </div>
  5.   <div ਕਲਾਸ = "span10" > 
  6.     ...
  7.   </div>
  8. </div>
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
3
3
3
3
3
1
4
4
4
4
1/3
1/3
1/3
1/3
2/3
4
6
6
8
8
5
11
16

ਕਾਲਮਾਂ ਦੀ ਔਫਸੈਟਿੰਗ

4
8 ਆਫਸੈੱਟ 4
1/3 ਔਫਸੈੱਟ 2/3s
4 ਆਫਸੈੱਟ 4
4 ਆਫਸੈੱਟ 4
5 ਆਫਸੈੱਟ 3
5 ਆਫਸੈੱਟ 3
10 ਆਫਸੈੱਟ 6

ਨੇਸਟਿੰਗ ਕਾਲਮ

ਜੇਕਰ ਤੁਹਾਨੂੰ .rowਇੱਕ ਮੌਜੂਦਾ ਕਾਲਮ ਦੇ ਅੰਦਰ ਇੱਕ ਬਣਾ ਕੇ ਆਪਣੀ ਸਮਗਰੀ ਨੂੰ ਨੇਸਟ ਕਰੋ।

ਨੇਸਟਡ ਕਾਲਮਾਂ ਦੀ ਉਦਾਹਰਨ

ਕਾਲਮ ਦਾ ਪੱਧਰ 1
ਪੱਧਰ 2
ਪੱਧਰ 2 
  1. <div ਕਲਾਸ = "ਕਤਾਰ" > 
  2.   <div ਕਲਾਸ = "span12" > 
  3.     ਕਾਲਮ ਦਾ ਪੱਧਰ 1
  4.     <div ਕਲਾਸ = "ਕਤਾਰ" > 
  5.       <div ਕਲਾਸ = "span6" > 
  6.         ਪੱਧਰ 2
  7.       </div>
  8.       <div ਕਲਾਸ = "span6" > 
  9.         ਪੱਧਰ 2
  10.       </div>
  11.     </div>
  12.   </div>
  13. </div>

ਆਪਣਾ ਖੁਦ ਦਾ ਗਰਿੱਡ ਰੋਲ ਕਰੋ

ਪੂਰਵ-ਨਿਰਧਾਰਤ 940px ਗਰਿੱਡ ਸਿਸਟਮ ਨੂੰ ਕਸਟਮਾਈਜ਼ ਕਰਨ ਲਈ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਬਿਲਟ-ਮੁੱਠੀ ਵੇਰੀਏਬਲ ਹਨ। ਥੋੜ੍ਹੇ ਜਿਹੇ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਦੇ ਨਾਲ, ਤੁਸੀਂ ਕਾਲਮਾਂ ਦੇ ਆਕਾਰ, ਉਹਨਾਂ ਦੇ ਗਟਰਾਂ ਅਤੇ ਉਹ ਕੰਟੇਨਰ ਜਿਸ ਵਿੱਚ ਉਹ ਰਹਿੰਦੇ ਹਨ ਨੂੰ ਸੰਸ਼ੋਧਿਤ ਕਰ ਸਕਦੇ ਹੋ।

ਗਰਿੱਡ ਦੇ ਅੰਦਰ

ਗਰਿੱਡ ਸਿਸਟਮ ਨੂੰ ਸੋਧਣ ਲਈ ਲੋੜੀਂਦੇ ਵੇਰੀਏਬਲ ਵਰਤਮਾਨ ਵਿੱਚ ਸਾਰੇ ਵਿੱਚ ਰਹਿੰਦੇ ਹਨ variables.less।

ਵੇਰੀਏਬਲ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਮੁੱਲ ਵਰਣਨ
@gridColumns 16 ਗਰਿੱਡ ਦੇ ਅੰਦਰ ਕਾਲਮਾਂ ਦੀ ਗਿਣਤੀ
@gridColumnWidth 40px ਗਰਿੱਡ ਦੇ ਅੰਦਰ ਹਰੇਕ ਕਾਲਮ ਦੀ ਚੌੜਾਈ
@gridGutterWidth 20px ਹਰੇਕ ਕਾਲਮ ਦੇ ਵਿਚਕਾਰ ਨੈਗੇਟਿਵ ਸਪੇਸ
@siteWidth ਸਾਰੇ ਕਾਲਮਾਂ ਅਤੇ ਗਟਰਾਂ ਦਾ ਗਣਿਤ ਜੋੜ ਅਸੀਂ ਕਾਲਮਾਂ ਅਤੇ ਗਟਰਾਂ ਦੀ ਗਿਣਤੀ ਨੂੰ ਗਿਣਨ ਅਤੇ .fixed-container()ਮਿਕਸਿਨ ਦੀ ਚੌੜਾਈ ਨੂੰ ਸੈੱਟ ਕਰਨ ਲਈ ਕੁਝ ਬੁਨਿਆਦੀ ਮੇਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ।

ਹੁਣ ਅਨੁਕੂਲਿਤ ਕਰਨ ਲਈ

ਗਰਿੱਡ ਨੂੰ ਸੋਧਣ ਦਾ ਮਤਲਬ ਹੈ ਤਿੰਨ @grid-*ਵੇਰੀਏਬਲਾਂ ਨੂੰ ਬਦਲਣਾ ਅਤੇ ਘੱਟ ਫਾਈਲਾਂ ਨੂੰ ਦੁਬਾਰਾ ਕੰਪਾਇਲ ਕਰਨਾ।

ਬੂਟਸਟਰੈਪ 24 ਕਾਲਮਾਂ ਦੇ ਨਾਲ ਇੱਕ ਗਰਿੱਡ ਸਿਸਟਮ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਲੈਸ ਆਉਂਦਾ ਹੈ; ਡਿਫੌਲਟ ਸਿਰਫ 16 ਹੈ। ਇੱਥੇ ਦੱਸਿਆ ਗਿਆ ਹੈ ਕਿ ਤੁਹਾਡੇ ਗਰਿੱਡ ਵੇਰੀਏਬਲ 24-ਕਾਲਮ ਗਰਿੱਡ ਲਈ ਕਸਟਮਾਈਜ਼ ਕਿਵੇਂ ਦਿਖਾਈ ਦੇਣਗੇ।

  1. @gridColumns : 24 ;       
  2. @gridColumnWidth : 20px ;   
  3. @gridGutterWidth : 20px ;

ਇੱਕ ਵਾਰ ਦੁਬਾਰਾ ਕੰਪਾਇਲ ਹੋ ਜਾਣ 'ਤੇ, ਤੁਸੀਂ ਸੈੱਟ ਹੋ ਜਾਵੋਗੇ!

ਵੈੱਬਪੰਨੇ ਬਣਾਉਣ ਲਈ ਲੇਆਉਟ ਬੇਸਿਕ ਟੈਂਪਲੇਟਸ

ਸਥਿਰ ਖਾਕਾ

ਪੂਰਵ-ਨਿਰਧਾਰਤ ਅਤੇ ਸਧਾਰਨ 940px-ਚੌੜਾ, ਸਿਰਫ਼ ਇੱਕ ਸਿੰਗਲ ਦੁਆਰਾ ਪ੍ਰਦਾਨ ਕੀਤੀ ਗਈ ਕਿਸੇ ਵੀ ਵੈਬਸਾਈਟ ਜਾਂ ਪੰਨੇ ਲਈ ਕੇਂਦਰਿਤ ਖਾਕਾ <div.container>।

  1. <body>
  2.   <div ਕਲਾਸ = "ਕੰਟੇਨਰ" > 
  3.     ...
  4.   </div>
  5. </body>

ਤਰਲ ਖਾਕਾ

ਘੱਟੋ-ਘੱਟ ਅਤੇ ਅਧਿਕਤਮ-ਚੌੜਾਈ ਅਤੇ ਖੱਬੇ-ਹੱਥ ਸਾਈਡਬਾਰ ਦੇ ਨਾਲ ਇੱਕ ਵਿਕਲਪਕ, ਲਚਕਦਾਰ ਤਰਲ ਪੰਨਾ ਬਣਤਰ। ਐਪਾਂ ਅਤੇ ਦਸਤਾਵੇਜ਼ਾਂ ਲਈ ਵਧੀਆ।

  1. <body>
  2.   <div ਕਲਾਸ = "ਕੰਟੇਨਰ-ਤਰਲ" > 
  3.     <div ਕਲਾਸ = "ਸਾਈਡਬਾਰ" > 
  4.       ...
  5.     </div>
  6.     <div ਕਲਾਸ = "ਸਮੱਗਰੀ" > 
  7.       ...
  8.     </div>
  9.   </div>
  10. </body>

ਟਾਈਪੋਗ੍ਰਾਫੀ ਸਿਰਲੇਖ, ਪੈਰੇ, ਸੂਚੀਆਂ, ਅਤੇ ਹੋਰ ਇਨਲਾਈਨ ਕਿਸਮ ਦੇ ਤੱਤ

ਸਿਰਲੇਖ ਅਤੇ ਕਾਪੀ

ਤੁਹਾਡੇ ਵੈਬਪੰਨਿਆਂ ਨੂੰ ਢਾਂਚਾ ਬਣਾਉਣ ਲਈ ਇੱਕ ਮਿਆਰੀ ਟਾਈਪੋਗ੍ਰਾਫਿਕ ਲੜੀ।

ਸਮੁੱਚੀ ਟਾਈਪੋਗ੍ਰਾਫਿਕ ਗਰਿੱਡ ਸਾਡੀ variables.less ਫਾਈਲ ਵਿੱਚ ਦੋ ਘੱਟ ਵੇਰੀਏਬਲਾਂ 'ਤੇ ਅਧਾਰਤ ਹੈ: @basefontਅਤੇ @baseline. ਪਹਿਲਾ ਹੈ ਬੇਸ ਫੌਂਟ-ਸਾਈਜ਼ ਜੋ ਕਿ ਭਰ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਦੂਜਾ ਬੇਸ ਲਾਈਨ-ਉਚਾਈ ਹੈ।

ਅਸੀਂ ਉਹਨਾਂ ਵੇਰੀਏਬਲਾਂ, ਅਤੇ ਕੁਝ ਗਣਿਤ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਸਾਡੀਆਂ ਸਾਰੀਆਂ ਕਿਸਮਾਂ ਅਤੇ ਹੋਰਾਂ ਦੇ ਹਾਸ਼ੀਏ, ਪੈਡਿੰਗ ਅਤੇ ਲਾਈਨ-ਹਾਈਟਸ ਬਣਾਉਣ ਲਈ।

h1. ਸਿਰਲੇਖ 1

h2. ਸਿਰਲੇਖ 2

h3. ਸਿਰਲੇਖ 3

h4. ਸਿਰਲੇਖ 4

h5. ਸਿਰਲੇਖ 5
h6. ਸਿਰਲੇਖ 6

ਉਦਾਹਰਨ ਪੈਰਾ

ਨੱਲਮ ਕਵਿਸ ਰਿਸਸ ਈਗੇਟ ਉਰਨਾ ਮੋਲਿਸ ਓਰਨਾਰੇ ਵੇਲ ਈਯੂ ਲਿਓ. Cum sociis natoque penatibus et magnis dis parturient Montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

ਉਦਾਹਰਨ ਸਿਰਲੇਖ ਵਿੱਚ ਉਪ-ਸਿਰਲੇਖ ਹੈ...

ਫੁਟਕਲ ਤੱਤ

ਜ਼ੋਰ, ਪਤੇ, ਅਤੇ ਸੰਖੇਪ ਰੂਪਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

<strong> <em> <address> <abbr>

ਕਦੋਂ ਵਰਤਣਾ ਹੈ

ਜ਼ੋਰ ਟੈਗਸ ( <strong>ਅਤੇ <em>) ਦੀ ਵਰਤੋਂ ਕਿਸੇ ਸ਼ਬਦ ਜਾਂ ਵਾਕਾਂਸ਼ ਦੀ ਇਸਦੇ ਆਲੇ ਦੁਆਲੇ ਦੀ ਕਾਪੀ ਦੇ ਸਬੰਧ ਵਿੱਚ ਵਾਧੂ ਮਹੱਤਤਾ ਜਾਂ ਜ਼ੋਰ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਕੀਤੀ ਜਾਣੀ ਚਾਹੀਦੀ ਹੈ। <strong>ਮਹੱਤਤਾ ਅਤੇ ਤਣਾਅ<em> ਦੇ ਜ਼ੋਰ ਲਈ ਵਰਤੋਂ ।

ਇੱਕ ਪੈਰੇ ਵਿੱਚ ਜ਼ੋਰ

ਫਿਊਸ ਡੈਪੀਬਸ , ਟੇਲਸ ਏਸੀ ਕਰਸਸ ਕੋਮੋਡੋ , ਟੋਰਟਰ ਮੌਰੀਸ ਕੰਡੀਮੈਂਟਮ ਨਿਭ , ਯੂਟ ਫਰਮੈਂਟਮ ਮਾਸਾ ਜਸਟ ਅਮੇਟ ਰਿਸਸ । Maecenas faucibus mollis interdum. ਨੱਲਾ ਵਿਟਾਏ ਇਲੀਟ ਲਿਬੇਰੋ, ਇੱਕ ਫਰੇਟਰਾ ਔਗ।

ਨੋਟ:<b> HTML5 ਵਿੱਚ ਵਰਤਣਾ ਅਤੇ ਟੈਗ ਕਰਨਾ ਅਜੇ ਵੀ ਠੀਕ ਹੈ <i>ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਕ੍ਰਮਵਾਰ ਬੋਲਡ ਅਤੇ ਇਟਾਲਿਕ ਸਟਾਈਲ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ (ਹਾਲਾਂਕਿ ਜੇਕਰ ਕੋਈ ਹੋਰ ਸਿਮੈਂਟਿਕ ਤੱਤ ਹੈ, ਤਾਂ ਇਸਦੀ ਵਰਤੋਂ ਕਰੋ)। <b>ਵਾਧੂ ਮਹੱਤਵ ਦੱਸੇ ਬਿਨਾਂ ਸ਼ਬਦਾਂ ਜਾਂ ਵਾਕਾਂਸ਼ਾਂ ਨੂੰ ਉਜਾਗਰ ਕਰਨ ਲਈ ਹੈ, ਜਦੋਂ <i>ਕਿ ਜ਼ਿਆਦਾਤਰ ਆਵਾਜ਼, ਤਕਨੀਕੀ ਸ਼ਬਦਾਂ ਆਦਿ ਲਈ ਹੈ।

ਪਤੇ

ਤੱਤ ਦੀ <address>ਵਰਤੋਂ ਇਸਦੇ ਨਜ਼ਦੀਕੀ ਪੂਰਵਜ, ਜਾਂ ਕੰਮ ਦੇ ਪੂਰੇ ਸਰੀਰ ਲਈ ਸੰਪਰਕ ਜਾਣਕਾਰੀ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇੱਥੇ ਦੋ ਉਦਾਹਰਣਾਂ ਹਨ ਕਿ ਇਸਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
ਪੂਰਾ ਨਾਮ
[email protected]

ਨੋਟ: ਸਮਗਰੀ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਢਾਂਚਾ ਦੇਣ ਲਈ ਇੱਕ ਵਿੱਚ ਹਰੇਕ ਲਾਈਨ ਨੂੰ <address>ਇੱਕ ਲਾਈਨ-ਬ੍ਰੇਕ ( <br />) ਨਾਲ ਖਤਮ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਜਾਂ ਇੱਕ ਬਲਾਕ-ਪੱਧਰ ਦੇ ਟੈਗ (ਉਦਾਹਰਨ ਲਈ, <p>) ਵਿੱਚ ਲਪੇਟਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।

ਸੰਖੇਪ ਰੂਪ

ਸੰਖੇਪ ਅਤੇ ਸੰਖੇਪ ਸ਼ਬਦਾਂ ਲਈ, <abbr>ਟੈਗ ( HTML5<acronym> ਵਿੱਚ ਬਰਤਰਫ਼ ਕੀਤਾ ਗਿਆ ਹੈ ) ਦੀ ਵਰਤੋਂ ਕਰੋ। ਟੈਗ ਦੇ ਅੰਦਰ ਸ਼ਾਰਟਹੈਂਡ ਫਾਰਮ ਪਾਓ ਅਤੇ ਪੂਰੇ ਨਾਮ ਲਈ ਇੱਕ ਸਿਰਲੇਖ ਸੈੱਟ ਕਰੋ।

ਬਲਾਕਕੋਟ

<blockquote> <p> <small>

ਹਵਾਲਾ ਕਿਵੇਂ ਦੇਣਾ ਹੈ

ਬਲਾਕਕੋਟ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ, <blockquote>ਆਲੇ ਦੁਆਲੇ ਲਪੇਟੋ <p>ਅਤੇ <small>ਟੈਗ ਕਰੋ। ਆਪਣੇ ਸਰੋਤ ਦਾ ਹਵਾਲਾ ਦੇਣ ਲਈ ਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰੋ <small>ਅਤੇ ਤੁਹਾਨੂੰ &mdash;ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਇੱਕ ਐਮ ਡੈਸ਼ ਮਿਲੇਗਾ।

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ ਪਜ਼ੂਏਰ ਈਰਾਟ ਏ ਐਂਟੀ ਵੇਨੇਨਾਟਿਸ ਡੈਪੀਬਸ ਪੋਸਯੂਰੇ ਵੇਲੀਟ ਐਲੀਕੇਟ।

ਡਾ. ਜੂਲੀਅਸ ਹਿਬਰਟ 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ ਪਜ਼ੂਏਰ ਈਰਾਟ ਏ ਐਂਟੀ ਵੇਨੇਨਾਟਿਸ ਡੈਪੀਬਸ ਪੋਸਯੂਰੇ ਵੇਲੀਟ ਐਲੀਕੇਟ। </p>
  3.   <small> ਡਾ. ਜੂਲੀਅਸ ਹਿਬਰਟ </small>
  4. </blockquote>

ਸੂਚੀਆਂ

ਬਿਨਾਂ ਕ੍ਰਮਬੱਧ<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • ਮਾਸਾ ਤੇ ਪੂਰਨ ਅੰਕ ਮੋਲੇਸਟੀ ਲੋਰੇਮ
  • ਪ੍ਰੀਟਿਅਮ ਨਿਸਲ ਐਲੀਕੇਟ ਵਿੱਚ ਫੈਸਿਲਿਸਿਸ
  • ਨੂਲਾ ਵੁਲਟਪਟ ਅਲੀਕਮ ਵੇਲੀਟ
    • ਫੇਸੇਲਸ ਆਈਕੁਲਿਸ ਨੇਕ
    • ਪਰਸ ਸੋਡੇਲਸ ਅਲਟ੍ਰੀਸਿਸ
    • ਵੈਸਟੀਬੁਲਮ ਲਾਓਰੇਟ ਪੋਰਟਟੀਟਰ ਸੇਮ
    • ਏਸੀ ਟ੍ਰਿਸਟਿਕ ਲਿਬੇਰੋ ਵੋਲਟਪੈਟ 'ਤੇ
  • Faucibus porta lacus fringilla vel
  • ਏਨੇਨ ਬੈਠ ਅਮੇਤ ਏਰਤ ਨੰਕ
  • Eget porttitor lorem

ਅਨਸਟਾਇਲਡ<ul.unstyled>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • ਮਾਸਾ ਤੇ ਪੂਰਨ ਅੰਕ ਮੋਲੇਸਟੀ ਲੋਰੇਮ
  • ਪ੍ਰੀਟਿਅਮ ਨਿਸਲ ਐਲੀਕੇਟ ਵਿੱਚ ਫੈਸਿਲਿਸਿਸ
  • ਨੂਲਾ ਵੁਲਟਪਟ ਅਲੀਕਮ ਵੇਲੀਟ
    • ਫੇਸੇਲਸ ਆਈਕੁਲਿਸ ਨੇਕ
    • ਪਰਸ ਸੋਡੇਲਸ ਅਲਟ੍ਰੀਸਿਸ
    • ਵੈਸਟੀਬੁਲਮ ਲਾਓਰੇਟ ਪੋਰਟਟੀਟਰ ਸੇਮ
    • ਏਸੀ ਟ੍ਰਿਸਟਿਕ ਲਿਬੇਰੋ ਵੋਲਟਪੈਟ 'ਤੇ
  • Faucibus porta lacus fringilla vel
  • ਏਨੇਨ ਬੈਠ ਅਮੇਤ ਏਰਤ ਨੰਕ
  • Eget porttitor lorem

ਆਰਡਰ ਕੀਤਾ<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. ਮਾਸਾ ਤੇ ਪੂਰਨ ਅੰਕ ਮੋਲੇਸਟੀ ਲੋਰੇਮ
  4. ਪ੍ਰੀਟਿਅਮ ਨਿਸਲ ਐਲੀਕੇਟ ਵਿੱਚ ਫੈਸਿਲਿਸਿਸ
  5. ਨੂਲਾ ਵੁਲਟਪਟ ਅਲੀਕਮ ਵੇਲੀਟ
  6. Faucibus porta lacus fringilla vel
  7. ਏਨੇਨ ਬੈਠ ਅਮੇਤ ਏਰਤ ਨੰਕ
  8. Eget porttitor lorem

ਵਰਣਨdl

ਵਰਣਨ ਸੂਚੀਆਂ
ਇੱਕ ਵਰਣਨ ਸੂਚੀ ਸ਼ਰਤਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਸੰਪੂਰਨ ਹੈ।
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
ਮਲੇਸੁਆਡਾ ਪੋਰਟਾ
Etiam porta sem malesuada magna mollis euismod.

ਕੋਡ

<code> <pre>

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

ਕੋਡ ਪੇਸ਼ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ

ਕੋਡ, ਬਲਾਕ ਦੇ ਜਾਂ ਸਿਰਫ਼ ਸਨਿੱਪਟ ਇਨਲਾਈਨ, ਨੂੰ ਸਿਰਫ਼ ਸਹੀ ਟੈਗ ਵਿੱਚ ਲਪੇਟ ਕੇ ਸਟਾਈਲ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਕਈ ਲਾਈਨਾਂ ਵਿੱਚ ਫੈਲੇ ਕੋਡ ਦੇ ਬਲਾਕਾਂ ਲਈ, <pre>ਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਨਲਾਈਨ ਕੋਡ ਲਈ, <code>ਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਤੱਤ ਨਤੀਜਾ
<code> <html>ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਟੈਕਸਟ ਦੀ ਇੱਕ ਲਾਈਨ ਵਿੱਚ, ਤੁਹਾਡਾ ਲਪੇਟਿਆ ਕੋਡ ਇਸ ਤੱਤ ਵਰਗਾ ਦਿਖਾਈ ਦੇਵੇਗਾ ।
<pre> 
<div>
  <h1>ਸਿਰਲੇਖ</h1>
  <p>ਇੱਥੇ ਕੁਝ...</p>
</div>

ਨੋਟ:<pre> ਟੈਗਾਂ ਦੇ ਅੰਦਰ ਕੋਡ ਨੂੰ ਜਿੰਨਾ ਸੰਭਵ ਹੋ ਸਕੇ ਖੱਬੇ ਪਾਸੇ ਰੱਖਣਾ ਯਕੀਨੀ ਬਣਾਓ ; ਇਹ ਸਾਰੀਆਂ ਟੈਬਾਂ ਨੂੰ ਰੈਂਡਰ ਕਰੇਗਾ।
<pre class="prettyprint">

google-code-prettify ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, ਤੁਹਾਡੇ ਕੋਡ ਦੇ ਬਲਾਕਾਂ ਨੂੰ ਥੋੜੀ ਵੱਖਰੀ ਵਿਜ਼ੂਅਲ ਸ਼ੈਲੀ ਅਤੇ ਆਟੋਮੈਟਿਕ ਸਿੰਟੈਕਸ ਹਾਈਲਾਈਟਿੰਗ ਮਿਲਦੀ ਹੈ।

<div> <h1> ਸਿਰਲੇਖ </h1> <p> ਇੱਥੇ ਕੁਝ ਹੈ... </p> </div>

google-code-prettify ਨੂੰ ਡਾਊਨਲੋਡ ਕਰੋ ਅਤੇ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ ਲਈ ਰੀਡਮੀ ਦੇਖੋ।

ਇਨਲਾਈਨ ਲੇਬਲ

<span class="label">

ਆਪਣੇ ਸਰੀਰ ਦੇ ਪਾਠ ਵਿੱਚ ਕਿਸੇ ਵੀ ਵਾਕਾਂਸ਼ ਵੱਲ ਧਿਆਨ ਦਿਓ ਜਾਂ ਫਲੈਗ ਕਰੋ।

ਕਿਸੇ ਵੀ ਚੀਜ਼ ਨੂੰ ਲੇਬਲ ਕਰੋ

ਕਦੇ ਉਹਨਾਂ ਵਿੱਚੋਂ ਇੱਕ ਦੀ ਲੋੜ ਹੈ ਨਵੇਂ ਨਵੇਂ! ਜਾਂ ਕੋਡ ਲਿਖਣ ਵੇਲੇ ਮਹੱਤਵਪੂਰਨ ਝੰਡੇ? ਖੈਰ, ਹੁਣ ਤੁਹਾਡੇ ਕੋਲ ਹੈ। ਇੱਥੇ ਮੂਲ ਰੂਪ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ ਹੈ:

ਲੇਬਲ ਨਤੀਜਾ
<span class="label">Default</span> ਡਿਫਾਲਟ
<span class="label success">New</span> ਨਵਾਂ
<span class="label warning">Warning</span> ਚੇਤਾਵਨੀ
<span class="label important">Important</span> ਮਹੱਤਵਪੂਰਨ
<span class="label notice">Notice</span> ਨੋਟਿਸ

ਮੀਡੀਆ ਤਸਵੀਰਾਂ ਅਤੇ ਵੀਡੀਓ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ

ਮੀਡੀਆ ਗਰਿੱਡ

ਘੱਟ HTML ਫੁਟਪ੍ਰਿੰਟ ਅਤੇ ਨਿਊਨਤਮ ਸਟਾਈਲ ਵਾਲੇ ਪੰਨਿਆਂ 'ਤੇ ਵੱਖ-ਵੱਖ ਆਕਾਰਾਂ ਦੇ ਥੰਬਨੇਲ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੋ।

ਉਦਾਹਰਨ ਥੰਬਨੇਲ

ਵਿਚਲੇ ਥੰਬਨੇਲ .media-gridਕਿਸੇ ਵੀ ਆਕਾਰ ਦੇ ਹੋ ਸਕਦੇ ਹਨ, ਪਰ ਉਹ ਬਿਲਟ-ਇਨ ਬੂਟਸਟਰੈਪ ਗਰਿੱਡ ਸਿਸਟਮ ਨਾਲ ਸਿੱਧੇ ਮੈਪ ਕੀਤੇ ਜਾਣ 'ਤੇ ਸਭ ਤੋਂ ਵਧੀਆ ਕੰਮ ਕਰਦੇ ਹਨ। .span290, 210, ਅਤੇ 330 ਵਰਗੀਆਂ ਚਿੱਤਰ ਚੌੜਾਈ , .span4, ਅਤੇ .span6ਕਾਲਮ ਦੇ ਆਕਾਰ ਦੇ ਬਰਾਬਰ ਕਰਨ ਲਈ ਪੈਡਿੰਗ ਦੇ ਕੁਝ ਪਿਕਸਲ ਦੇ ਨਾਲ ਜੋੜਦੀ ਹੈ।

ਵੱਡਾ

ਦਰਮਿਆਨਾ

ਛੋਟਾ

ਉਹਨਾਂ ਨੂੰ ਕੋਡਿੰਗ

ਮੀਡੀਆ ਗਰਿੱਡ ਮਾਰਕਅਪ ਵਾਲੇ ਪਾਸੇ ਵਰਤਣ ਲਈ ਆਸਾਨ ਅਤੇ ਸਧਾਰਨ ਹਨ। ਉਹਨਾਂ ਦੇ ਮਾਪ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸ਼ਾਮਲ ਚਿੱਤਰਾਂ ਦੇ ਆਕਾਰ 'ਤੇ ਅਧਾਰਤ ਹਨ।

  1. <ul class = "ਮੀਡੀਆ-ਗਰਿੱਡ" > 
  2.   <li>
  3.     <a href = "#" > 
  4.       <img class = "ਥੰਬਨੇਲ" src = "https://placehold.it/330x230" alt = "" >   
  5.     </a>
  6.   </li>
  7.   <li>
  8.     <a href = "#" > 
  9.       <img class = "ਥੰਬਨੇਲ" src = "https://placehold.it/330x230" alt = "" >   
  10.     </a>
  11.   </li>
  12. </ul>

ਟੇਬਲਸ ਲਈ, ਤੁਸੀਂ ਇਸਦਾ ਅਨੁਮਾਨ ਲਗਾਇਆ ਹੈ, ਸਾਰਣੀਬੱਧ ਡੇਟਾ

ਬਿਲਡਿੰਗ ਟੇਬਲ

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

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

ਆਪਣੇ ਕਾਲਮ ਸਿਰਲੇਖਾਂ ਨੂੰ ਹਮੇਸ਼ਾ <thead>ਇਸ ਤਰ੍ਹਾਂ ਲਪੇਟੋ ਕਿ ਲੜੀ <thead>> <tr>> ਹੋਵੇ <th>।

ਕਾਲਮ ਸਿਰਲੇਖਾਂ ਦੇ ਸਮਾਨ, ਤੁਹਾਡੀ ਸਾਰੀ ਸਾਰਣੀ ਦੀ ਮੁੱਖ ਸਮੱਗਰੀ ਨੂੰ ਇੱਕ ਵਿੱਚ ਲਪੇਟਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ <tbody>ਤਾਂ ਕਿ ਤੁਹਾਡੀ ਲੜੀ <tbody>> <tr>> ਹੋਵੇ <td>।

ਉਦਾਹਰਨ: ਡਿਫੌਲਟ ਟੇਬਲ ਸਟਾਈਲ

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

# ਪਹਿਲਾ ਨਾਂ ਆਖਰੀ ਨਾਂਮ ਭਾਸ਼ਾ
1 ਕੁੱਝ ਇੱਕ ਅੰਗਰੇਜ਼ੀ
2 ਜੋ ਸਿਕਸ ਪੈਕ ਅੰਗਰੇਜ਼ੀ
3 ਸਟੂ ਦੰਦ ਕੋਡ 
  1. <ਟੇਬਲ>
  2.   ...
  3. </table>

ਉਦਾਹਰਨ: ਸੰਘਣਾ ਸਾਰਣੀ

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

# ਪਹਿਲਾ ਨਾਂ ਆਖਰੀ ਨਾਂਮ ਭਾਸ਼ਾ
1 ਕੁੱਝ ਇੱਕ ਅੰਗਰੇਜ਼ੀ
2 ਜੋ ਸਿਕਸ ਪੈਕ ਅੰਗਰੇਜ਼ੀ
3 ਸਟੂ ਦੰਦ ਕੋਡ

ਉਦਾਹਰਨ: ਬਾਰਡਰਡ ਟੇਬਲ

ਆਪਣੀਆਂ ਟੇਬਲਾਂ ਨੂੰ ਉਹਨਾਂ ਦੇ ਕੋਨਿਆਂ ਨੂੰ ਗੋਲ ਕਰਕੇ ਅਤੇ ਸਾਰੇ ਪਾਸਿਆਂ 'ਤੇ ਬਾਰਡਰ ਜੋੜ ਕੇ ਥੋੜ੍ਹਾ ਜਿਹਾ ਪਤਲਾ ਬਣਾਓ।

# ਪਹਿਲਾ ਨਾਂ ਆਖਰੀ ਨਾਂਮ ਭਾਸ਼ਾ
1 ਕੁੱਝ ਇੱਕ ਅੰਗਰੇਜ਼ੀ
2 ਜੋ ਸਿਕਸ ਪੈਕ ਅੰਗਰੇਜ਼ੀ
3 ਸਟੂ ਦੰਦ ਕੋਡ 
  1. <ਟੇਬਲ ਕਲਾਸ = "ਬਾਰਡਰਡ-ਟੇਬਲ" > 
  2.   ...
  3. </table>

ਉਦਾਹਰਨ: ਜ਼ੈਬਰਾ-ਧਾਰੀਦਾਰ

ਜ਼ੈਬਰਾ-ਸਟ੍ਰਿਪਿੰਗ ਜੋੜ ਕੇ ਆਪਣੀਆਂ ਟੇਬਲਾਂ ਨਾਲ ਥੋੜਾ ਜਿਹਾ ਫੈਂਸੀ ਪ੍ਰਾਪਤ ਕਰੋ—ਬੱਸ .zebra-stripedਕਲਾਸ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ।

# ਪਹਿਲਾ ਨਾਂ ਆਖਰੀ ਨਾਂਮ ਭਾਸ਼ਾ
1 ਕੁੱਝ ਇੱਕ ਅੰਗਰੇਜ਼ੀ
2 ਜੋ ਸਿਕਸ ਪੈਕ ਅੰਗਰੇਜ਼ੀ
3 ਸਟੂ ਦੰਦ ਕੋਡ
ਸਪੈਨ 4 ਕਾਲਮ
ਸਪੈਨ 2 ਕਾਲਮ ਸਪੈਨ 2 ਕਾਲਮ

ਨੋਟ: ਜ਼ੈਬਰਾ-ਸਟ੍ਰਿਪਿੰਗ ਇੱਕ ਪ੍ਰਗਤੀਸ਼ੀਲ ਸੁਧਾਰ ਹੈ ਜੋ IE8 ਅਤੇ ਹੇਠਾਂ ਵਾਲੇ ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਲਈ ਉਪਲਬਧ ਨਹੀਂ ਹੈ।

  1. <ਟੇਬਲ ਕਲਾਸ = "ਜ਼ੈਬਰਾ-ਸਟਰਿਪਡ" > 
  2.   ...
  3. </table>

ਉਦਾਹਰਨ: Zebra-ਧਾਰੀ ਵਾਲੇ w/ TableSorter.js

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

# ਪਹਿਲਾ ਨਾਂ ਆਖਰੀ ਨਾਂਮ ਭਾਸ਼ਾ
2 ਜੋ ਸਿਕਸ ਪੈਕ ਅੰਗਰੇਜ਼ੀ
3 ਸਟੂ ਦੰਦ ਕੋਡ
1 ਤੁਹਾਡਾ ਇੱਕ ਅੰਗਰੇਜ਼ੀ 
  1. <script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
  2. <ਸਕ੍ਰਿਪਟ > 
  3.   $ ( ਫੰਕਸ਼ਨ () { 
  4.     $ ( "ਟੇਬਲ#ਸੋਰਟਟੇਬਲ ਉਦਾਹਰਨ" )। ਟੇਬਲਸੌਰਟਰ ({ sortList : [[ 1 , 0 ]] });  
  5.   });
  6. </script>
  7. <ਟੇਬਲ ਕਲਾਸ = "ਜ਼ੈਬਰਾ-ਸਟਰਿਪਡ" > 
  8.   ...
  9. </table>

ਫਾਰਮ

ਪੂਰਵ-ਨਿਰਧਾਰਤ ਸ਼ੈਲੀਆਂ

ਸਾਰੇ ਫਾਰਮਾਂ ਨੂੰ ਪੜ੍ਹਨਯੋਗ ਅਤੇ ਸਕੇਲੇਬਲ ਤਰੀਕੇ ਨਾਲ ਪੇਸ਼ ਕਰਨ ਲਈ ਡਿਫੌਲਟ ਸ਼ੈਲੀਆਂ ਦਿੱਤੀਆਂ ਗਈਆਂ ਹਨ। ਸਟਾਈਲ ਟੈਕਸਟ ਇਨਪੁਟਸ, ਚੋਣ ਸੂਚੀਆਂ, ਟੈਕਸਟਰੇਅਸ, ਰੇਡੀਓ ਬਟਨਾਂ ਅਤੇ ਚੈਕਬਾਕਸਾਂ ਅਤੇ ਬਟਨਾਂ ਲਈ ਪ੍ਰਦਾਨ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ।

ਉਦਾਹਰਨ ਫਾਰਮ ਦੰਤਕਥਾ
ਇੱਥੇ ਕੁਝ ਮੁੱਲ
ਮਦਦ ਟੈਕਸਟ ਦਾ ਛੋਟਾ ਸਨਿੱਪਟ
ਸਫਲਤਾ!
ਰੁਹ ਰੋਹ!
ਉਦਾਹਰਨ ਫਾਰਮ ਦੰਤਕਥਾ
@
ਇੱਥੇ ਕੁਝ ਮਦਦ ਲਿਖਤ ਹੈ
ਉਦਾਹਰਨ ਫਾਰਮ ਦੰਤਕਥਾ
ਨੋਟ: ਲੇਬਲ ਬਹੁਤ ਵੱਡੇ ਕਲਿਕ ਖੇਤਰਾਂ ਅਤੇ ਵਧੇਰੇ ਉਪਯੋਗੀ ਫਾਰਮ ਲਈ ਸਾਰੇ ਵਿਕਲਪਾਂ ਨੂੰ ਘੇਰਦੇ ਹਨ।
ਨੂੰ ਸਾਰੇ ਸਮੇਂ ਪੈਸੀਫਿਕ ਸਟੈਂਡਰਡ ਟਾਈਮ (GMT -08:00) ਵਜੋਂ ਦਿਖਾਏ ਜਾਂਦੇ ਹਨ।
ਲੋੜ ਪੈਣ 'ਤੇ ਉਪਰੋਕਤ ਖੇਤਰ ਦਾ ਵਰਣਨ ਕਰਨ ਲਈ ਮਦਦ ਟੈਕਸਟ ਦਾ ਬਲਾਕ।
 

ਸਟੈਕਡ ਫਾਰਮ

ਆਪਣੇ ਫਾਰਮ ਦੇ HTML ਵਿੱਚ ਸ਼ਾਮਲ .form-stackedਕਰੋ ਅਤੇ ਤੁਹਾਡੇ ਕੋਲ ਉਹਨਾਂ ਦੇ ਖੱਬੇ ਪਾਸੇ ਦੀ ਬਜਾਏ ਉਹਨਾਂ ਦੇ ਖੇਤਰਾਂ ਦੇ ਉੱਪਰ ਲੇਬਲ ਹੋਣਗੇ। ਇਹ ਵਧੀਆ ਕੰਮ ਕਰਦਾ ਹੈ ਜੇਕਰ ਤੁਹਾਡੇ ਫਾਰਮ ਛੋਟੇ ਹਨ ਜਾਂ ਤੁਹਾਡੇ ਕੋਲ ਭਾਰੀ ਫਾਰਮਾਂ ਲਈ ਇਨਪੁਟਸ ਦੇ ਦੋ ਕਾਲਮ ਹਨ।

ਉਦਾਹਰਨ ਫਾਰਮ ਦੰਤਕਥਾ
ਉਦਾਹਰਨ ਫਾਰਮ ਦੰਤਕਥਾ
ਮਦਦ ਟੈਕਸਟ ਦਾ ਛੋਟਾ ਸਨਿੱਪਟ
ਨੋਟ: ਲੇਬਲ ਬਹੁਤ ਵੱਡੇ ਕਲਿਕ ਖੇਤਰਾਂ ਅਤੇ ਵਧੇਰੇ ਉਪਯੋਗੀ ਫਾਰਮ ਲਈ ਸਾਰੇ ਵਿਕਲਪਾਂ ਨੂੰ ਘੇਰਦੇ ਹਨ।
 

ਫਾਰਮ ਖੇਤਰ ਦੇ ਆਕਾਰ

ਆਪਣੇ ਮਾਰਕਅੱਪ ਵਿੱਚ ਸਿਰਫ਼ ਕੁਝ ਕਲਾਸਾਂ ਜੋੜ ਕੇ ਕਿਸੇ ਵੀ ਰੂਪ input, select, ਜਾਂ ਚੌੜਾਈ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ ।textarea

v1.3.0 ਤੱਕ, ਅਸੀਂ ਫਾਰਮ ਐਲੀਮੈਂਟਸ ਲਈ ਗਰਿੱਡ-ਅਧਾਰਿਤ ਆਕਾਰ ਦੀਆਂ ਕਲਾਸਾਂ ਨੂੰ ਜੋੜਿਆ ਹੈ। ਕਿਰਪਾ ਕਰਕੇ ਇਹਨਾਂ ਨੂੰ ਮੌਜੂਦਾ .mini, .smallਆਦਿ ਕਲਾਸਾਂ ਵਿੱਚ ਵਰਤੋ।

ਬਟਨ

ਇੱਕ ਕਨਵੈਨਸ਼ਨ ਦੇ ਰੂਪ ਵਿੱਚ, ਕਿਰਿਆਵਾਂ ਲਈ ਬਟਨ ਵਰਤੇ ਜਾਂਦੇ ਹਨ ਜਦੋਂ ਕਿ ਲਿੰਕ ਵਸਤੂਆਂ ਲਈ ਵਰਤੇ ਜਾਂਦੇ ਹਨ। ਉਦਾਹਰਨ ਲਈ, "ਡਾਊਨਲੋਡ" ਇੱਕ ਬਟਨ ਹੋ ਸਕਦਾ ਹੈ ਅਤੇ "ਹਾਲੀਆ ਸਰਗਰਮੀ" ਇੱਕ ਲਿੰਕ ਹੋ ਸਕਦਾ ਹੈ।

ਸਾਰੇ ਬਟਨ ਇੱਕ ਹਲਕੇ ਸਲੇਟੀ ਸ਼ੈਲੀ ਵਿੱਚ ਡਿਫੌਲਟ ਹੁੰਦੇ ਹਨ, ਪਰ ਵੱਖ-ਵੱਖ ਰੰਗਾਂ ਦੀਆਂ ਸ਼ੈਲੀਆਂ ਲਈ ਕਈ ਕਾਰਜਸ਼ੀਲ ਕਲਾਸਾਂ ਲਾਗੂ ਕੀਤੀਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ। ਇਹਨਾਂ ਕਲਾਸਾਂ ਵਿੱਚ ਇੱਕ ਨੀਲੀ .primaryਸ਼੍ਰੇਣੀ, ਇੱਕ ਹਲਕਾ-ਨੀਲਾ .infoਵਰਗ, ਇੱਕ ਹਰਾ .successਵਰਗ ਅਤੇ ਇੱਕ ਲਾਲ .dangerਸ਼੍ਰੇਣੀ ਸ਼ਾਮਲ ਹੈ।

ਉਦਾਹਰਨ ਬਟਨ

ਬਟਨ ਸਟਾਈਲ ਨੂੰ ਲਾਗੂ ਕੀਤੇ ਨਾਲ ਕਿਸੇ ਵੀ ਚੀਜ਼ 'ਤੇ .btnਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ. ਆਮ ਤੌਰ 'ਤੇ ਤੁਸੀਂ ਇਹਨਾਂ ਨੂੰ ਸਿਰਫ਼ <a>, <button>, ਅਤੇ ਚੁਣੇ ਹੋਏ <input>ਤੱਤਾਂ 'ਤੇ ਲਾਗੂ ਕਰਨਾ ਚਾਹੋਗੇ। ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:

       

ਬਦਲਵੇਂ ਆਕਾਰ

ਫੈਨਸੀ ਵੱਡੇ ਜਾਂ ਛੋਟੇ ਬਟਨ? ਇਸ 'ਤੇ ਹੈ!

ਮੁੱਢਲੀ ਕਾਰਵਾਈ ਕਾਰਵਾਈ
ਮੁੱਢਲੀ ਕਾਰਵਾਈ ਕਾਰਵਾਈ

ਅਪਾਹਜ ਸਥਿਤੀ

ਉਹਨਾਂ ਬਟਨਾਂ ਲਈ ਜੋ ਕਿਰਿਆਸ਼ੀਲ ਨਹੀਂ ਹਨ ਜਾਂ ਕਿਸੇ ਕਾਰਨ ਕਰਕੇ ਐਪ ਦੁਆਰਾ ਅਸਮਰੱਥ ਹਨ, ਅਯੋਗ ਸਥਿਤੀ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ .disabledਲਿੰਕਾਂ ਅਤੇ ਤੱਤਾਂ :disabledਲਈ ਹੈ।<button>

ਲਿੰਕ

ਮੁੱਢਲੀ ਕਾਰਵਾਈ ਕਾਰਵਾਈ

ਬਟਨ

 

ਸਫਲਤਾ, ਚੇਤਾਵਨੀ, ਗਲਤੀ, ਅਤੇ ਜਾਣਕਾਰੀ ਸੁਨੇਹਿਆਂ ਲਈ ਚੇਤਾਵਨੀਆਂ ਅਤੇ ਗਲਤੀਆਂ ਦੀਆਂ ਸ਼ੈਲੀਆਂ

ਬੁਨਿਆਦੀ ਚੇਤਾਵਨੀਆਂ

.alert-message

ਅਸਫਲਤਾ, ਸੰਭਾਵੀ ਅਸਫਲਤਾ, ਜਾਂ ਕਿਸੇ ਕਾਰਵਾਈ ਦੀ ਸਫਲਤਾ ਨੂੰ ਉਜਾਗਰ ਕਰਨ ਲਈ ਇੱਕ-ਲਾਈਨ ਸੰਦੇਸ਼। ਫਾਰਮ ਲਈ ਖਾਸ ਤੌਰ 'ਤੇ ਲਾਭਦਾਇਕ.

ਜਾਵਾਸਕ੍ਰਿਪਟ ਪ੍ਰਾਪਤ ਕਰੋ »

×

ਪਵਿੱਤਰ guacamole! ਆਪਣੇ ਆਪ ਦੀ ਜਾਂਚ ਕਰੋ, ਤੁਸੀਂ ਬਹੁਤ ਚੰਗੇ ਨਹੀਂ ਲੱਗ ਰਹੇ ਹੋ ।

×

ਓ ਸਨੈਪ! ਇਸ ਅਤੇ ਉਸ ਨੂੰ ਬਦਲੋ ਅਤੇ ਦੁਬਾਰਾ ਕੋਸ਼ਿਸ਼ ਕਰੋ ।

×

ਬਹੁਤ ਖੂਬ! ਤੁਸੀਂ ਇਸ ਚੇਤਾਵਨੀ ਸੰਦੇਸ਼ ਨੂੰ ਸਫਲਤਾਪੂਰਵਕ ਪੜ੍ਹ ਲਿਆ ਹੈ।

×

ਸਿਰ! ਇਹ ਇੱਕ ਚੇਤਾਵਨੀ ਹੈ ਜਿਸ 'ਤੇ ਤੁਹਾਡੇ ਧਿਆਨ ਦੀ ਲੋੜ ਹੈ, ਪਰ ਇਹ ਅਜੇ ਤੱਕ ਇੱਕ ਵੱਡੀ ਤਰਜੀਹ ਨਹੀਂ ਹੈ।

ਉਦਾਹਰਨ ਕੋਡ

  1. <div ਕਲਾਸ = "ਅਲਰਟ-ਮੈਸੇਜ ਚੇਤਾਵਨੀ" > 
  2.   <a class = "close" href = "#" > × </a>  
  3.   <p><strong> ਪਵਿੱਤਰ ਗੁਆਕਾਮੋਲ! </strong> ਸਭ ਤੋਂ ਵਧੀਆ ਤੁਸੀਂ ਆਪਣੇ ਆਪ ਦੀ ਜਾਂਚ ਕਰੋ, ਤੁਸੀਂ ਬਹੁਤ ਵਧੀਆ ਨਹੀਂ ਲੱਗ ਰਹੇ ਹੋ। </p>
  4. </div>

ਸੁਨੇਹਿਆਂ ਨੂੰ ਬਲੌਕ ਕਰੋ

.alert-message.block-message

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

ਜਾਵਾਸਕ੍ਰਿਪਟ ਪ੍ਰਾਪਤ ਕਰੋ »

×

ਪਵਿੱਤਰ guacamole! ਇਹ ਇੱਕ ਚੇਤਾਵਨੀ ਹੈ! ਆਪਣੇ ਆਪ ਦੀ ਜਾਂਚ ਕਰੋ, ਤੁਸੀਂ ਬਹੁਤ ਵਧੀਆ ਨਹੀਂ ਲੱਗ ਰਹੇ ਹੋ। ਨੱਲਾ ਵਿਟਾਏ ਇਲੀਟ ਲਿਬੇਰੋ, ਇੱਕ ਫਰੇਟਰਾ ਔਗ। Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

ਇਹ ਕਾਰਵਾਈ ਕਰੋ ਜਾਂ ਇਹ ਕਰੋ
×

ਓ ਸਨੈਪ! ਤੁਹਾਨੂੰ ਇੱਕ ਗਲਤੀ ਮਿਲੀ! ਇਸ ਅਤੇ ਉਸ ਨੂੰ ਬਦਲੋ ਅਤੇ ਦੁਬਾਰਾ ਕੋਸ਼ਿਸ਼ ਕਰੋ ।

  • Duis mollis est non commodo luctus
  • ਨਿਸਿ ਇਰਤ ਪੋਰਟਿਟਰ ਲਿਗੁਲਾ
  • Eget lacinia odio sem nec elit
ਇਹ ਕਾਰਵਾਈ ਕਰੋ ਜਾਂ ਇਹ ਕਰੋ
×

ਬਹੁਤ ਖੂਬ! ਤੁਸੀਂ ਇਸ ਚੇਤਾਵਨੀ ਸੰਦੇਸ਼ ਨੂੰ ਸਫਲਤਾਪੂਰਵਕ ਪੜ੍ਹ ਲਿਆ ਹੈ। Cum sociis natoque penatibus et magnis dis parturient Montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

ਇਹ ਕਾਰਵਾਈ ਕਰੋ ਜਾਂ ਇਹ ਕਰੋ
×

ਸਿਰ! ਇਹ ਇੱਕ ਚੇਤਾਵਨੀ ਹੈ ਜਿਸ 'ਤੇ ਤੁਹਾਡੇ ਧਿਆਨ ਦੀ ਲੋੜ ਹੈ, ਪਰ ਇਹ ਅਜੇ ਤੱਕ ਇੱਕ ਵੱਡੀ ਤਰਜੀਹ ਨਹੀਂ ਹੈ।

ਇਹ ਕਾਰਵਾਈ ਕਰੋ ਜਾਂ ਇਹ ਕਰੋ

ਉਦਾਹਰਨ ਕੋਡ

  1. <div class = "alert-message block-message warning" > 
  2.   <a class = "close" href = "#" > × </a>  
  3.   <p><strong> ਪਵਿੱਤਰ ਗੁਆਕਾਮੋਲ! ਇਹ ਇੱਕ ਚੇਤਾਵਨੀ ਹੈ! </strong> ਸਭ ਤੋਂ ਵਧੀਆ ਤੁਸੀਂ ਆਪਣੇ ਆਪ ਦੀ ਜਾਂਚ ਕਰੋ, ਤੁਸੀਂ ਬਹੁਤ ਵਧੀਆ ਨਹੀਂ ਲੱਗ ਰਹੇ ਹੋ। ਨੱਲਾ ਵਿਟਾਏ ਇਲੀਟ ਲਿਬੇਰੋ, ਇੱਕ ਫਰੇਟਰਾ ਔਗ। Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  4.   <div ਕਲਾਸ = "ਅਲਰਟ-ਐਕਸ਼ਨ" > 
  5.     <a class="btn small" href="#" > ਇਹ ਕਾਰਵਾਈ ਕਰੋ </a> <a class="btn small" href="#" > ਜਾਂ ਇਹ ਕਰੋ </a> _ _     
  6.   </div>
  7. </div>

ਮਾਡਲਾਂ, ਟੂਲਟਿਪਸ ਅਤੇ ਪੋਪੋਵਰਾਂ ਵਿੱਚ ਸਮੱਗਰੀ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਪੋਪੋਵਰ ਕੰਪੋਨੈਂਟਸ

ਮਾਡਲਸ

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

ਜਾਵਾਸਕ੍ਰਿਪਟ ਪ੍ਰਾਪਤ ਕਰੋ »

×

ਮਾਡਲ ਸਿਰਲੇਖ

ਇੱਕ ਵਧੀਆ ਸਰੀਰ…

ਪ੍ਰਾਇਮਰੀ ਸੈਕੰਡਰੀ

ਟੂਲਟਿੱਪ

ਉਲਝਣ ਵਾਲੇ ਉਪਭੋਗਤਾ ਦੀ ਸਹਾਇਤਾ ਕਰਨ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਸਹੀ ਦਿਸ਼ਾ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਨ ਲਈ Twipsies ਬਹੁਤ ਉਪਯੋਗੀ ਹਨ।

ਜਾਵਾਸਕ੍ਰਿਪਟ ਪ੍ਰਾਪਤ ਕਰੋ »

Lorem ipsum Dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae fugit fugit accusantium voluptatum que unde sunt sed dicta quae fugit fugit accusantium .

ਪੋਪੋਵਰਸ

ਲੇਆਉਟ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕੀਤੇ ਬਿਨਾਂ ਕਿਸੇ ਪੰਨੇ ਨੂੰ ਸਬਟੈਕਸਟੁਅਲ ਜਾਣਕਾਰੀ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਪੋਪਓਵਰ ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਜਾਵਾਸਕ੍ਰਿਪਟ ਪ੍ਰਾਪਤ ਕਰੋ »

ਪੋਪੋਵਰ ਟਾਈਟਲ

Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. ਮੋਰਬੀ ਲੀਓ ਰਿਸਸ, ਪੋਰਟਾ ਏਸੀ ਕੰਸੇਕਟੁਰ ਏਸੀ, ਵੈਸਟੀਬੁਲਮ ਐਟ ਈਰੋਸ।

ਬੂਟਸਟਰੈਪ ਨਾਲ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਤੁਹਾਨੂੰ ਸ਼ੁਰੂਆਤ ਕਰਨ ਲਈ ਪਲੱਗਇਨਾਂ ਦਾ ਇੱਕ ਸੂਚਕਾਂਕ

ਸ਼ੁਰੂ ਕਰਨਾ

ਬੂਟਸਟਰੈਪ ਲਾਇਬ੍ਰੇਰੀ ਨਾਲ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਜੋੜਨਾ ਬਹੁਤ ਆਸਾਨ ਹੈ। ਹੇਠਾਂ ਅਸੀਂ ਮੂਲ ਗੱਲਾਂ 'ਤੇ ਜਾਂਦੇ ਹਾਂ ਅਤੇ ਤੁਹਾਨੂੰ ਸ਼ੁਰੂਆਤ ਕਰਨ ਲਈ ਕੁਝ ਸ਼ਾਨਦਾਰ ਪਲੱਗਇਨ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਾਂ!

ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦਸਤਾਵੇਜ਼ ਵੇਖੋ »

ਕੀ ਸ਼ਾਮਲ ਹੈ

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

ਫਾਈਲ ਵਰਣਨ
bootstrap-modal.js ਸਾਡਾ ਮਾਡਲ ਪਲੱਗਇਨ ਰਵਾਇਤੀ ਮਾਡਲ ਜੇਐਸ ਪਲੱਗਇਨ 'ਤੇ ਇੱਕ ਬਹੁਤ ਹੀ ਪਤਲਾ ਹੈ! ਅਸੀਂ ਟਵਿੱਟਰ 'ਤੇ ਲੋੜੀਂਦੇ ਬੇਅਰ ਫੰਕਸ਼ਨੈਲਿਟੀ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਖਾਸ ਧਿਆਨ ਰੱਖਿਆ।
bootstrap-alerts.js ਚੇਤਾਵਨੀ ਪਲੱਗਇਨ ਚੇਤਾਵਨੀਆਂ ਵਿੱਚ ਨਜ਼ਦੀਕੀ ਕਾਰਜਸ਼ੀਲਤਾ ਜੋੜਨ ਲਈ ਇੱਕ ਬਹੁਤ ਛੋਟੀ ਸ਼੍ਰੇਣੀ ਹੈ।
bootstrap-dropdown.js ਇਹ ਪਲੱਗਇਨ ਬੂਟਸਟਰੈਪ ਟੌਪਬਾਰ ਜਾਂ ਟੈਬਡ ਨੈਵੀਗੇਸ਼ਨਾਂ ਵਿੱਚ ਡ੍ਰੌਪਡਾਉਨ ਇੰਟਰੈਕਸ਼ਨ ਜੋੜਨ ਲਈ ਹੈ।
bootstrap-scrollspy.js ScrollSpy ਪਲੱਗਇਨ ਬੂਟਸਟਰੈਪ ਟੌਪਬਾਰ ਵਿੱਚ ਸਕ੍ਰੋਲ ਸਥਿਤੀ ਦੇ ਅਧਾਰ ਤੇ ਇੱਕ ਆਟੋ ਅੱਪਡੇਟ ਕਰਨ ਵਾਲੀ ਨੈਵੀ ਜੋੜਨ ਲਈ ਹੈ।
bootstrap-buttons.js ScrollSpy ਪਲੱਗਇਨ ਬੂਟਸਟਰੈਪ ਟੌਪਬਾਰ ਵਿੱਚ ਸਕ੍ਰੋਲ ਸਥਿਤੀ ਦੇ ਅਧਾਰ ਤੇ ਇੱਕ ਆਟੋ ਅੱਪਡੇਟ ਕਰਨ ਵਾਲੀ ਨੈਵੀ ਜੋੜਨ ਲਈ ਹੈ।
bootstrap-tabs.js ਇਹ ਪਲੱਗਇਨ ਸਥਾਨਕ ਸਮਗਰੀ ਦੁਆਰਾ ਸਾਈਕਲ ਚਲਾਉਣ ਲਈ ਤੇਜ਼, ਗਤੀਸ਼ੀਲ ਟੈਬ ਅਤੇ ਗੋਲੀ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਜੋੜਦਾ ਹੈ।
bootstrap-twipsy.js ਜੇਸਨ ਫਰੇਮ ਦੁਆਰਾ ਲਿਖੇ ਸ਼ਾਨਦਾਰ jQuery.tipsy ਪਲੱਗਇਨ ਦੇ ਅਧਾਰ ਤੇ; twipsy ਇੱਕ ਅੱਪਡੇਟ ਕੀਤਾ ਸੰਸਕਰਣ ਹੈ, ਜੋ ਚਿੱਤਰਾਂ 'ਤੇ ਨਿਰਭਰ ਨਹੀਂ ਕਰਦਾ, ਐਨੀਮੇਸ਼ਨਾਂ ਲਈ css3 ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਅਤੇ ਸਥਾਨਕ ਸਿਰਲੇਖ ਸਟੋਰੇਜ ਲਈ ਡੇਟਾ-ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ!
bootstrap-popover.js ਪੌਪਓਵਰ ਪਲੱਗਇਨ ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਪੌਪਓਵਰ ਜੋੜਨ ਲਈ ਇੱਕ ਸਧਾਰਨ ਇੰਟਰਫੇਸ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇਹ boostrap-twipsy.js ਪਲੱਗਇਨ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ, ਇਸ ਲਈ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਪੋਪਓਵਰ ਸ਼ਾਮਲ ਕਰਦੇ ਸਮੇਂ ਉਸ ਫਾਈਲ ਨੂੰ ਵੀ ਫੜਨਾ ਯਕੀਨੀ ਬਣਾਓ!

ਕੀ ਜਾਵਾਸਕ੍ਰਿਪਟ ਜ਼ਰੂਰੀ ਹੈ?

ਨਹੀਂ! ਬੂਟਸਟਰੈਪ ਨੂੰ ਸਭ ਤੋਂ ਪਹਿਲਾਂ CSS ਲਾਇਬ੍ਰੇਰੀ ਬਣਾਉਣ ਲਈ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ। ਇਹ ਜਾਵਾਸਕ੍ਰਿਪਟ ਸ਼ਾਮਲ ਸਟਾਈਲ ਦੇ ਸਿਖਰ 'ਤੇ ਇੱਕ ਬੁਨਿਆਦੀ ਪਰਸਪਰ ਪਰਤ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ।

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

ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ ਅਤੇ ਕੁਝ ਲਾਈਵ ਡੈਮੋ ਦੇਖਣ ਲਈ, ਕਿਰਪਾ ਕਰਕੇ ਸਾਡੇ ਪਲੱਗਇਨ ਦਸਤਾਵੇਜ਼ ਪੰਨੇ ਨੂੰ ਵੇਖੋ ।

ਵੇਰੀਏਬਲ, ਮਿਕਸਿਨ ਅਤੇ ਫੰਕਸ਼ਨਾਂ ਦੇ ਨਾਲ ਆਪਣੇ CSS ਨੂੰ ਘੱਟ ਸੁਪਰਚਾਰਜ ਨਾਲ ਬੂਟਸਟਰੈਪ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

ਬੂਟਸਟਰੈਪ ਪ੍ਰੀਬੂਟ ਤੋਂ ਬਣਾਇਆ ਗਿਆ ਸੀ , ਮਿਕਸਿਨ ਅਤੇ ਵੇਰੀਏਬਲਾਂ ਦਾ ਇੱਕ ਓਪਨ-ਸੋਰਸ ਪੈਕ , ਜੋ ਕਿ ਤੇਜ਼ ਅਤੇ ਆਸਾਨ ਵੈੱਬ ਵਿਕਾਸ ਲਈ ਇੱਕ CSS ਪ੍ਰੀਪ੍ਰੋਸੈਸਰ, Less ਦੇ ਨਾਲ ਜੋੜ ਕੇ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ।

ਦੇਖੋ ਕਿ ਅਸੀਂ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਪ੍ਰੀਬੂਟ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕੀਤੀ ਹੈ ਅਤੇ ਤੁਸੀਂ ਇਸਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰ ਸਕਦੇ ਹੋ ਜੇਕਰ ਤੁਸੀਂ ਆਪਣੇ ਅਗਲੇ ਪ੍ਰੋਜੈਕਟ 'ਤੇ ਘੱਟ ਚਲਾਉਣ ਦੀ ਚੋਣ ਕਰਦੇ ਹੋ।

ਇਸਨੂੰ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ JavaScript ਰਾਹੀਂ CSS ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਦੇ ਘੱਟ ਵੇਰੀਏਬਲ, ਮਿਕਸਿਨ ਅਤੇ ਨੇਸਟਿੰਗ ਦੀ ਪੂਰੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਇਸ ਵਿਕਲਪ ਦੀ ਵਰਤੋਂ ਕਰੋ।

  1. <link rel = "stylesheet/less" href = "less/bootstrap.less" ਮੀਡੀਆ = "ਸਾਰੇ" />    
  2. <script src = "js/less-1.1.3.min.js" ></script>

.js ਹੱਲ ਮਹਿਸੂਸ ਨਹੀਂ ਕਰ ਰਹੇ ਹੋ? Less Mac ਐਪ ਨੂੰ ਅਜ਼ਮਾਓ ਜਾਂ ਜਦੋਂ ਤੁਸੀਂ ਆਪਣਾ ਕੋਡ ਤੈਨਾਤ ਕਰਦੇ ਹੋ ਤਾਂ ਕੰਪਾਇਲ ਕਰਨ ਲਈ Node.js ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਕੀ ਸ਼ਾਮਲ ਹੈ

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

ਵੇਰੀਏਬਲ

ਘੱਟ ਵਿੱਚ ਵੇਰੀਏਬਲ ਤੁਹਾਡੇ CSS ਸਿਰ ਦਰਦ ਤੋਂ ਮੁਕਤ ਬਣਾਈ ਰੱਖਣ ਅਤੇ ਅਪਡੇਟ ਕਰਨ ਲਈ ਸੰਪੂਰਨ ਹਨ। ਜਦੋਂ ਤੁਸੀਂ ਰੰਗ ਮੁੱਲ ਜਾਂ ਅਕਸਰ ਵਰਤਿਆ ਜਾਣ ਵਾਲਾ ਮੁੱਲ ਬਦਲਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਸਨੂੰ ਇੱਕ ਥਾਂ 'ਤੇ ਅੱਪਡੇਟ ਕਰੋ ਅਤੇ ਤੁਸੀਂ ਸੈੱਟ ਹੋ।

  1. // ਲਿੰਕ
  2. @linkColor : #8b59c2;         
  3. @linkColorHover :     ਹਨੇਰਾ ( @linkColor , 10 ); 
  4.  
  5. // ਸਲੇਟੀ
  6. @ਕਾਲਾ : #000;             
  7. @ਗ੍ਰੇਡਾਰਕ :           ਹਲਕਾ ( @ਕਾਲਾ , 25 %); 
  8. @ਗ੍ਰੇ :               ਹਲਕਾ ( @ਕਾਲਾ , 50 %); 
  9. @ਗ੍ਰੇਲਾਈਟ :          ਹਲਕਾ ( @ਕਾਲਾ , 70 %); 
  10. @ਗ੍ਰੇ ਲਾਈਟਰ :        ਹਲਕਾ ( @ਕਾਲਾ , 90 %); 
  11. @white : #ffff;             
  12.  
  13. // ਐਕਸੈਂਟ ਰੰਗ
  14. @ਨੀਲਾ : #08b5fb ;              
  15. @ਹਰਾ : #46a546 ;             
  16. @ਲਾਲ : #9d261d ;               
  17. @ਪੀਲਾ : #ffc40d ;            
  18. @ਸੰਤਰੀ : #f89406 ;            
  19. @ਪਿੰਕ : #c3325f ;              
  20. @ਜਾਮਨੀ : #7a43b6 ;            
  21.  
  22. // ਬੇਸਲਾਈਨ ਗਰਿੱਡ
  23. @basefont : 13px ;          
  24. @ ਬੇਸਲਾਈਨ : 18px ;

ਟਿੱਪਣੀ ਕਰ ਰਿਹਾ ਹੈ

/* ... */ਘੱਟ CSS ਦੇ ਆਮ ਸੰਟੈਕਸ ਤੋਂ ਇਲਾਵਾ ਟਿੱਪਣੀ ਦੀ ਇੱਕ ਹੋਰ ਸ਼ੈਲੀ ਵੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।

  1. // ਇਹ ਇੱਕ ਟਿੱਪਣੀ ਹੈ
  2. /* ਇਹ ਵੀ ਇੱਕ ਟਿੱਪਣੀ ਹੈ */

ਵਜ਼ੂ ਨੂੰ ਮਿਲਾਉਂਦਾ ਹੈ

Mixins ਮੂਲ ਰੂਪ ਵਿੱਚ CSS ਲਈ ਸ਼ਾਮਲ ਜਾਂ ਅੰਸ਼ਕ ਹੁੰਦੇ ਹਨ, ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਕੋਡ ਦੇ ਇੱਕ ਬਲਾਕ ਨੂੰ ਇੱਕ ਵਿੱਚ ਜੋੜ ਸਕਦੇ ਹੋ। ਉਹ ਵਿਕਰੇਤਾ ਪ੍ਰੀਫਿਕਸਡ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਿਵੇਂ ਕਿ box-shadow, ਕਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਗਰੇਡੀਐਂਟ, ਫੌਂਟ ਸਟੈਕ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਲਈ ਵਧੀਆ ਹਨ। ਹੇਠਾਂ ਮਿਕਸਿਨ ਦਾ ਇੱਕ ਨਮੂਨਾ ਹੈ ਜੋ ਬੂਟਸਟਰੈਪ ਨਾਲ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ ਹਨ।

ਫੌਂਟ ਸਟੈਕ

  1. #ਫੌਂਟ {
  2.   . ਸ਼ਾਰਟਹੈਂਡ ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
  3.     ਫੌਂਟ - ਆਕਾਰ : @ ਆਕਾਰ ; 
  4.     ਫੌਂਟ - ਭਾਰ : @weight ; 
  5.     ਲਾਈਨ - ਉਚਾਈ : @lineHeight ; 
  6.   }
  7.   . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
  8.     ਫੌਂਟ - ਫੈਮਿਲੀ : "ਹੇਲਵੇਟਿਕਾ ਨੀਯੂ" , ਹੇਲਵੇਟਿਕਾ , ਏਰੀਅਲ , ਸੈਨਸ - ਸੇਰੀਫ ;   
  9.     ਫੌਂਟ - ਆਕਾਰ : @ ਆਕਾਰ ; 
  10.     ਫੌਂਟ - ਭਾਰ : @weight ; 
  11.     ਲਾਈਨ - ਉਚਾਈ : @lineHeight ; 
  12.   }
  13.   ...
  14. }

ਗਰੇਡੀਐਂਟ

  1. #ਢਾਲ {
  2.   ...
  3.   . ਲੰਬਕਾਰੀ ( @startColor : #555, @endColor: #333) { 
  4.     ਪਿਛੋਕੜ - ਰੰਗ : @endColor ; 
  5.     ਪਿਛੋਕੜ - ਦੁਹਰਾਓ : ਦੁਹਰਾਓ - x ;
  6.     ਪਿਛੋਕੜ - ਚਿੱਤਰ : - khtml - ਗਰੇਡੀਐਂਟ ( ਰੇਖਿਕ , ਖੱਬਾ ਸਿਖਰ , ਖੱਬਾ ਥੱਲੇ , ( @startColor ) ਤੋਂ ( @endColor ) ਤੱਕ ); // ਕੋਨਕਿਉਰੋਰ   
  7.     ਪਿਛੋਕੜ - ਚਿੱਤਰ : - moz - ਲੀਨੀਅਰ - ਗਰੇਡੀਐਂਟ ( @startColor , @endColor ); // FF 3.6+   
  8.     ਪਿਛੋਕੜ - ਚਿੱਤਰ : - ms - ਲੀਨੀਅਰ - ਗਰੇਡੀਐਂਟ ( @startColor , @endColor ); // IE10   
  9.     ਬੈਕਗਰਾਊਂਡ - ਚਿੱਤਰ : - ਵੈਬਕਿੱਟ - ਗਰੇਡੀਐਂਟ ( ਰੇਖਿਕ , ਖੱਬਾ ਸਿਖਰ , ਖੱਬਾ ਥੱਲੇ , ਰੰਗ - ਸਟਾਪ ( 0 % , @startColor ), ਰੰਗ - ਸਟਾਪ ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
  10.     ਪਿਛੋਕੜ - ਚਿੱਤਰ : - ਵੈਬਕਿੱਟ - ਰੇਖਿਕ - ਗਰੇਡੀਐਂਟ ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
  11.     ਪਿਛੋਕੜ - ਚਿੱਤਰ : - o - ਰੇਖਿਕ - ਗਰੇਡੀਐਂਟ ( @startColor , @endColor ); // ਓਪੇਰਾ 11.10   
  12.     ਪਿਛੋਕੜ - ਚਿੱਤਰ : ਰੇਖਿਕ - ਗਰੇਡੀਐਂਟ ( @startColor , @endColor ); // ਮਿਆਰੀ  
  13.   }
  14.   ...
  15. }

ਸੰਚਾਲਨ

ਫੈਂਸੀ ਬਣੋ ਅਤੇ ਹੇਠਾਂ ਦਿੱਤੇ ਵਾਂਗ ਲਚਕਦਾਰ ਅਤੇ ਸ਼ਕਤੀਸ਼ਾਲੀ ਮਿਸ਼ਰਣ ਬਣਾਉਣ ਲਈ ਕੁਝ ਗਣਿਤ ਕਰੋ।

  1. // ਗਰੀਡਿਊਡ
  2. @gridColumns : 16 ;       
  3. @gridColumnWidth : 40px ;   
  4. @gridGutterWidth : 20px ;   
  5. @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
  6.  
  7. // ਕੁਝ ਕਾਲਮ ਬਣਾਓ
  8. . ਕਾਲਮ ( @columnSpan : 1 ) {  
  9.   ਚੌੜਾਈ : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  10. }

ਕੰਪਾਇਲ ਘੱਟ

/lib/ ਵਿੱਚ ਫਾਈਲਾਂ ਨੂੰ ਸੋਧਣ ਤੋਂ ਬਾਅਦ .less, ਤੁਹਾਨੂੰ bootstrap-*xx.css ਅਤੇ bootstrap-*xx.min.css ਫਾਈਲਾਂ ਨੂੰ ਦੁਬਾਰਾ ਬਣਾਉਣ ਲਈ ਉਹਨਾਂ ਨੂੰ ਮੁੜ ਕੰਪਾਇਲ ਕਰਨ ਦੀ ਲੋੜ ਪਵੇਗੀ। ਜੇਕਰ ਤੁਸੀਂ GitHub ਨੂੰ ਇੱਕ ਪੁੱਲ ਬੇਨਤੀ ਦਰਜ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਹਮੇਸ਼ਾ ਦੁਬਾਰਾ ਕੰਪਾਇਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।

ਕੰਪਾਇਲ ਕਰਨ ਦੇ ਤਰੀਕੇ

ਵਿਧੀ ਕਦਮ
ਮੇਕਫਾਈਲ ਨਾਲ ਨੋਡ

ਹੇਠ ਦਿੱਤੀ ਕਮਾਂਡ ਚਲਾ ਕੇ npm ਨਾਲ ਘੱਟ ਕਮਾਂਡ ਲਾਈਨ ਕੰਪਾਈਲਰ ਨੂੰ ਸਥਾਪਿਤ ਕਰੋ:

$npm install lessc

ਇੱਕ ਵਾਰ ਇੰਸਟਾਲ ਹੋਣ makeਤੋਂ ਬਾਅਦ ਤੁਹਾਡੀ ਬੂਟਸਟਰੈਪ ਡਾਇਰੈਕਟਰੀ ਦੇ ਰੂਟ ਤੋਂ ਚਲਾਓ ਅਤੇ ਤੁਸੀਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਤਿਆਰ ਹੋ।

ਇਸ ਤੋਂ ਇਲਾਵਾ, ਜੇਕਰ ਤੁਹਾਡੇ ਕੋਲ ਵਾਚਰ ਸਥਾਪਤ ਹੈ, ਤਾਂ ਤੁਸੀਂ make watchਬੂਟਸਟਰੈਪ ਲਿਬ ਵਿੱਚ ਹਰ ਵਾਰ ਇੱਕ ਫਾਈਲ ਨੂੰ ਸੰਪਾਦਿਤ ਕਰਨ 'ਤੇ ਬੂਟਸਟਰੈਪ ਨੂੰ ਆਟੋਮੈਟਿਕਲੀ ਦੁਬਾਰਾ ਬਣਾਉਣ ਲਈ ਦੌੜ ਸਕਦੇ ਹੋ (ਇਸਦੀ ਲੋੜ ਨਹੀਂ ਹੈ, ਸਿਰਫ਼ ਇੱਕ ਸਹੂਲਤ ਵਿਧੀ)।
ਜਾਵਾਸਕ੍ਰਿਪਟ

ਨਵੀਨਤਮ Less.js ਨੂੰ ਡਾਊਨਲੋਡ ਕਰੋ ਅਤੇ ਵਿੱਚ ਇਸ (ਅਤੇ ਬੂਟਸਟਰੈਪ) ਦਾ ਮਾਰਗ ਸ਼ਾਮਲ ਕਰੋ head।

  1. <link rel = "stylesheet/less" href = "/path/to/bootstrap.less" >  
  2. <script src = "/path/to/less.js" ></script>

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

ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਪਹਿਲਾਂ ਹੀ ਘੱਟ ਕਮਾਂਡ ਲਾਈਨ ਟੂਲ ਸਥਾਪਿਤ ਹੈ, ਤਾਂ ਬਸ ਹੇਠ ਦਿੱਤੀ ਕਮਾਂਡ ਚਲਾਓ:

$lessc ./lib/bootstrap.less > bootstrap.css

--compressਜੇ ਤੁਸੀਂ ਕੁਝ ਬਾਈਟਾਂ ਨੂੰ ਬਚਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋ ਤਾਂ ਉਸ ਕਮਾਂਡ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ !
ਘੱਟ ਮੈਕ ਐਪ

ਅਣਅਧਿਕਾਰਤ ਮੈਕ ਐਪ .less ਫਾਈਲਾਂ ਦੀਆਂ ਡਾਇਰੈਕਟਰੀਆਂ ਦੇਖਦਾ ਹੈ ਅਤੇ ਇੱਕ ਦੇਖੀ ਗਈ .less ਫਾਈਲ ਦੇ ਹਰ ਸੇਵ ਤੋਂ ਬਾਅਦ ਕੋਡ ਨੂੰ ਸਥਾਨਕ ਫਾਈਲਾਂ ਵਿੱਚ ਕੰਪਾਇਲ ਕਰਦਾ ਹੈ।

ਜੇਕਰ ਤੁਸੀਂ ਚਾਹੋ, ਤਾਂ ਤੁਸੀਂ ਐਪ ਵਿੱਚ ਆਟੋਮੈਟਿਕ ਮਿਨਿਫਾਇੰਗ ਲਈ ਤਰਜੀਹਾਂ ਨੂੰ ਟੌਗਲ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਕੰਪਾਇਲ ਕੀਤੀਆਂ ਫਾਈਲਾਂ ਕਿਸ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਖਤਮ ਹੁੰਦੀਆਂ ਹਨ।