in English

ਗਰਿੱਡ ਸਿਸਟਮ

ਬਾਰ੍ਹਾਂ ਕਾਲਮ ਸਿਸਟਮ, ਛੇ ਡਿਫੌਲਟ ਜਵਾਬਦੇਹ ਟੀਅਰ, Sass ਵੇਰੀਏਬਲ ਅਤੇ ਮਿਕਸਿਨ, ਅਤੇ ਦਰਜਨਾਂ ਪੂਰਵ-ਪ੍ਰਭਾਸ਼ਿਤ ਕਲਾਸਾਂ ਦੇ ਕਾਰਨ ਸਾਰੇ ਆਕਾਰਾਂ ਅਤੇ ਆਕਾਰਾਂ ਦੇ ਲੇਆਉਟ ਬਣਾਉਣ ਲਈ ਸਾਡੇ ਸ਼ਕਤੀਸ਼ਾਲੀ ਮੋਬਾਈਲ-ਪਹਿਲੇ ਫਲੈਕਸਬਾਕਸ ਗਰਿੱਡ ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਉਦਾਹਰਨ

ਬੂਟਸਟਰੈਪ ਦਾ ਗਰਿੱਡ ਸਿਸਟਮ ਸਮੱਗਰੀ ਨੂੰ ਲੇਆਉਟ ਅਤੇ ਇਕਸਾਰ ਕਰਨ ਲਈ ਕੰਟੇਨਰਾਂ, ਕਤਾਰਾਂ ਅਤੇ ਕਾਲਮਾਂ ਦੀ ਇੱਕ ਲੜੀ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਇਹ flexbox ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ ਅਤੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਜਵਾਬਦੇਹ ਹੈ। ਹੇਠਾਂ ਇੱਕ ਉਦਾਹਰਨ ਅਤੇ ਇੱਕ ਡੂੰਘਾਈ ਨਾਲ ਵਿਆਖਿਆ ਹੈ ਕਿ ਗਰਿੱਡ ਸਿਸਟਮ ਕਿਵੇਂ ਇਕੱਠੇ ਆਉਂਦਾ ਹੈ।

flexbox ਲਈ ਨਵੇਂ ਜਾਂ ਅਣਜਾਣ ਹੋ? ਪਿਛੋਕੜ, ਸ਼ਬਦਾਵਲੀ, ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ਾਂ, ਅਤੇ ਕੋਡ ਸਨਿੱਪਟਾਂ ਲਈ ਇਸ CSS ਟ੍ਰਿਕਸ ਫਲੈਕਸਬਾਕਸ ਗਾਈਡ ਨੂੰ ਪੜ੍ਹੋ ।

ਕਾਲਮ

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

ਉਪਰੋਕਤ ਉਦਾਹਰਨ ਸਾਡੀਆਂ ਪੂਰਵ-ਪ੍ਰਭਾਸ਼ਿਤ ਗਰਿੱਡ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਸਾਰੀਆਂ ਡਿਵਾਈਸਾਂ ਅਤੇ ਵਿਊਪੋਰਟਾਂ ਵਿੱਚ ਤਿੰਨ ਬਰਾਬਰ-ਚੌੜਾਈ ਵਾਲੇ ਕਾਲਮ ਬਣਾਉਂਦਾ ਹੈ। ਉਹ ਕਾਲਮ ਪੇਰੈਂਟ ਦੇ ਨਾਲ ਪੰਨੇ ਵਿੱਚ ਕੇਂਦਰਿਤ ਹੁੰਦੇ ਹਨ .container।

ਕਿਦਾ ਚਲਦਾ

ਇਸ ਨੂੰ ਤੋੜਨਾ, ਇੱਥੇ ਗਰਿੱਡ ਸਿਸਟਮ ਕਿਵੇਂ ਇਕੱਠੇ ਆਉਂਦਾ ਹੈ:

ਸਾਡਾ ਗਰਿੱਡ ਛੇ ਜਵਾਬਦੇਹ ਬਰੇਕਪੁਆਇੰਟਸ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ । ਬ੍ਰੇਕਪੁਆਇੰਟ min-widthਮੀਡੀਆ ਸਵਾਲਾਂ 'ਤੇ ਆਧਾਰਿਤ ਹੁੰਦੇ ਹਨ, ਮਤਲਬ ਕਿ ਉਹ ਉਸ ਬ੍ਰੇਕਪੁਆਇੰਟ ਅਤੇ ਇਸ ਤੋਂ ਉੱਪਰਲੇ ਸਾਰੇ ਲੋਕਾਂ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦੇ ਹਨ (ਉਦਾਹਰਨ ਲਈ , , , , , ਅਤੇ ) .col-sm-4'ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ । ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ ਹਰੇਕ ਬ੍ਰੇਕਪੁਆਇੰਟ ਦੁਆਰਾ ਕੰਟੇਨਰ ਅਤੇ ਕਾਲਮ ਦੇ ਆਕਾਰ ਅਤੇ ਵਿਵਹਾਰ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰ ਸਕਦੇ ਹੋ।smmdlgxlxxl
ਕੰਟੇਨਰ ਕੇਂਦਰ ਅਤੇ ਖਿਤਿਜੀ ਤੌਰ 'ਤੇ ਤੁਹਾਡੀ ਸਮੱਗਰੀ ਨੂੰ ਪੈਡ ਕਰੋ। .containerਇੱਕ ਜਵਾਬਦੇਹ ਪਿਕਸਲ ਚੌੜਾਈ ਲਈ, ਸਾਰੇ ਵਿਊਪੋਰਟਾਂ ਅਤੇ ਡਿਵਾਈਸਾਂ ਲਈ, ਜਾਂ ਤਰਲ ਅਤੇ ਪਿਕਸਲ ਚੌੜਾਈ ਦੇ ਸੁਮੇਲ ਲਈ ਇੱਕ ਜਵਾਬਦੇਹ ਕੰਟੇਨਰ (ਉਦਾਹਰਨ ਲਈ, .container-fluid) ਲਈ ਵਰਤੋ।width: 100%.container-md
ਕਤਾਰਾਂ ਕਾਲਮਾਂ ਲਈ ਰੈਪਰ ਹਨ। ਹਰੇਕ ਕਾਲਮ ਵਿੱਚ paddingਉਹਨਾਂ ਵਿਚਕਾਰ ਸਪੇਸ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਲਈ ਹਰੀਜੱਟਲ (ਜਿਸਨੂੰ ਗਟਰ ਕਿਹਾ ਜਾਂਦਾ ਹੈ) ਹੁੰਦਾ ਹੈ। ਇਹ paddingਫਿਰ ਨੈਗੇਟਿਵ ਹਾਸ਼ੀਏ ਨਾਲ ਕਤਾਰਾਂ 'ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਤਾਂ ਜੋ ਇਹ ਯਕੀਨੀ ਬਣਾਇਆ ਜਾ ਸਕੇ ਕਿ ਤੁਹਾਡੇ ਕਾਲਮਾਂ ਵਿੱਚ ਸਮੱਗਰੀ ਨੂੰ ਖੱਬੇ ਪਾਸੇ ਦ੍ਰਿਸ਼ਟੀਗਤ ਤੌਰ 'ਤੇ ਇਕਸਾਰ ਕੀਤਾ ਗਿਆ ਹੈ। ਕਤਾਰਾਂ ਤੁਹਾਡੀ ਸਮੱਗਰੀ ਦੀ ਸਪੇਸਿੰਗ ਨੂੰ ਬਦਲਣ ਲਈ ਕਾਲਮ ਸਾਈਜ਼ਿੰਗ ਅਤੇ ਗਟਰ ਕਲਾਸਾਂ ਨੂੰ ਸਮਾਨ ਰੂਪ ਵਿੱਚ ਲਾਗੂ ਕਰਨ ਲਈ ਸੋਧਕ ਕਲਾਸਾਂ ਦਾ ਸਮਰਥਨ ਕਰਦੀਆਂ ਹਨ।
ਕਾਲਮ ਬਹੁਤ ਹੀ ਲਚਕਦਾਰ ਹਨ. ਪ੍ਰਤੀ ਕਤਾਰ ਵਿੱਚ 12 ਟੈਮਪਲੇਟ ਕਾਲਮ ਉਪਲਬਧ ਹਨ, ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਵੱਖ-ਵੱਖ ਤੱਤਾਂ ਦੇ ਸੰਜੋਗ ਬਣਾ ਸਕਦੇ ਹੋ ਜੋ ਕਿਸੇ ਵੀ ਸੰਖਿਆ ਦੇ ਕਾਲਮਾਂ ਵਿੱਚ ਫੈਲਦੇ ਹਨ। ਕਾਲਮ ਕਲਾਸਾਂ ਸਪੈਨ ਕਰਨ ਲਈ ਟੈਂਪਲੇਟ ਕਾਲਮਾਂ ਦੀ ਸੰਖਿਆ ਨੂੰ ਦਰਸਾਉਂਦੀਆਂ ਹਨ (ਉਦਾਹਰਨ ਲਈ, col-4ਸਪੈਨ ਚਾਰ)। widths ਨੂੰ ਪ੍ਰਤੀਸ਼ਤ ਵਿੱਚ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ ਤਾਂ ਜੋ ਤੁਹਾਡੇ ਕੋਲ ਹਮੇਸ਼ਾ ਇੱਕੋ ਜਿਹਾ ਸਾਪੇਖਿਕ ਆਕਾਰ ਹੋਵੇ।
ਗਟਰ ਵੀ ਜਵਾਬਦੇਹ ਅਤੇ ਅਨੁਕੂਲਿਤ ਹਨ. ਗਟਰ ਕਲਾਸਾਂ ਸਾਡੇ ਹਾਸ਼ੀਏ ਅਤੇ ਪੈਡਿੰਗ ਸਪੇਸਿੰਗ ਦੇ ਸਮਾਨ ਆਕਾਰ ਦੇ ਨਾਲ, ਸਾਰੇ ਬ੍ਰੇਕਪੁਆਇੰਟਾਂ ਵਿੱਚ ਉਪਲਬਧ ਹਨ । ਕਲਾਸਾਂ ਵਾਲੇ ਹਰੀਜੱਟਲ ਗਟਰ, ਨਾਲ ਵਰਟੀਕਲ ਗਟਰ , ਜਾਂ ਕਲਾਸਾਂ ਵਾਲੇ ਸਾਰੇ ਗਟਰ ਬਦਲੋ । ਗਟਰਾਂ ਨੂੰ ਹਟਾਉਣ ਲਈ ਵੀ ਉਪਲਬਧ ਹੈ।.gx-*.gy-*.g-*.g-0
Sass ਵੇਰੀਏਬਲ, ਨਕਸ਼ੇ, ਅਤੇ ਮਿਸ਼ਰਣ ਗਰਿੱਡ ਨੂੰ ਪਾਵਰ ਦਿੰਦੇ ਹਨ। ਜੇਕਰ ਤੁਸੀਂ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਪਹਿਲਾਂ ਤੋਂ ਪਰਿਭਾਸ਼ਿਤ ਗਰਿੱਡ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਵਧੇਰੇ ਅਰਥਪੂਰਨ ਮਾਰਕਅੱਪ ਦੇ ਨਾਲ ਆਪਣਾ ਬਣਾਉਣ ਲਈ ਸਾਡੇ ਗਰਿੱਡ ਦੇ ਸਰੋਤ Sass ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ। ਅਸੀਂ ਤੁਹਾਡੇ ਲਈ ਹੋਰ ਵੀ ਵਧੇਰੇ ਲਚਕਤਾ ਲਈ ਇਹਨਾਂ Sass ਵੇਰੀਏਬਲਾਂ ਨੂੰ ਵਰਤਣ ਲਈ ਕੁਝ CSS ਕਸਟਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵੀ ਸ਼ਾਮਲ ਕਰਦੇ ਹਾਂ।

