Source

ਗਰਿੱਡ ਸਿਸਟਮ

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

ਕਿਦਾ ਚਲਦਾ

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

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

ਤਿੰਨ ਕਾਲਮਾਂ ਵਿੱਚੋਂ ਇੱਕ

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

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

ਇਸਨੂੰ ਤੋੜਨਾ, ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ:

ਕੰਟੇਨਰ ਤੁਹਾਡੀ ਸਾਈਟ ਦੀ ਸਮੱਗਰੀ ਨੂੰ ਕੇਂਦਰ ਅਤੇ ਖਿਤਿਜੀ ਤੌਰ 'ਤੇ ਪੈਡ ਕਰਨ ਦਾ ਸਾਧਨ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ। .containerਇੱਕ ਜਵਾਬਦੇਹ ਪਿਕਸਲ ਚੌੜਾਈ .container-fluidਲਈ ਜਾਂ width: 100%ਸਾਰੇ ਵਿਊਪੋਰਟ ਅਤੇ ਡਿਵਾਈਸ ਆਕਾਰਾਂ ਲਈ ਵਰਤੋਂ ।
ਕਤਾਰਾਂ ਕਾਲਮਾਂ ਲਈ ਰੈਪਰ ਹਨ। ਹਰੇਕ ਕਾਲਮ ਵਿੱਚ paddingਉਹਨਾਂ ਵਿਚਕਾਰ ਸਪੇਸ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਲਈ ਹਰੀਜੱਟਲ (ਜਿਸ ਨੂੰ ਗਟਰ ਕਿਹਾ ਜਾਂਦਾ ਹੈ) ਹੁੰਦਾ ਹੈ। ਇਹ paddingਫਿਰ ਨੈਗੇਟਿਵ ਹਾਸ਼ੀਏ ਨਾਲ ਕਤਾਰਾਂ 'ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਤਰ੍ਹਾਂ, ਤੁਹਾਡੇ ਕਾਲਮਾਂ ਦੀ ਸਾਰੀ ਸਮੱਗਰੀ ਖੱਬੇ ਪਾਸੇ ਦ੍ਰਿਸ਼ਟੀਗਤ ਤੌਰ 'ਤੇ ਇਕਸਾਰ ਹੁੰਦੀ ਹੈ।
ਇੱਕ ਗਰਿੱਡ ਲੇਆਉਟ ਵਿੱਚ, ਸਮੱਗਰੀ ਨੂੰ ਕਾਲਮਾਂ ਦੇ ਅੰਦਰ ਰੱਖਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਸਿਰਫ਼ ਕਾਲਮ ਹੀ ਕਤਾਰਾਂ ਦੇ ਤਤਕਾਲੀ ਬੱਚੇ ਹੋ ਸਕਦੇ ਹਨ।
ਫਲੈਕਸਬਾਕਸ ਦਾ ਧੰਨਵਾਦ, ਬਿਨਾਂ ਦਿੱਤੇ ਗਰਿੱਡ ਕਾਲਮ widthਬਰਾਬਰ ਚੌੜਾਈ ਵਾਲੇ ਕਾਲਮਾਂ ਦੇ ਰੂਪ ਵਿੱਚ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਲੇਆਉਟ ਹੋਣਗੇ। ਉਦਾਹਰਨ ਲਈ, ਵਿਲ ਦੀਆਂ ਚਾਰ ਉਦਾਹਰਨਾਂ .col-smਹਰ ਇੱਕ ਆਪਣੇ ਆਪ ਹੀ ਛੋਟੇ ਬ੍ਰੇਕਪੁਆਇੰਟ ਤੋਂ 25% ਚੌੜੀਆਂ ਅਤੇ ਵੱਧ ਹੋਣਗੀਆਂ। ਹੋਰ ਉਦਾਹਰਣਾਂ ਲਈ ਆਟੋ-ਲੇਆਉਟ ਕਾਲਮ ਸੈਕਸ਼ਨ ਦੇਖੋ ।
ਕਾਲਮ ਕਲਾਸਾਂ ਉਹਨਾਂ ਕਾਲਮਾਂ ਦੀ ਸੰਖਿਆ ਨੂੰ ਦਰਸਾਉਂਦੀਆਂ ਹਨ ਜੋ ਤੁਸੀਂ ਪ੍ਰਤੀ ਕਤਾਰ ਸੰਭਾਵਿਤ 12 ਵਿੱਚੋਂ ਵਰਤਣਾ ਚਾਹੁੰਦੇ ਹੋ। ਇਸ ਲਈ, ਜੇਕਰ ਤੁਸੀਂ ਤਿੰਨ ਬਰਾਬਰ-ਚੌੜਾਈ ਵਾਲੇ ਕਾਲਮ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ .col-4।
ਕਾਲਮ widths ਪ੍ਰਤੀਸ਼ਤ ਵਿੱਚ ਸੈੱਟ ਕੀਤੇ ਗਏ ਹਨ, ਇਸਲਈ ਉਹ ਹਮੇਸ਼ਾ ਤਰਲ ਅਤੇ ਉਹਨਾਂ ਦੇ ਮੂਲ ਤੱਤ ਦੇ ਅਨੁਸਾਰੀ ਆਕਾਰ ਦੇ ਹੁੰਦੇ ਹਨ।
paddingਵਿਅਕਤੀਗਤ ਕਾਲਮਾਂ ਦੇ ਵਿਚਕਾਰ ਗਟਰ ਬਣਾਉਣ ਲਈ ਕਾਲਮ ਹਰੀਜੱਟਲ ਹੁੰਦੇ ਹਨ, ਹਾਲਾਂਕਿ, ਤੁਸੀਂ marginਕਤਾਰਾਂ paddingਤੋਂ ਅਤੇ ਕਾਲਮਾਂ ਤੋਂ .no-gutters'ਤੇ ਦੇ ਨਾਲ ਹਟਾ ਸਕਦੇ ਹੋ .row।
ਗਰਿੱਡ ਨੂੰ ਜਵਾਬਦੇਹ ਬਣਾਉਣ ਲਈ, ਪੰਜ ਗਰਿੱਡ ਬ੍ਰੇਕਪੁਆਇੰਟ ਹਨ, ਹਰੇਕ ਜਵਾਬਦੇਹ ਬ੍ਰੇਕਪੁਆਇੰਟ ਲਈ ਇੱਕ : ਸਾਰੇ ਬ੍ਰੇਕਪੁਆਇੰਟ (ਵਾਧੂ ਛੋਟੇ), ਛੋਟੇ, ਦਰਮਿਆਨੇ, ਵੱਡੇ ਅਤੇ ਵਾਧੂ ਵੱਡੇ।
ਗਰਿੱਡ ਬ੍ਰੇਕਪੁਆਇੰਟ ਘੱਟੋ-ਘੱਟ ਚੌੜਾਈ ਵਾਲੇ ਮੀਡੀਆ ਸਵਾਲਾਂ 'ਤੇ ਆਧਾਰਿਤ ਹੁੰਦੇ ਹਨ, ਮਤਲਬ ਕਿ ਉਹ ਉਸ ਇੱਕ ਬ੍ਰੇਕਪੁਆਇੰਟ 'ਤੇ ਲਾਗੂ ਹੁੰਦੇ ਹਨ ਅਤੇ ਇਸ ਤੋਂ ਉੱਪਰ ਵਾਲੇ ਸਾਰੇ (ਉਦਾਹਰਨ ਲਈ, .col-sm-4ਛੋਟੇ, ਦਰਮਿਆਨੇ, ਵੱਡੇ, ਅਤੇ ਵਾਧੂ ਵੱਡੇ ਯੰਤਰਾਂ 'ਤੇ ਲਾਗੂ ਹੁੰਦੇ ਹਨ, ਪਰ ਪਹਿਲੇ xsਬ੍ਰੇਕਪੁਆਇੰਟ 'ਤੇ ਨਹੀਂ)।
ਤੁਸੀਂ ਹੋਰ ਸਿਮੈਂਟਿਕ ਮਾਰਕਅੱਪ ਲਈ ਪੂਰਵ ਪਰਿਭਾਸ਼ਿਤ ਗਰਿੱਡ ਕਲਾਸਾਂ (ਜਿਵੇਂ .col-4) ਜਾਂ ਸਾਸ ਮਿਕਸਿਨ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।

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

