ਸਕੈਫੋਲਡਿੰਗ

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

HTML5 doctype ਦੀ ਲੋੜ ਹੈ

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

<!DOCTYPE html>
<html lang = "en" > 
  ...
</html>

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

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

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

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

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

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

ਬੂਟਸਟਰੈਪ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਪ੍ਰਦਾਨ ਕੀਤਾ ਡਿਫੌਲਟ ਗਰਿੱਡ ਸਿਸਟਮ ਇੱਕ 940px-ਚੌੜਾ, 12-ਕਾਲਮ ਗਰਿੱਡ ਹੈ ।

ਇਸ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ ਅਤੇ ਰੈਜ਼ੋਲਿਊਸ਼ਨਾਂ ਲਈ ਚਾਰ ਜਵਾਬਦੇਹ ਭਿੰਨਤਾਵਾਂ ਵੀ ਹਨ: ਫ਼ੋਨ, ਟੈਬਲੇਟ ਪੋਰਟਰੇਟ, ਟੇਬਲ ਲੈਂਡਸਕੇਪ ਅਤੇ ਛੋਟੇ ਡੈਸਕਟੌਪ, ਅਤੇ ਵੱਡੇ ਵਾਈਡਸਕ੍ਰੀਨ ਡੈਸਕਟਾਪ।

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

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

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

4 ਆਫਸੈੱਟ 4

3 ਆਫਸੈੱਟ 3

8 ਆਫਸੈੱਟ 4

<div ਕਲਾਸ = "ਕਤਾਰ" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

ਨੇਸਟਿੰਗ ਕਾਲਮ

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

ਉਦਾਹਰਨ

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

ਕਾਲਮ ਦਾ ਪੱਧਰ 1

ਪੱਧਰ 2

<div ਕਲਾਸ = "ਕਤਾਰ" > 
  <div ਕਲਾਸ = "span12" > 
    ਕਾਲਮ ਦਾ ਪੱਧਰ 1
    <div ਕਲਾਸ = "ਕਤਾਰ" > 
      <div class = "span6" > ਪੱਧਰ 2 </div> 
      <div class = "span6" > ਪੱਧਰ 2 </div> 
    </div>
  </div>
</div>

ਤਰਲ ਕਾਲਮ

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

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

ਤਰਲ ਕਤਾਰਾਂ

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

ਮਾਰਕਅੱਪ

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

ਤਰਲ ਆਲ੍ਹਣਾ

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

ਤਰਲ 12

ਤਰਲ 6

<div ਕਲਾਸ = "ਰੋ-ਤਰਲ" > 
  <div ਕਲਾਸ = "span12" > 
    ਕਾਲਮ ਦਾ ਪੱਧਰ 1
    <div ਕਲਾਸ = "ਰੋ-ਤਰਲ" > 
      <div class = "span6" > ਪੱਧਰ 2 </div> 
      <div class = "span6" > ਪੱਧਰ 2 </div> 
    </div>
  </div>
</div>

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

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

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

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

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

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

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

ਸਥਿਰ ਖਾਕਾ

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

<body>
  <div ਕਲਾਸ = "ਕੰਟੇਨਰ" > 
    ...
  </div>
</body>

ਤਰਲ ਖਾਕਾ

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

<div ਕਲਾਸ = "ਕੰਟੇਨਰ-ਤਰਲ" > 
  <div ਕਲਾਸ = "ਰੋ-ਤਰਲ" > 
    <div ਕਲਾਸ = "span2" > 
      <!--ਸਾਈਡਬਾਰ ਸਮੱਗਰੀ-->
    </div>
    <div ਕਲਾਸ = "span10" > 
      <!--ਸਰੀਰ ਦੀ ਸਮੱਗਰੀ-->
    </div>
  </div>
</div>

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

ਉਹ ਕੀ ਕਰਦੇ ਹਨ

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

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

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

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

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

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

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

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

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

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

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

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

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

  // ਲੈਂਡਸਕੇਪ ਫੋਨ ਅਤੇ ਡਾਊਨ
  @ਮੀਡੀਆ ( ਅਧਿਕਤਮ - ਚੌੜਾਈ : 480px ) { ... }     
 
  // ਪੋਰਟਰੇਟ ਟੈਬਲੇਟ ਤੋਂ ਲੈਂਡਸਕੇਪ ਫੋਨ
  @ਮੀਡੀਆ ( ਅਧਿਕਤਮ - ਚੌੜਾਈ : 768px ) { ... }     
 
  // ਲੈਂਡਸਕੇਪ ਅਤੇ ਡੈਸਕਟੌਪ ਲਈ ਪੋਰਟਰੇਟ ਟੈਬਲੇਟ
  @ਮੀਡੀਆ ( ਘੱਟੋ - ਘੱਟ ਚੌੜਾਈ : 768px ) ਅਤੇ ( ਅਧਿਕਤਮ - ਚੌੜਾਈ : 980px ) { ... }        
 
  // ਵੱਡਾ ਡੈਸਕਟਾਪ
  @ਮੀਡੀਆ ( ਮਿੰਟ - ਚੌੜਾਈ : 1200px ) { .. }

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

ਉਹ ਕੀ ਹਨ

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

ਕਦੋਂ ਵਰਤਣਾ ਹੈ

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

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

ਸਪੋਰਟ ਕਲਾਸਾਂ

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

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

ਟੈਸਟ ਕੇਸ

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

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

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

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

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