flexbox ਦੇ ਆਲੇ-ਦੁਆਲੇ ਦੀਆਂ ਕਮੀਆਂ ਅਤੇ ਬੱਗਾਂ ਬਾਰੇ ਸੁਚੇਤ ਰਹੋ , ਜਿਵੇਂ ਕਿ ਕੁਝ HTML ਤੱਤਾਂ ਨੂੰ ਫਲੈਕਸ ਕੰਟੇਨਰਾਂ ਵਜੋਂ ਵਰਤਣ ਦੀ ਅਯੋਗਤਾ ।

ਗਰਿੱਡ ਵਿਕਲਪ

ਬੂਟਸਟਰੈਪ ਦਾ ਗਰਿੱਡ ਸਿਸਟਮ ਸਾਰੇ ਛੇ ਡਿਫੌਲਟ ਬ੍ਰੇਕਪੁਆਇੰਟਸ, ਅਤੇ ਤੁਹਾਡੇ ਦੁਆਰਾ ਅਨੁਕੂਲਿਤ ਕੀਤੇ ਕਿਸੇ ਵੀ ਬ੍ਰੇਕਪੁਆਇੰਟ ਵਿੱਚ ਅਨੁਕੂਲ ਹੋ ਸਕਦਾ ਹੈ। ਛੇ ਡਿਫੌਲਟ ਗਰਿੱਡ ਟੀਅਰ ਹੇਠ ਲਿਖੇ ਅਨੁਸਾਰ ਹਨ:

ਵਾਧੂ ਛੋਟਾ (xs)
ਛੋਟਾ (sm)
ਮੱਧਮ (md)
ਵੱਡਾ (lg)
ਵਾਧੂ ਵੱਡਾ (xl)
ਵਾਧੂ ਵਾਧੂ ਵੱਡਾ (xxl)

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

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
ਕੰਟੇਨਰ`max-width`	ਕੋਈ ਨਹੀਂ (ਆਟੋ)	540px	720px	960px	1140px	1320px
ਕਲਾਸ ਅਗੇਤਰ	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
ਕਾਲਮਾਂ ਦਾ #	12
ਗਟਰ ਦੀ ਚੌੜਾਈ	1.5rem (ਖੱਬੇ ਅਤੇ ਸੱਜੇ ਪਾਸੇ 75rem)
ਕਸਟਮ ਗਟਰ	ਹਾਂ
ਨੇਸਟਬਲ	ਹਾਂ
ਕਾਲਮ ਆਰਡਰਿੰਗ	ਹਾਂ

ਆਟੋ-ਲੇਆਉਟ ਕਾਲਮ

ਬਿਨਾਂ ਕਿਸੇ ਸਪਸ਼ਟ ਨੰਬਰ ਵਾਲੀ ਕਲਾਸ ਦੇ ਆਸਾਨ ਕਾਲਮ ਆਕਾਰ ਲਈ ਬ੍ਰੇਕਪੁਆਇੰਟ-ਵਿਸ਼ੇਸ਼ ਕਾਲਮ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ .col-sm-6।

ਬਰਾਬਰ-ਚੌੜਾਈ

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

2 ਵਿੱਚੋਂ 1

2 ਵਿੱਚੋਂ 2

3 ਵਿੱਚੋਂ 1

3 ਵਿੱਚੋਂ 2

3 ਵਿੱਚੋਂ 3

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

ਇੱਕ ਕਾਲਮ ਦੀ ਚੌੜਾਈ ਸੈੱਟ ਕਰ ਰਿਹਾ ਹੈ

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

3 ਵਿੱਚੋਂ 1

3 ਵਿੱਚੋਂ 2 (ਵਿਆਪਕ)

3 ਵਿੱਚੋਂ 3

3 ਵਿੱਚੋਂ 1

3 ਵਿੱਚੋਂ 2 (ਵਿਆਪਕ)

3 ਵਿੱਚੋਂ 3

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

ਵੇਰੀਏਬਲ ਚੌੜਾਈ ਸਮੱਗਰੀ

col-{breakpoint}-autoਉਹਨਾਂ ਦੀ ਸਮੱਗਰੀ ਦੀ ਕੁਦਰਤੀ ਚੌੜਾਈ ਦੇ ਆਧਾਰ 'ਤੇ ਕਾਲਮਾਂ ਨੂੰ ਆਕਾਰ ਦੇਣ ਲਈ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।

3 ਵਿੱਚੋਂ 1

ਵੇਰੀਏਬਲ ਚੌੜਾਈ ਸਮੱਗਰੀ

3 ਵਿੱਚੋਂ 3

3 ਵਿੱਚੋਂ 1

ਵੇਰੀਏਬਲ ਚੌੜਾਈ ਸਮੱਗਰੀ

3 ਵਿੱਚੋਂ 3

html

<div class="container text-center">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

ਜਵਾਬਦੇਹ ਕਲਾਸਾਂ

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

ਸਾਰੇ ਬ੍ਰੇਕਪੁਆਇੰਟ

ਸਭ ਤੋਂ ਛੋਟੀਆਂ ਡਿਵਾਈਸਾਂ ਤੋਂ ਲੈ ਕੇ ਸਭ ਤੋਂ ਵੱਡੇ ਤੱਕ ਇੱਕੋ ਜਿਹੇ ਗਰਿੱਡਾਂ ਲਈ, .colਅਤੇ .col-*ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਜਦੋਂ ਤੁਹਾਨੂੰ ਕਿਸੇ ਖਾਸ ਆਕਾਰ ਦੇ ਕਾਲਮ ਦੀ ਲੋੜ ਹੋਵੇ ਤਾਂ ਇੱਕ ਨੰਬਰ ਵਾਲੀ ਸ਼੍ਰੇਣੀ ਦਿਓ; ਨਹੀਂ ਤਾਂ, ਨਾਲ ਜੁੜੇ ਰਹਿਣ ਲਈ ਸੁਤੰਤਰ ਮਹਿਸੂਸ ਕਰੋ .col।

ਕਰਨਲ

ਕੋਲ-8

ਕੋਲ-4

html

<div class="container text-center">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

ਲੇਟਵੇਂ ਤੱਕ ਸਟੈਕਡ

ਕਲਾਸਾਂ ਦੇ ਇੱਕ ਸਿੰਗਲ ਸੈੱਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ .col-sm-*, ਤੁਸੀਂ ਇੱਕ ਬੁਨਿਆਦੀ ਗਰਿੱਡ ਸਿਸਟਮ ਬਣਾ ਸਕਦੇ ਹੋ ਜੋ ਸਟੈਕਡ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਅਤੇ ਛੋਟੇ ਬ੍ਰੇਕਪੁਆਇੰਟ ( sm) 'ਤੇ ਹਰੀਜੱਟਲ ਬਣ ਜਾਂਦਾ ਹੈ।

col-sm-8

col-sm-4

col-sm

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

ਮਿਕਸ ਅਤੇ ਮੈਚ

ਕੀ ਤੁਸੀਂ ਨਹੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਤੁਹਾਡੇ ਕਾਲਮ ਕੁਝ ਗਰਿੱਡ ਪੱਧਰਾਂ ਵਿੱਚ ਸਟੈਕ ਹੋਣ? ਲੋੜ ਅਨੁਸਾਰ ਹਰੇਕ ਪੱਧਰ ਲਈ ਵੱਖ-ਵੱਖ ਸ਼੍ਰੇਣੀਆਂ ਦੇ ਸੁਮੇਲ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਸਭ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ ਇਸ ਬਾਰੇ ਬਿਹਤਰ ਵਿਚਾਰ ਲਈ ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਨ ਦੇਖੋ।

.col-md-8

.col-6 .col-md-4

.col-6

html

<div class="container text-center">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

ਕਤਾਰ ਕਾਲਮ

.row-cols-*ਤੁਹਾਡੀ ਸਮੱਗਰੀ ਅਤੇ ਲੇਆਉਟ ਨੂੰ ਸਭ ਤੋਂ ਵਧੀਆ ਰੈਂਡਰ ਕਰਨ ਵਾਲੇ ਕਾਲਮਾਂ ਦੀ ਸੰਖਿਆ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਸੈੱਟ ਕਰਨ ਲਈ ਜਵਾਬਦੇਹ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ । ਜਦੋਂ ਕਿ ਆਮ .col-*ਕਲਾਸਾਂ ਵਿਅਕਤੀਗਤ ਕਾਲਮਾਂ (ਜਿਵੇਂ ਕਿ, .col-md-4) 'ਤੇ ਲਾਗੂ ਹੁੰਦੀਆਂ ਹਨ, ਕਤਾਰ ਕਾਲਮਾਂ ਦੀਆਂ ਕਲਾਸਾਂ .rowਨੂੰ ਇੱਕ ਸ਼ਾਰਟਕੱਟ ਦੇ ਤੌਰ 'ਤੇ ਪੇਰੈਂਟ 'ਤੇ ਸੈੱਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਸਦੇ ਨਾਲ .row-cols-autoਤੁਸੀਂ ਕਾਲਮਾਂ ਨੂੰ ਉਹਨਾਂ ਦੀ ਕੁਦਰਤੀ ਚੌੜਾਈ ਦੇ ਸਕਦੇ ਹੋ.

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

ਕਾਲਮ

html

<div class="container text-center">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ਕਾਲਮ

html

<div class="container text-center">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ਕਾਲਮ

html

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ਕਾਲਮ

html

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ਕਾਲਮ

html

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ਕਾਲਮ

html

<div class="container text-center">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ਤੁਸੀਂ ਸਾਸ ਮਿਕਸਿਨ ਦੀ ਵਰਤੋਂ ਵੀ ਕਰ ਸਕਦੇ ਹੋ row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

ਆਲ੍ਹਣਾ

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

ਪੱਧਰ 1: .col-sm-3

ਪੱਧਰ 2: .col-8 .col-sm-6

