ਸਕੈਫੋਲਡਿੰਗ

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

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

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

ਉਦਾਹਰਨ

ਕਾਲਮ ਦਾ ਪੱਧਰ 1

ਪੱਧਰ 2

<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 ਤੋਂ 940px ਤੱਕ	44px	20px
ਡਿਫਾਲਟ	940px ਅਤੇ ਵੱਧ	60px	20px
ਵੱਡਾ ਡਿਸਪਲੇ	1210px ਅਤੇ ਵੱਧ	70px	30px

ਉਹ ਕੀ ਕਰਦੇ ਹਨ

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

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

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

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

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

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

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