ਬੂਟਸਟਰੈਪ

ਸਕੈਫੋਲਡਿੰਗ

ਬੂਟਸਟਰੈਪ ਇੱਕ ਜਵਾਬਦੇਹ 12-ਕਾਲਮ ਗਰਿੱਡ 'ਤੇ ਬਣਾਇਆ ਗਿਆ ਹੈ। ਅਸੀਂ ਉਸ ਸਿਸਟਮ ਦੇ ਆਧਾਰ 'ਤੇ ਸਥਿਰ- ਅਤੇ ਤਰਲ-ਚੌੜਾਈ ਵਾਲੇ ਖਾਕੇ ਵੀ ਸ਼ਾਮਲ ਕੀਤੇ ਹਨ।

CSS ਰੀਸੈਟ, ਟਾਈਪੋਗ੍ਰਾਫੀ, ਅਤੇ ਲਿੰਕਾਂ ਲਈ ਗਲੋਬਲ ਸਟਾਈਲ

HTML5 doctype ਦੀ ਲੋੜ ਹੈ

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

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

ਟਾਈਪੋਗ੍ਰਾਫੀ ਅਤੇ ਲਿੰਕ

scaffolding.less ਫਾਈਲ ਦੇ ਅੰਦਰ , ਅਸੀਂ ਬੁਨਿਆਦੀ ਗਲੋਬਲ ਡਿਸਪਲੇ, ਟਾਈਪੋਗ੍ਰਾਫੀ, ਅਤੇ ਲਿੰਕ ਸਟਾਈਲ ਸੈੱਟ ਕਰਦੇ ਹਾਂ। ਖਾਸ ਤੌਰ 'ਤੇ, ਅਸੀਂ:

  • ਸਰੀਰ 'ਤੇ ਹਾਸ਼ੀਏ ਨੂੰ ਹਟਾਓ
  • background-color: white;'ਤੇ ਸੈੱਟ ਕਰੋbody
  • ਸਾਡੇ ਟਾਈਪੋਗ੍ਰਾਫਿਕ ਅਧਾਰ ਵਜੋਂ @baseFontFamily, @baseFontSize, ਅਤੇ ਗੁਣਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ@baseLineHeight
  • ਦੁਆਰਾ ਗਲੋਬਲ ਲਿੰਕ ਰੰਗ ਸੈਟ ਕਰੋ @linkColorਅਤੇ ਲਿੰਕ ਅੰਡਰਲਾਈਨਾਂ ਨੂੰ ਲਾਗੂ ਕਰੋ:hover

ਸਧਾਰਨਕਰਨ ਰਾਹੀਂ ਰੀਸੈਟ ਕਰੋ

ਬੂਟਸਟਰੈਪ 2 ਦੇ ਅਨੁਸਾਰ, ਪਰੰਪਰਾਗਤ CSS ਰੀਸੈਟ Normalize.css ਤੋਂ ਤੱਤਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਵਿਕਸਿਤ ਹੋਇਆ ਹੈ , ਜੋ ਕਿ ਨਿਕੋਲਸ ਗਾਲਾਘਰ ਦੁਆਰਾ ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਹੈ ਜੋ HTML5 ਬੋਇਲਰਪਲੇਟ ਨੂੰ ਵੀ ਸ਼ਕਤੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ।

ਨਵਾਂ ਰੀਸੈਟ ਅਜੇ ਵੀ reset.less ਵਿੱਚ ਲੱਭਿਆ ਜਾ ਸਕਦਾ ਹੈ , ਪਰ ਸੰਖੇਪਤਾ ਅਤੇ ਸ਼ੁੱਧਤਾ ਲਈ ਬਹੁਤ ਸਾਰੇ ਤੱਤ ਹਟਾਏ ਗਏ ਹਨ।

ਇੱਕ ਜਵਾਬਦੇਹ ਮੋੜ ਦੇ ਨਾਲ ਡਿਫੌਲਟ ਗਰਿੱਡ ਸਿਸਟਮ 12 ਕਾਲਮ

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਪ੍ਰਦਾਨ ਕੀਤਾ ਡਿਫੌਲਟ ਗਰਿੱਡ ਸਿਸਟਮ 12 ਕਾਲਮਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਜੋ 724px, 940px (ਜਵਾਬਦੇਹ CSS ਸ਼ਾਮਲ ਕੀਤੇ ਬਿਨਾਂ ਡਿਫੌਲਟ) ਅਤੇ 1170px ਦੀ ਚੌੜਾਈ 'ਤੇ ਰੈਂਡਰ ਹੁੰਦੇ ਹਨ। 767px ਵਿਊਪੋਰਟ ਦੇ ਹੇਠਾਂ, ਕਾਲਮ ਤਰਲ ਬਣ ਜਾਂਦੇ ਹਨ ਅਤੇ ਲੰਬਕਾਰੀ ਸਟੈਕ ਹੁੰਦੇ ਹਨ।

  1. <div ਕਲਾਸ = "ਕਤਾਰ" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

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


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

4
4 ਆਫਸੈੱਟ 4
3 ਆਫਸੈੱਟ 3
3 ਆਫਸੈੱਟ 3
8 ਆਫਸੈੱਟ 4 
  1. <div ਕਲਾਸ = "ਕਤਾਰ" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

ਨੇਸਟਿੰਗ ਕਾਲਮ

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

ਉਦਾਹਰਨ

ਨੇਸਟਡ ਕਤਾਰਾਂ ਵਿੱਚ ਕਾਲਮਾਂ ਦਾ ਇੱਕ ਸੈੱਟ ਸ਼ਾਮਲ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਜੋ ਇਸਦੇ ਪੇਰੈਂਟ ਦੇ ਕਾਲਮਾਂ ਦੀ ਸੰਖਿਆ ਤੱਕ ਜੋੜਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਦੋ ਨੇਸਟਡ .span3ਕਾਲਮ ਇੱਕ ਦੇ ਅੰਦਰ ਰੱਖੇ ਜਾਣੇ ਚਾਹੀਦੇ ਹਨ .span6।

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

ਤਰਲ ਗਰਿੱਡ ਸਿਸਟਮ 12 ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ, ਪ੍ਰਤੀਸ਼ਤ-ਆਧਾਰਿਤ ਕਾਲਮ

ਤਰਲ ਕਾਲਮ

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

ਪ੍ਰਤੀਸ਼ਤ, ਪਿਕਸਲ ਨਹੀਂ

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

ਤਰਲ ਕਤਾਰਾਂ

.rowਵਿੱਚ ਬਦਲ ਕੇ ਕੋਈ ਵੀ ਕਤਾਰ ਤਰਲ ਬਣਾਉ .row-fluid। ਕਾਲਮ ਬਿਲਕੁਲ ਉਸੇ ਤਰ੍ਹਾਂ ਰਹਿੰਦੇ ਹਨ, ਇਸ ਨੂੰ ਸਥਿਰ ਅਤੇ ਤਰਲ ਲੇਆਉਟ ਵਿਚਕਾਰ ਫਲਿੱਪ ਕਰਨ ਲਈ ਬਹੁਤ ਸਿੱਧਾ ਬਣਾਉਂਦਾ ਹੈ।

ਮਾਰਕਅੱਪ

  1. <div ਕਲਾਸ = "ਰੋ-ਤਰਲ" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

ਤਰਲ ਆਲ੍ਹਣਾ

ਤਰਲ ਗਰਿੱਡਾਂ ਨਾਲ ਨੇਸਟ ਕਰਨਾ ਥੋੜਾ ਵੱਖਰਾ ਹੈ: ਨੇਸਟਡ ਕਾਲਮਾਂ ਦੀ ਸੰਖਿਆ ਨੂੰ ਮਾਤਾ-ਪਿਤਾ ਨਾਲ ਮੇਲਣ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ਇਸ ਦੀ ਬਜਾਏ, ਤੁਹਾਡੇ ਕਾਲਮ ਹਰੇਕ ਪੱਧਰ 'ਤੇ ਰੀਸੈਟ ਕੀਤੇ ਜਾਂਦੇ ਹਨ ਕਿਉਂਕਿ ਹਰੇਕ ਕਤਾਰ ਮੂਲ ਕਾਲਮ ਦਾ 100% ਹਿੱਸਾ ਲੈਂਦੀ ਹੈ।

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

ਗਰਿੱਡ ਅਨੁਕੂਲਨ

ਵੇਰੀਏਬਲ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਮੁੱਲ ਵਰਣਨ
@gridColumns 12 ਕਾਲਮਾਂ ਦੀ ਸੰਖਿਆ
@gridColumnWidth 60px ਹਰੇਕ ਕਾਲਮ ਦੀ ਚੌੜਾਈ
@gridGutterWidth 20px ਕਾਲਮਾਂ ਵਿਚਕਾਰ ਨੈਗੇਟਿਵ ਸਪੇਸ

ਘੱਟ ਵਿੱਚ ਵੇਰੀਏਬਲ

ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਬਿਲਟ-ਇਨ ਡਿਫੌਲਟ 940px ਗਰਿੱਡ ਸਿਸਟਮ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨ ਲਈ ਮੁੱਠੀ ਭਰ ਵੇਰੀਏਬਲ ਹਨ, ਉੱਪਰ ਦਸਤਾਵੇਜ਼ੀ ਤੌਰ 'ਤੇ। ਗਰਿੱਡ ਲਈ ਸਾਰੇ ਵੇਰੀਏਬਲ variables.less ਵਿੱਚ ਸਟੋਰ ਕੀਤੇ ਜਾਂਦੇ ਹਨ।

ਕਸਟਮਾਈਜ਼ ਕਿਵੇਂ ਕਰੀਏ

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

ਜਵਾਬਦੇਹ ਰਹਿਣਾ

ਗਰਿੱਡ ਦੀ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਸਿਰਫ ਡਿਫੌਲਟ ਪੱਧਰ, 940px ਗਰਿੱਡ 'ਤੇ ਕੰਮ ਕਰਦੀ ਹੈ। Bootstrap ਦੇ ਜਵਾਬਦੇਹ ਪਹਿਲੂਆਂ ਨੂੰ ਬਣਾਈ ਰੱਖਣ ਲਈ, ਤੁਹਾਨੂੰ responsive.less ਵਿੱਚ ਗਰਿੱਡਾਂ ਨੂੰ ਵੀ ਅਨੁਕੂਲਿਤ ਕਰਨਾ ਪਵੇਗਾ।

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

ਸਥਿਰ ਖਾਕਾ

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

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

ਤਰਲ ਖਾਕਾ

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

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

ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ ਅਤੇ ਰੈਜ਼ੋਲਿਊਸ਼ਨਾਂ ਲਈ ਜਵਾਬਦੇਹ ਡਿਜ਼ਾਈਨ ਮੀਡੀਆ ਸਵਾਲ

ਜਵਾਬਦੇਹ ਡਿਵਾਈਸਾਂ

ਉਹ ਕੀ ਕਰਦੇ ਹਨ

ਮੀਡੀਆ ਪੁੱਛਗਿੱਛਾਂ ਕਈ ਸ਼ਰਤਾਂ-ਅਨੁਪਾਤ, ਚੌੜਾਈ, ਡਿਸਪਲੇ ਦੀ ਕਿਸਮ, ਆਦਿ ਦੇ ਆਧਾਰ 'ਤੇ ਕਸਟਮ CSS ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੀਆਂ ਹਨ-ਪਰ ਆਮ ਤੌਰ 'ਤੇ ਆਲੇ-ਦੁਆਲੇ min-widthਅਤੇ max-width.

  • ਸਾਡੇ ਗਰਿੱਡ ਵਿੱਚ ਕਾਲਮ ਦੀ ਚੌੜਾਈ ਨੂੰ ਸੋਧੋ
  • ਜਿੱਥੇ ਵੀ ਲੋੜ ਹੋਵੇ ਫਲੋਟ ਦੀ ਬਜਾਏ ਤੱਤ ਸਟੈਕ ਕਰੋ
  • ਡਿਵਾਈਸਾਂ ਲਈ ਵਧੇਰੇ ਉਚਿਤ ਹੋਣ ਲਈ ਸਿਰਲੇਖਾਂ ਅਤੇ ਟੈਕਸਟ ਦਾ ਆਕਾਰ ਬਦਲੋ

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

ਸਮਰਥਿਤ ਡਿਵਾਈਸਾਂ

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

ਲੇਬਲ ਖਾਕਾ ਚੌੜਾਈ ਕਾਲਮ ਦੀ ਚੌੜਾਈ ਗਟਰ ਦੀ ਚੌੜਾਈ
ਸਮਾਰਟਫ਼ੋਨ 480px ਅਤੇ ਹੇਠਾਂ ਤਰਲ ਕਾਲਮ, ਕੋਈ ਸਥਿਰ ਚੌੜਾਈ ਨਹੀਂ
ਸਮਾਰਟਫੋਨ ਤੋਂ ਲੈ ਕੇ ਟੈਬਲੇਟ 767px ਅਤੇ ਹੇਠਾਂ ਤਰਲ ਕਾਲਮ, ਕੋਈ ਸਥਿਰ ਚੌੜਾਈ ਨਹੀਂ
ਪੋਰਟਰੇਟ ਗੋਲੀਆਂ 768px ਅਤੇ ਵੱਧ 42px 20px
ਡਿਫਾਲਟ 980px ਅਤੇ ਵੱਧ 60px 20px
ਵੱਡਾ ਡਿਸਪਲੇ 1200px ਅਤੇ ਵੱਧ 70px 30px

ਮੈਟਾ ਟੈਗ ਦੀ ਲੋੜ ਹੈ

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

  1. <ਮੈਟਾ ਨਾਮ = "ਵਿਊਪੋਰਟ" ਸਮੱਗਰੀ = "ਚੌੜਾਈ=ਡਿਵਾਈਸ-ਚੌੜਾਈ, ਸ਼ੁਰੂਆਤੀ-ਸਕੇਲ=1.0" >

ਮੀਡੀਆ ਸਵਾਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ

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

  1. ਕੰਪਾਇਲ ਕੀਤੇ ਜਵਾਬਦੇਹ ਸੰਸਕਰਣ, bootstrap-responsive.css ਦੀ ਵਰਤੋਂ ਕਰੋ
  2. @import "responsive.less" ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਬੂਟਸਟਰੈਪ ਨੂੰ ਦੁਬਾਰਾ ਕੰਪਾਇਲ ਕਰੋ
  3. responsive.less ਨੂੰ ਇੱਕ ਵੱਖਰੀ ਫ਼ਾਈਲ ਵਜੋਂ ਸੋਧੋ ਅਤੇ ਮੁੜ ਕੰਪਾਈਲ ਕਰੋ

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

  1.   /* ਲੈਂਡਸਕੇਪ ਫੋਨ ਅਤੇ ਡਾਊਨ */
  2.   @ਮੀਡੀਆ ( ਅਧਿਕਤਮ - ਚੌੜਾਈ : 480px ) { ... }     
  3.  
  4.   /* ਲੈਂਡਸਕੇਪ ਫੋਨ ਤੋਂ ਪੋਰਟਰੇਟ ਟੈਬਲੇਟ */
  5.   @ਮੀਡੀਆ ( ਅਧਿਕਤਮ - ਚੌੜਾਈ : 767px ) { ... }     
  6.  
  7.   /* ਲੈਂਡਸਕੇਪ ਅਤੇ ਡੈਸਕਟੌਪ ਲਈ ਪੋਰਟਰੇਟ ਟੈਬਲੇਟ */
  8.   @ਮੀਡੀਆ ( ਘੱਟੋ - ਘੱਟ ਚੌੜਾਈ : 768px ) ਅਤੇ ( ਅਧਿਕਤਮ - ਚੌੜਾਈ : 979px ) { ... }        
  9.  
  10.   /* ਵੱਡਾ ਡੈਸਕਟਾਪ */
  11.   @ਮੀਡੀਆ ( ਮਿੰਟ - ਚੌੜਾਈ : 1200px ) { ... }

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

ਉਹ ਕੀ ਹਨ

ਤੇਜ਼ ਮੋਬਾਈਲ-ਅਨੁਕੂਲ ਵਿਕਾਸ ਲਈ, ਡਿਵਾਈਸ ਦੁਆਰਾ ਸਮੱਗਰੀ ਨੂੰ ਦਿਖਾਉਣ ਅਤੇ ਲੁਕਾਉਣ ਲਈ ਇਹਨਾਂ ਬੁਨਿਆਦੀ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਕਦੋਂ ਵਰਤਣਾ ਹੈ

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

ਉਦਾਹਰਨ ਲਈ, ਤੁਸੀਂ <select>ਮੋਬਾਈਲ ਲੇਆਉਟ 'ਤੇ nav ਲਈ ਇੱਕ ਤੱਤ ਦਿਖਾ ਸਕਦੇ ਹੋ, ਪਰ ਟੈਬਲੇਟਾਂ ਜਾਂ ਡੈਸਕਟਾਪਾਂ 'ਤੇ ਨਹੀਂ।

ਸਪੋਰਟ ਕਲਾਸਾਂ

ਇੱਥੇ ਉਹਨਾਂ ਕਲਾਸਾਂ ਦੀ ਇੱਕ ਸਾਰਣੀ ਦਿਖਾਈ ਗਈ ਹੈ ਜਿਨ੍ਹਾਂ ਦਾ ਅਸੀਂ ਸਮਰਥਨ ਕਰਦੇ ਹਾਂ ਅਤੇ ਇੱਕ ਦਿੱਤੇ ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ ਲੇਆਉਟ (ਡਿਵਾਈਸ ਦੁਆਰਾ ਲੇਬਲ ਕੀਤੇ) 'ਤੇ ਉਹਨਾਂ ਦਾ ਪ੍ਰਭਾਵ ਹੈ। ਉਹ ਵਿੱਚ ਲੱਭੇ ਜਾ ਸਕਦੇ ਹਨ responsive.less.

ਕਲਾਸ ਫ਼ੋਨ480px ਅਤੇ ਹੇਠਾਂ ਗੋਲੀਆਂ767px ਅਤੇ ਹੇਠਾਂ ਡੈਸਕਟਾਪ768px ਅਤੇ ਵੱਧ
.visible-phone ਦਿਸਦਾ ਹੈ
.visible-tablet ਦਿਸਦਾ ਹੈ
.visible-desktop ਦਿਸਦਾ ਹੈ
.hidden-phone ਦਿਸਦਾ ਹੈ ਦਿਸਦਾ ਹੈ
.hidden-tablet ਦਿਸਦਾ ਹੈ ਦਿਸਦਾ ਹੈ
.hidden-desktop ਦਿਸਦਾ ਹੈ ਦਿਸਦਾ ਹੈ

ਟੈਸਟ ਕੇਸ

ਉਪਰੋਕਤ ਕਲਾਸਾਂ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਆਕਾਰ ਬਦਲੋ ਜਾਂ ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ 'ਤੇ ਲੋਡ ਕਰੋ।

ਇਸ 'ਤੇ ਦਿਖਣਯੋਗ...

ਹਰੇ ਚੈੱਕਮਾਰਕ ਦਰਸਾਉਂਦੇ ਹਨ ਕਿ ਕਲਾਸ ਤੁਹਾਡੇ ਮੌਜੂਦਾ ਵਿਊਪੋਰਟ ਵਿੱਚ ਦਿਖਾਈ ਦੇ ਰਹੀ ਹੈ।

  • ਫ਼ੋਨ✔ ਫ਼ੋਨ
  • ਟੈਬਲੇਟ✔ ਟੈਬਲੇਟ
  • ਡੈਸਕਟਾਪ✔ ਡੈਸਕਟਾਪ

'ਤੇ ਲੁਕਿਆ ਹੋਇਆ...

ਇੱਥੇ, ਹਰੇ ਚੈੱਕਮਾਰਕ ਦਰਸਾਉਂਦੇ ਹਨ ਕਿ ਕਲਾਸ ਤੁਹਾਡੇ ਮੌਜੂਦਾ ਵਿਊਪੋਰਟ ਵਿੱਚ ਲੁਕੀ ਹੋਈ ਹੈ।

  • ਫ਼ੋਨ✔ ਫ਼ੋਨ
  • ਟੈਬਲੇਟ✔ ਟੈਬਲੇਟ
  • ਡੈਸਕਟਾਪ✔ ਡੈਸਕਟਾਪ