ਸਕੈਫੋਲਡਿੰਗ

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

ਬੂਟਸਟਰੈਪ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਪ੍ਰਦਾਨ ਕੀਤਾ ਡਿਫੌਲਟ ਗਰਿੱਡ ਸਿਸਟਮ ਇੱਕ 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>

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

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

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

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

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

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

ਉਹ ਕੀ ਕਰਦੇ ਹਨ

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

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

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

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

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

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

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