ਪੱਧਰ 2: .col-4 .col-sm-6

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

ਸੱਸ

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

ਵੇਰੀਏਬਲ

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

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

ਮਿਕਸਿਨਸ

ਮਿਕਸਿਨਾਂ ਦੀ ਵਰਤੋਂ ਵਿਅਕਤੀਗਤ ਗਰਿੱਡ ਕਾਲਮਾਂ ਲਈ ਸਿਮੈਂਟਿਕ CSS ਬਣਾਉਣ ਲਈ ਗਰਿੱਡ ਵੇਰੀਏਬਲ ਦੇ ਨਾਲ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

ਉਦਾਹਰਨ ਵਰਤੋਂ

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

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

ਮੁੱਖ ਸਮੱਗਰੀ

ਸੈਕੰਡਰੀ ਸਮੱਗਰੀ

html

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

ਗਰਿੱਡ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨਾ

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

ਕਾਲਮ ਅਤੇ ਗਟਰ

ਗਰਿੱਡ ਕਾਲਮਾਂ ਦੀ ਸੰਖਿਆ ਨੂੰ Sass ਵੇਰੀਏਬਲ ਦੁਆਰਾ ਸੋਧਿਆ ਜਾ ਸਕਦਾ ਹੈ। $grid-columnsਦੀ ਵਰਤੋਂ ਹਰੇਕ ਵਿਅਕਤੀਗਤ ਕਾਲਮ ਦੀ ਚੌੜਾਈ (ਪ੍ਰਤੀਸ਼ਤ ਵਿੱਚ) ਬਣਾਉਣ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਜਦੋਂ $grid-gutter-widthਕਿ ਕਾਲਮ ਗਟਰਾਂ ਲਈ ਚੌੜਾਈ ਨਿਰਧਾਰਤ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। $grid-row-columnsਦੇ ਕਾਲਮਾਂ ਦੀ ਅਧਿਕਤਮ ਸੰਖਿਆ ਨੂੰ ਸੈੱਟ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ .row-cols-*, ਇਸ ਸੀਮਾ ਤੋਂ ਵੱਧ ਕਿਸੇ ਵੀ ਸੰਖਿਆ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

ਗਰਿੱਡ ਪੱਧਰ

ਕਾਲਮਾਂ ਤੋਂ ਅੱਗੇ ਵਧਦੇ ਹੋਏ, ਤੁਸੀਂ ਗਰਿੱਡ ਪੱਧਰਾਂ ਦੀ ਸੰਖਿਆ ਨੂੰ ਵੀ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹੋ। ਜੇ ਤੁਸੀਂ ਸਿਰਫ਼ ਚਾਰ ਗਰਿੱਡ ਟੀਅਰ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਇਸ ਨੂੰ $grid-breakpointsਅਤੇ $container-max-widthsਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਅਪਡੇਟ ਕਰੋਗੇ:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

ਜਦੋਂ Sass ਵੇਰੀਏਬਲ ਜਾਂ ਨਕਸ਼ੇ ਵਿੱਚ ਕੋਈ ਬਦਲਾਅ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਆਪਣੀਆਂ ਤਬਦੀਲੀਆਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਕਰਨ ਅਤੇ ਦੁਬਾਰਾ ਕੰਪਾਇਲ ਕਰਨ ਦੀ ਲੋੜ ਪਵੇਗੀ। ਅਜਿਹਾ ਕਰਨ ਨਾਲ ਕਾਲਮ ਦੀ ਚੌੜਾਈ, ਆਫਸੈੱਟਾਂ ਅਤੇ ਆਰਡਰਿੰਗ ਲਈ ਪੂਰਵ-ਪ੍ਰਭਾਸ਼ਿਤ ਗਰਿੱਡ ਕਲਾਸਾਂ ਦਾ ਬਿਲਕੁਲ ਨਵਾਂ ਸੈੱਟ ਆਉਟਪੁੱਟ ਹੋਵੇਗਾ। ਕਸਟਮ ਬ੍ਰੇਕਪੁਆਇੰਟਸ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਜਵਾਬਦੇਹ ਦਿੱਖ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਵੀ ਅਪਡੇਟ ਕੀਤਾ ਜਾਵੇਗਾ। ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਗਰਿੱਡ ਮੁੱਲਾਂ ਨੂੰ px(ਨਾ rem, em, ਜਾਂ %) ਵਿੱਚ ਸੈਟ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ।