ਸਕੈਫੋਲਡਿੰਗ

HTML5 doctype ਦੀ ਲੋੜ ਹੈ

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

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

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

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

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

ਇਹ ਸ਼ੈਲੀਆਂ scaffolding.less ਦੇ ਅੰਦਰ ਲੱਭੀਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ ।

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

Bootstrap 2 ਦੇ ਨਾਲ, ਪੁਰਾਣੇ ਰੀਸੈਟ ਬਲਾਕ ਨੂੰ Normalize.css ਦੇ ਹੱਕ ਵਿੱਚ ਛੱਡ ਦਿੱਤਾ ਗਿਆ ਹੈ, ਜੋ ਕਿ ਨਿਕੋਲਸ ਗਾਲਾਘਰ ਅਤੇ ਜੋਨਾਥਨ ਨੀਲ ਦੁਆਰਾ ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਹੈ ਜੋ HTML5 ਬੋਇਲਰਪਲੇਟ ਨੂੰ ਵੀ ਸ਼ਕਤੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ । ਜਦੋਂ ਕਿ ਅਸੀਂ ਆਪਣੇ reset.less ਵਿੱਚ Normalize ਦੀ ਜ਼ਿਆਦਾ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ , ਅਸੀਂ ਖਾਸ ਤੌਰ 'ਤੇ ਬੂਟਸਟਰੈਪ ਲਈ ਕੁਝ ਤੱਤ ਹਟਾ ਦਿੱਤੇ ਹਨ।

ਲਾਈਵ ਗਰਿੱਡ ਉਦਾਹਰਨ

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

ਮੂਲ ਗਰਿੱਡ HTML

ਇੱਕ ਸਧਾਰਨ ਦੋ ਕਾਲਮ ਲੇਆਉਟ ਲਈ, ਇੱਕ ਬਣਾਓ ਅਤੇ ਕਾਲਮਾਂ .rowਦੀ ਢੁਕਵੀਂ ਸੰਖਿਆ ਜੋੜੋ । .span*ਕਿਉਂਕਿ ਇਹ ਇੱਕ 12-ਕਾਲਮ ਗਰਿੱਡ ਹੈ, ਹਰ .span*ਇੱਕ ਉਹਨਾਂ 12 ਕਾਲਮਾਂ ਦੀ ਇੱਕ ਸੰਖਿਆ ਨੂੰ ਫੈਲਾਉਂਦਾ ਹੈ, ਅਤੇ ਹਰ ਕਤਾਰ (ਜਾਂ ਮੂਲ ਵਿੱਚ ਕਾਲਮਾਂ ਦੀ ਸੰਖਿਆ) ਲਈ ਹਮੇਸ਼ਾਂ 12 ਤੱਕ ਜੋੜਨਾ ਚਾਹੀਦਾ ਹੈ।

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

ਇਸ ਉਦਾਹਰਨ ਦੇ ਮੱਦੇਨਜ਼ਰ, ਸਾਡੇ ਕੋਲ ਹੈ .span4ਅਤੇ .span8, ਕੁੱਲ 12 ਕਾਲਮਾਂ ਅਤੇ ਇੱਕ ਪੂਰੀ ਕਤਾਰ ਬਣਾਉਣਾ।

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

.offset*ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਾਲਮਾਂ ਨੂੰ ਸੱਜੇ ਪਾਸੇ ਲਿਜਾਓ । ਹਰੇਕ ਕਲਾਸ ਇੱਕ ਕਾਲਮ ਦੇ ਖੱਬੇ ਹਾਸ਼ੀਏ ਨੂੰ ਇੱਕ ਪੂਰੇ ਕਾਲਮ ਦੁਆਰਾ ਵਧਾਉਂਦੀ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਚਾਰ ਕਾਲਮਾਂ ਉੱਤੇ .offset4ਚਲਦਾ ਹੈ।.span4

3 ਆਫਸੈੱਟ 2

3 ਆਫਸੈੱਟ 1

3 ਆਫਸੈੱਟ 2

6 ਆਫਸੈੱਟ 3

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

ਨੇਸਟਿੰਗ ਕਾਲਮ

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

ਪੱਧਰ 1 ਕਾਲਮ

ਪੱਧਰ 2

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

ਲਾਈਵ ਤਰਲ ਗਰਿੱਡ ਉਦਾਹਰਨ

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

ਮੂਲ ਤਰਲ ਗਰਿੱਡ HTML

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

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

ਤਰਲ ਔਫਸੈਟਿੰਗ

ਫਿਕਸਡ ਗਰਿੱਡ ਸਿਸਟਮ ਆਫਸੈਟਿੰਗ ਵਾਂਗ ਹੀ ਕੰਮ ਕਰਦਾ ਹੈ: .offset*ਬਹੁਤ ਸਾਰੇ ਕਾਲਮਾਂ ਦੁਆਰਾ ਆਫਸੈੱਟ ਕਰਨ ਲਈ ਕਿਸੇ ਵੀ ਕਾਲਮ ਵਿੱਚ ਜੋੜੋ।

4 ਆਫਸੈੱਟ 4

3 ਆਫਸੈੱਟ 3

6 ਆਫਸੈੱਟ 6

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

ਤਰਲ ਆਲ੍ਹਣਾ

ਫਲੂਇਡ ਗਰਿੱਡ ਆਲ੍ਹਣੇ ਨੂੰ ਵੱਖਰੇ ਢੰਗ ਨਾਲ ਵਰਤਦੇ ਹਨ: ਕਾਲਮਾਂ ਦੇ ਹਰੇਕ ਨੇਸਟਡ ਪੱਧਰ ਵਿੱਚ 12 ਕਾਲਮ ਸ਼ਾਮਲ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ। ਇਹ ਇਸ ਲਈ ਹੈ ਕਿਉਂਕਿ ਤਰਲ ਗਰਿੱਡ ਚੌੜਾਈ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਪ੍ਰਤੀਸ਼ਤ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਪਿਕਸਲ ਦੀ ਨਹੀਂ।

ਤਰਲ 12

ਤਰਲ 6

<div ਕਲਾਸ = "ਰੋ-ਤਰਲ" > 
  <div ਕਲਾਸ = "span12" > 
    ਤਰਲ 12
    <div ਕਲਾਸ = "ਰੋ-ਤਰਲ" > 
      <div ਕਲਾਸ = "span6" > 
        ਤਰਲ 6
        <div ਕਲਾਸ = "ਰੋ-ਤਰਲ" > 
          <div class = "span6" > ਤਰਲ 6 </div> 
          <div class = "span6" > ਤਰਲ 6 </div> 
        </div>
      </div>
      <div class = "span6" > ਤਰਲ 6 </div> 
    </div>
  </div>
</div>

ਸਥਿਰ ਖਾਕਾ

<div class="container">ਸਿਰਫ਼ ਲੋੜੀਂਦੇ ਨਾਲ ਇੱਕ ਆਮ ਸਥਿਰ-ਚੌੜਾਈ (ਅਤੇ ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ ਜਵਾਬਦੇਹ) ਖਾਕਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ।

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

ਤਰਲ ਖਾਕਾ

ਇੱਕ ਤਰਲ, ਦੋ-ਕਾਲਮ ਵਾਲਾ ਪੰਨਾ ਬਣਾਓ — <div class="container-fluid">ਐਪਲੀਕੇਸ਼ਨਾਂ ਅਤੇ ਦਸਤਾਵੇਜ਼ਾਂ ਲਈ ਬਹੁਤ ਵਧੀਆ।

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

ਜਵਾਬਦੇਹ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਸਮਰੱਥ ਕਰਨਾ

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

<ਮੈਟਾ ਨਾਮ = "ਵਿਊਪੋਰਟ" ਸਮੱਗਰੀ = "ਚੌੜਾਈ=ਡਿਵਾਈਸ-ਚੌੜਾਈ, ਸ਼ੁਰੂਆਤੀ-ਸਕੇਲ=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

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

ਜਵਾਬਦੇਹ ਬੂਟਸਟਰੈਪ ਬਾਰੇ

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

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

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

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

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

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

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

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

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

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

ਕਦੋਂ ਵਰਤਣਾ ਹੈ

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

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

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

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

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

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

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

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

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

ਗਲੋਬਲ ਸੈਟਿੰਗਜ਼