ਗਰਿੱਡ ਵਿਕਲਪ

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

ਦੇਖੋ ਕਿ ਬੂਟਸਟਰੈਪ ਗਰਿੱਡ ਸਿਸਟਮ ਦੇ ਪਹਿਲੂ ਇੱਕ ਸੌਖੀ ਟੇਬਲ ਨਾਲ ਕਈ ਡਿਵਾਈਸਾਂ ਵਿੱਚ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ।

	ਵਾਧੂ ਛੋਟਾ <576px	ਛੋਟਾ ≥576px	ਮੱਧਮ ≥768px	ਵੱਡਾ ≥992px	ਵਾਧੂ ਵੱਡਾ ≥1200px
ਕੰਟੇਨਰ ਦੀ ਅਧਿਕਤਮ ਚੌੜਾਈ	ਕੋਈ ਨਹੀਂ (ਆਟੋ)	540px	720px	960px	1140px
ਕਲਾਸ ਅਗੇਤਰ	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
ਕਾਲਮਾਂ ਦਾ #	12
ਗਟਰ ਦੀ ਚੌੜਾਈ	30px (ਇੱਕ ਕਾਲਮ ਦੇ ਹਰੇਕ ਪਾਸੇ 15px)
ਨੇਸਟਬਲ	ਹਾਂ
ਕਾਲਮ ਆਰਡਰਿੰਗ	ਹਾਂ

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

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

ਬਰਾਬਰ-ਚੌੜਾਈ

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

2 ਵਿੱਚੋਂ 1

2 ਵਿੱਚੋਂ 2

3 ਵਿੱਚੋਂ 1

3 ਵਿੱਚੋਂ 2

3 ਵਿੱਚੋਂ 3

<div class="container">
  <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>

ਬਰਾਬਰ-ਚੌੜਾਈ ਬਹੁ-ਰੇਖਾ

.w-100ਬਰਾਬਰ-ਚੌੜਾਈ ਵਾਲੇ ਕਾਲਮ ਬਣਾਓ ਜੋ ਕਿ ਇੱਕ ਅਜਿਹੀ ਥਾਂ ਨੂੰ ਪਾ ਕੇ ਜਿੱਥੇ ਤੁਸੀਂ ਕਾਲਮ ਨੂੰ ਇੱਕ ਨਵੀਂ ਲਾਈਨ ਵਿੱਚ ਤੋੜਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਕਈ ਲਾਈਨਾਂ ਨੂੰ ਫੈਲਾਉਂਦੇ ਹੋ। .w-100ਕੁਝ ਜਵਾਬਦੇਹ ਡਿਸਪਲੇ ਯੂਟਿਲਿਟੀਜ਼ ਨਾਲ ਮਿਲਾ ਕੇ ਬਰੇਕਾਂ ਨੂੰ ਜਵਾਬਦੇਹ ਬਣਾਓ ।

ਇੱਕ Safari flexbox ਬੱਗ ਸੀ ਜੋ ਇਸਨੂੰ ਬਿਨਾਂ ਕਿਸੇ ਸਪੱਸ਼ਟ flex-basisਜਾਂ ਬਿਨਾਂ ਕੰਮ ਕਰਨ ਤੋਂ ਰੋਕਦਾ ਸੀ border। ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰ ਸੰਸਕਰਣਾਂ ਲਈ ਹੱਲ ਹਨ, ਪਰ ਉਹਨਾਂ ਦੀ ਲੋੜ ਨਹੀਂ ਹੋਣੀ ਚਾਹੀਦੀ ਜੇਕਰ ਤੁਹਾਡੇ ਟਾਰਗੇਟ ਬ੍ਰਾਊਜ਼ਰ ਬੱਗੀ ਸੰਸਕਰਣਾਂ ਵਿੱਚ ਨਹੀਂ ਆਉਂਦੇ ਹਨ।

ਕਰਨਲ

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

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

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

3 ਵਿੱਚੋਂ 1

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

3 ਵਿੱਚੋਂ 3

3 ਵਿੱਚੋਂ 1

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

3 ਵਿੱਚੋਂ 3

<div class="container">
  <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

<div class="container">
  <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

<div class="container">
  <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

<div class="container">
  <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

<div class="container">
  <!-- 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>

ਗਟਰਸ

ਗਟਰਾਂ ਨੂੰ ਬਰੇਕਪੁਆਇੰਟ-ਵਿਸ਼ੇਸ਼ ਪੈਡਿੰਗ ਅਤੇ ਨਕਾਰਾਤਮਕ ਮਾਰਜਿਨ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੁਆਰਾ ਜਵਾਬਦੇਹ ਢੰਗ ਨਾਲ ਐਡਜਸਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਇੱਕ ਦਿੱਤੀ ਕਤਾਰ ਵਿੱਚ ਗਟਰਾਂ ਨੂੰ ਬਦਲਣ ਲਈ, s ਉੱਤੇ ਇੱਕ ਨਕਾਰਾਤਮਕ ਮਾਰਜਿਨ ਉਪਯੋਗਤਾ .rowਅਤੇ ਮੇਲ ਖਾਂਦੀਆਂ ਪੈਡਿੰਗ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਜੋੜੋ .col। .containerਜਾਂ ਮਾਤਾ-ਪਿਤਾ ਨੂੰ ਦੁਬਾਰਾ ਮੇਲ ਖਾਂਦੀ ਪੈਡਿੰਗ ਉਪਯੋਗਤਾ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, ਅਣਚਾਹੇ ਓਵਰਫਲੋ ਤੋਂ ਬਚਣ ਲਈ ਵੀ ਐਡਜਸਟ ਕਰਨ ਦੀ .container-fluidਲੋੜ ਹੋ ਸਕਦੀ ਹੈ।

ਇੱਥੇ ਵੱਡੇ ( lg) ਬ੍ਰੇਕਪੁਆਇੰਟ ਅਤੇ ਉੱਪਰ ਬੂਟਸਟਰੈਪ ਗਰਿੱਡ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨ ਦੀ ਇੱਕ ਉਦਾਹਰਨ ਹੈ। ਅਸੀਂ .colਪੈਡਿੰਗ ਨੂੰ .px-lg-5, ਨਾਲ ਵਧਾ ਦਿੱਤਾ ਹੈ , ਇਸ ਦਾ ਜਵਾਬ .mx-lg-n5ਪੇਰੈਂਟ ਉੱਤੇ ਕੀਤਾ ਹੈ .rowਅਤੇ ਫਿਰ .containerਰੈਪਰ ਨੂੰ ਨਾਲ ਐਡਜਸਟ ਕੀਤਾ ਹੈ .px-lg-5।

ਕਸਟਮ ਕਾਲਮ ਪੈਡਿੰਗ

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

ਕਤਾਰ ਕਾਲਮ

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

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

ਕਾਲਮ

<div class="container">
  <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>

ਕਾਲਮ

<div class="container">
  <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>

ਕਾਲਮ

<div class="container">
  <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>

ਕਾਲਮ

<div class="container">
  <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>

ਕਾਲਮ

<div class="container">
  <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);
  }
}

ਅਲਾਈਨਮੈਂਟ

ਲੰਬਕਾਰੀ ਅਤੇ ਖਿਤਿਜੀ ਤੌਰ 'ਤੇ ਕਾਲਮਾਂ ਨੂੰ ਇਕਸਾਰ ਕਰਨ ਲਈ ਫਲੈਕਸਬਾਕਸ ਅਲਾਈਨਮੈਂਟ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 10-11 ਫਲੈਕਸ ਆਈਟਮਾਂ ਦੀ ਲੰਬਕਾਰੀ ਅਲਾਈਨਮੈਂਟ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ ਹੈ ਜਦੋਂ ਫਲੈਕਸ ਕੰਟੇਨਰ ਵਿੱਚ min-heightਹੇਠਾਂ ਦਿਖਾਇਆ ਗਿਆ ਹੈ। ਹੋਰ ਵੇਰਵਿਆਂ ਲਈ Flexbugs #3 ਦੇਖੋ।

ਵਰਟੀਕਲ ਇਕਸਾਰਤਾ

ਤਿੰਨ ਕਾਲਮਾਂ ਵਿੱਚੋਂ ਇੱਕ

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

ਤਿੰਨ ਕਾਲਮਾਂ ਵਿੱਚੋਂ ਇੱਕ

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

ਹਰੀਜ਼ੱਟਲ ਅਲਾਈਨਮੈਂਟ

ਦੋ ਕਾਲਮਾਂ ਵਿੱਚੋਂ ਇੱਕ

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

ਕੋਈ ਗਟਰ ਨਹੀਂ

ਸਾਡੀਆਂ ਪੂਰਵ-ਪ੍ਰਭਾਸ਼ਿਤ ਗਰਿੱਡ ਕਲਾਸਾਂ ਵਿੱਚ ਕਾਲਮਾਂ ਦੇ ਵਿਚਕਾਰਲੇ ਗਟਰਾਂ ਨੂੰ ਨਾਲ ਹਟਾਇਆ ਜਾ ਸਕਦਾ ਹੈ .no-gutters। ਇਹ ਸਾਰੇ ਤਤਕਾਲ ਚਿਲਡਰਨ ਕਾਲਮਾਂ ਤੋਂ ਨੈਗੇਟਿਵ margins .rowਅਤੇ ਹਰੀਜੱਟਲ ਨੂੰ ਹਟਾ ਦਿੰਦਾ ਹੈ।padding

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

ਇੱਕ ਕਿਨਾਰੇ-ਤੋਂ-ਕਿਨਾਰੇ ਡਿਜ਼ਾਈਨ ਦੀ ਲੋੜ ਹੈ? ਮਾਤਾ ਜਾਂ ਪਿਤਾ ਨੂੰ ਛੱਡੋ .containerਜਾਂ .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

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

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

ਕਾਲਮ ਲਪੇਟਣਾ

ਜੇਕਰ ਇੱਕ ਕਤਾਰ ਵਿੱਚ 12 ਤੋਂ ਵੱਧ ਕਾਲਮ ਰੱਖੇ ਜਾਂਦੇ ਹਨ, ਤਾਂ ਵਾਧੂ ਕਾਲਮਾਂ ਦਾ ਹਰੇਕ ਸਮੂਹ, ਇੱਕ ਯੂਨਿਟ ਦੇ ਰੂਪ ਵਿੱਚ, ਇੱਕ ਨਵੀਂ ਲਾਈਨ ਵਿੱਚ ਲਪੇਟ ਜਾਵੇਗਾ।

.col-9

.col-4
9 + 4 = 13 > 12 ਤੋਂ, ਇਹ 4-ਕਾਲਮ-ਵਿਆਪਕ ਡਿਵ ਇੱਕ ਸੰਮਿਲਿਤ ਯੂਨਿਟ ਦੇ ਰੂਪ ਵਿੱਚ ਇੱਕ ਨਵੀਂ ਲਾਈਨ ਉੱਤੇ ਲਪੇਟਿਆ ਜਾਂਦਾ ਹੈ।

.col-6
ਬਾਅਦ ਦੇ ਕਾਲਮ ਨਵੀਂ ਲਾਈਨ ਦੇ ਨਾਲ ਜਾਰੀ ਰਹਿੰਦੇ ਹਨ।

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

ਕਾਲਮ ਬਰੇਕ

flexbox ਵਿੱਚ ਇੱਕ ਨਵੀਂ ਲਾਈਨ ਵਿੱਚ ਕਾਲਮਾਂ ਨੂੰ ਤੋੜਨ ਲਈ ਇੱਕ ਛੋਟੀ ਜਿਹੀ ਹੈਕ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ: width: 100%ਜਿੱਥੇ ਵੀ ਤੁਸੀਂ ਆਪਣੇ ਕਾਲਮਾਂ ਨੂੰ ਇੱਕ ਨਵੀਂ ਲਾਈਨ ਵਿੱਚ ਸਮੇਟਣਾ ਚਾਹੁੰਦੇ ਹੋ ਉੱਥੇ ਇੱਕ ਤੱਤ ਸ਼ਾਮਲ ਕਰੋ। ਆਮ ਤੌਰ 'ਤੇ ਇਹ ਮਲਟੀਪਲ .rows ਨਾਲ ਪੂਰਾ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਪਰ ਹਰ ਲਾਗੂ ਕਰਨ ਦਾ ਤਰੀਕਾ ਇਸਦਾ ਜਵਾਬ ਨਹੀਂ ਦੇ ਸਕਦਾ ਹੈ।

.col-6 .col-sm-3

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

ਤੁਸੀਂ ਇਸ ਬ੍ਰੇਕ ਨੂੰ ਸਾਡੀਆਂ ਜਵਾਬਦੇਹ ਡਿਸਪਲੇ ਯੂਟਿਲਿਟੀਜ਼ ਦੇ ਨਾਲ ਖਾਸ ਬ੍ਰੇਕਪੁਆਇੰਟਸ 'ਤੇ ਵੀ ਲਾਗੂ ਕਰ ਸਕਦੇ ਹੋ ।

.col-6 .col-sm-4

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

ਮੁੜ ਕ੍ਰਮਬੱਧ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ

ਕਲਾਸਾਂ ਆਰਡਰ ਕਰੋ

ਆਪਣੀ ਸਮੱਗਰੀ ਦੇ ਵਿਜ਼ੂਅਲ ਆਰਡਰ.order- ਨੂੰ ਕੰਟਰੋਲ ਕਰਨ ਲਈ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਕਲਾਸਾਂ ਜਵਾਬਦੇਹ ਹਨ, ਇਸਲਈ ਤੁਸੀਂ ਬ੍ਰੇਕਪੁਆਇੰਟ ਦੁਆਰਾ ਸੈੱਟ ਕਰ ਸਕਦੇ ਹੋ (ਉਦਾਹਰਨ ਲਈ, ). ਸਾਰੇ ਪੰਜ ਗਰਿੱਡ ਪੱਧਰਾਂ ਲਈ ਸਮਰਥਨ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ।order.order-1.order-md-2112

DOM ਵਿੱਚ ਪਹਿਲਾਂ, ਕੋਈ ਆਰਡਰ ਲਾਗੂ ਨਹੀਂ ਹੋਇਆ

ਇੱਕ ਵੱਡੇ ਆਰਡਰ ਦੇ ਨਾਲ, DOM ਵਿੱਚ ਦੂਜਾ

DOM ਵਿੱਚ ਤੀਜਾ, 1 ਦੇ ਆਰਡਰ ਨਾਲ

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

.order-firstਜਵਾਬਦੇਹ ਅਤੇ .order-lastਕਲਾਸਾਂ ਵੀ ਹਨ ਜੋ ਕ੍ਰਮਵਾਰ ਅਤੇ ( ) orderਨੂੰ ਲਾਗੂ ਕਰਕੇ ਕਿਸੇ ਤੱਤ ਨੂੰ ਬਦਲਦੀਆਂ ਹਨ। ਇਹਨਾਂ ਕਲਾਸਾਂ ਨੂੰ ਲੋੜ ਅਨੁਸਾਰ ਨੰਬਰ ਵਾਲੀਆਂ ਕਲਾਸਾਂ ਨਾਲ ਵੀ ਮਿਲਾਇਆ ਜਾ ਸਕਦਾ ਹੈ ।order: -1order: 13order: $columns + 1.order-*

DOM ਵਿੱਚ ਪਹਿਲਾਂ, ਆਖਰੀ ਆਰਡਰ ਕੀਤਾ ਗਿਆ

DOM ਵਿੱਚ ਦੂਜਾ, ਬਿਨਾਂ ਕ੍ਰਮਬੱਧ

DOM ਵਿੱਚ ਤੀਜਾ, ਪਹਿਲਾਂ ਆਰਡਰ ਕੀਤਾ ਗਿਆ

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

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

ਤੁਸੀਂ ਗਰਿੱਡ ਕਾਲਮਾਂ ਨੂੰ ਦੋ ਤਰੀਕਿਆਂ ਨਾਲ ਆਫਸੈੱਟ ਕਰ ਸਕਦੇ ਹੋ: ਸਾਡੀਆਂ ਜਵਾਬਦੇਹ .offset-ਗਰਿੱਡ ਕਲਾਸਾਂ ਅਤੇ ਸਾਡੀਆਂ ਮਾਰਜਿਨ ਉਪਯੋਗਤਾਵਾਂ । ਗਰਿੱਡ ਕਲਾਸਾਂ ਨੂੰ ਕਾਲਮਾਂ ਨਾਲ ਮੇਲ ਕਰਨ ਲਈ ਆਕਾਰ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਕਿ ਹਾਸ਼ੀਏ ਤੇਜ਼ ਲੇਆਉਟ ਲਈ ਵਧੇਰੇ ਉਪਯੋਗੀ ਹੁੰਦੇ ਹਨ ਜਿੱਥੇ ਆਫਸੈੱਟ ਦੀ ਚੌੜਾਈ ਵੇਰੀਏਬਲ ਹੁੰਦੀ ਹੈ।

ਆਫਸੈੱਟ ਕਲਾਸਾਂ

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

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

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

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

ਮਾਰਜਿਨ ਉਪਯੋਗਤਾਵਾਂ

v4 ਵਿੱਚ flexbox ਵਿੱਚ ਜਾਣ ਦੇ ਨਾਲ, ਤੁਸੀਂ ਮਾਰਜਿਨ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਕਿ .mr-autoਭੈਣ-ਭਰਾ ਕਾਲਮਾਂ ਨੂੰ ਇੱਕ ਦੂਜੇ ਤੋਂ ਦੂਰ ਕਰਨ ਲਈ।

.col-md-4

.col-md-4 .ml-ਆਟੋ

.col-md-3 .ml-md-ਆਟੋ

.col-ਆਟੋ .mr-ਆਟੋ

.col-ਆਟੋ

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

ਆਲ੍ਹਣਾ

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

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

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

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

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .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: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

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

ਮਿਕਸਿਨ

ਮਿਕਸਿਨਾਂ ਦੀ ਵਰਤੋਂ ਵਿਅਕਤੀਗਤ ਗਰਿੱਡ ਕਾਲਮਾਂ ਲਈ ਸਿਮੈਂਟਿਕ 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();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

ਉਦਾਹਰਨ ਵਰਤੋਂ

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

.example-container {
  width: 800px;
  @include make-container();
}

.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);
  }
}

ਮੁੱਖ ਸਮੱਗਰੀ

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

<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-columns: 12 !default;
$grid-gutter-width: 30px !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, ਜਾਂ %) ਵਿੱਚ ਸੈਟ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ।