بوت اسٹرپ 5 گرید سسٹم

ਗ੍ਰਿੱਡ ਸਿਸਟਮ

Bootstrap ਦਾ ਗ੍ਰਿੱਡ ਸਿਸਟਮ flexbox ਦੇ ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ, ਜਿਸ ਵਿੱਚ ਪੰਜਾਬੀ ਚੌਦਾਈ ਦੀ ਸਭ ਤੋਂ ਵੱਧ ਹੋ ਸਕਣ ਵਾਲੀ ਗਿਣਤੀ 12 ਹੈ。

ਜੇਕਰ ਤੁਸੀਂ ਸਭ 12 ਸਤੰਭਾਂ ਨੂੰ ਅਲੱਗ-ਅਲੱਗ ਨਹੀਂ ਵਰਤਣਾ ਚਾਹੁੰਦੇ, ਤਾਂ ਇਹ ਸਤੰਭਾਂ ਨੂੰ ਮਿਲਾ ਕੇ ਹੋਰ ਚੌਦਾਈ ਵਾਲੇ ਸਤੰਭ ਬਣਾ ਸਕਦੇ ਹੋ:

ਗ੍ਰਿੱਡ ਸਿਸਟਮ ਤੇਜ਼ੀ ਨਾਲ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਦਾ ਹੈ, ਸਤੰਭ ਸਕਰੀਨ ਚੌਦਾਈ ਦੇ ਮੁੱਲ ਨੂੰ ਅਧਾਰ ਵਿੱਚ ਆਪਣੇ ਆਪ ਫਿਰ ਸਥਾਨਾਂ ਵਿੱਚ ਸੰਗਠਿਤ ਕਰਦੇ ਹਨ。

ਯਕੀਨੀ ਕਰੋ ਕਿ ਕੁੱਲ ਇਕੱਕੇ 12 ਤੋਂ ਘੱਟ ਜਾਂ ਬਰਾਬਰ ਹੋਣ (ਤੁਸੀਂ ਸਭ 12 ਮੌਜੂਦਾ ਸਤੰਭਾਂ ਨੂੰ ਵਰਤਣਾ ਨਹੀਂ ਚਾਹੁੰਦੇ ਹੋ)

ਗ੍ਰਿੱਡ ਵਰਗ

Bootstrap 5 ਗ੍ਰਿੱਡ ਸਿਸਟਮ ਵਿੱਚ ਛੇ ਵਰਗ ਹਨ:

  • .col- (ਅਧਿਕ ਛੋਟੀ ਸਾਜ਼ਿਸ਼ - ਸਕਰੀਨ ਚੌਦਾਈ ਇਕੱਕੇ ਵਿੱਚ 576px ਤੋਂ ਘੱਟ)
  • .col-sm- (ਛੋਟੀ ਸਾਜ਼ਿਸ਼ - ਸਕਰੀਨ ਚੌਦਾਈ ਇਕੱਕੇ ਵਿੱਚ 576px ਜਾਂ ਵੱਧ)
  • .col-md- (ਮੱਧ ਸਾਜ਼ਿਸ਼ - ਸਕਰੀਨ ਚੌਦਾਈ ਇਕੱਕੇ ਵਿੱਚ 768px ਜਾਂ ਵੱਧ)
  • .col-lg- (ਵਿਸ਼ਾਲ ਸਾਜ਼ਿਸ਼ - ਸਕਰੀਨ ਚੌਦਾਈ ਇਕੱਕੇ ਵਿੱਚ 992px ਜਾਂ ਵੱਧ)
  • .col-xl- (ਅਧਿਕ ਵਿਸ਼ਾਲ ਸਾਜ਼ਿਸ਼ - ਸਕਰੀਨ ਚੌਦਾਈ ਇਕੱਕੇ ਵਿੱਚ 1200px ਜਾਂ ਵੱਧ)
  • .col-xxl- (ਵਿਸ਼ਾਲ ਸਾਜ਼ਿਸ਼ - ਸਕਰੀਨ ਚੌਦਾਈ ਇਕੱਕੇ ਵਿੱਚ 1400px ਜਾਂ ਵੱਧ)

ਉਪਰੋਕਤ ਵਰਗਾਂ ਨੂੰ ਮਿਲਾ ਕੇ, ਤੁਸੀਂ ਹੋਰ ਗਤੀਸ਼ੀਲ ਅਤੇ ਲਚਕੀਲੇ ਸਰੰਚਨਾ ਬਣਾ ਸਕਦੇ ਹੋ。

ਸੁਝਾਅ:ਹਰੇਕ ਵਰਗ ਪ੍ਰਪੋਰਸ਼ਨ ਨਾਲ ਵਧਾਇਆ ਹੈ, ਇਸ ਲਈ ਤੁਸੀਂ ਜੇਕਰ sm ਅਤੇ md ਨੂੰ ਇੱਕ ਸਮਾਨ ਚੌਦਾਈ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਕੇਵਲ sm ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ。

Bootstrap 5 ਗ੍ਰਿੱਡ ਦੀ ਮੁੱਢਲੀ ਸਰੰਚਨਾ

ਇਹ ਹੈ Bootstrap 5 ਗ੍ਰਿੱਡ ਦੀ ਮੁੱਢਲੀ ਸਰੰਚਨਾ:

/* ਕੋਲ ਦੀ ਚੌਦਾਈ ਕੰਟਰੋਲ ਕਰੋ, ਅਤੇ ਉਹਨਾਂ ਦੀ ਵੱਖ-ਵੱਖ ਉਪਕਰਣਾਂ ਉੱਤੇ ਪ੍ਰਦਰਸ਼ਨ */
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
/* ਜਾਂ Bootstrap ਵੱਲੋਂ ਸਵੈਚਾਲਤ ਲੇਖਾਗਤ ਹੱਲ */
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

ਖ਼ੁਦ ਦੋਹਰਾਓ

ਪਹਿਲਾ ਉਦਾਹਰਣ: ਇੱਕ ਪੱਧਰ ਬਣਾਓ (<div class = "row">)।ਤਦ ਜ਼ਰੂਰੀ ਸੰਖਿਆ ਦੇ ਕੋਲ ਜ਼ਰੂਰੀ ਸੰਖਿਆ ਦੇ ਕੋਲ ਜੋੜੋ (ਦੇ ਟੈਗ ਨਾਲ ਵਾਲੇ ਕੋਲ) .col-*-* ਦੇ ਟੈਗ)।ਪਹਿਲਾ ਸਟਾਰ (*) ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲਤਾ ਦਿਸਾਈ ਹੈ: sm, md, lg, xl ਜਾਂ xxl, ਦੂਜਾ ਸਟਾਰ ਇੱਕ ਸੰਖਿਆ ਦਿਸਾਈ ਹੈ, ਹਰ ਪੱਧਰ ਵਿੱਚ ਸਮਾਨਤਾ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ।

ਦੂਜੀ ਉਦਾਹਰਣ: ਹਰ ਕੋਲ ਨੂੰ ਕਲਾਸ ਦੀ ਟੈਗ ਨਹੀਂ ਦੇਣ col ਇੱਕ ਸੰਖਿਆ ਸ਼ਾਮਿਲ ਕਰੋ, ਬਲਕਿ bootstrap ਲੇਖਾਗਤ ਹੱਲ ਕਰੇ, ਤਾਕਿ ਸਮਾਨ ਚੌਦਾਈ ਦੇ ਕੋਲ ਬਣਾਓ: ਦੋ "col" ਇਲੀਮੈਂਟ = ਹਰ ਕੋਲ ਦੀ 50% ਚੌਦਾਈ, ਤਿੰਨ ਕੋਲ = ਹਰ ਕੋਲ ਦੀ 33.33% ਚੌਦਾਈ।ਚਾਰ ਕੋਲ = 25% ਚੌਦਾਈ ਆਦਿ।ਤੁਸੀਂ ਇਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵੀ ਕਰ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ ਕਿ .col-sm|md|lg|xl|xxl ਕੋਲਾਂ ਨੂੰ ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਬਣਾਓ

ਗ੍ਰਿੱਡ ਚੋਣ

ਹੇਠ ਦੇ ਤਾਲਿਕੇ ਵਿੱਚ Bootstrap 5 ਗ੍ਰਿੱਡ ਸਿਸਟਮ ਕਿਵੇਂ ਵੱਖ-ਵੱਖ ਸਕਰੀਨ ਸਾਈਜ਼ ਉੱਤੇ ਕੰਮ ਕਰਦਾ ਹੈ ਦਿਸਾਈ ਹੈ:

ਅਧਿਕ ਛੋਟਾ (<576px) ਛੋਟਾ (>=576px) ਮੱਧ (>=768px) ਵੱਡਾ (>=992px) ਅਧਿਕ ਵਿਸ਼ਾਲ (>=1200px) ਵਿਸ਼ਾਲ (>=1400px)
ਕਲਾਸ ਪ੍ਰੋਫਾਈਕਸ .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
ਗ੍ਰਿੱਡ ਵਿਵਹਾਰ ਹਮੇਸ਼ਾ ਹੋਰਾਇਜ਼ੰਟਲ ਗੈਰ-ਸਥਾਈ, ਬੰਦੀ ਉੱਤੇ ਹੋਰਾਇਜ਼ੰਟਲ ਗੈਰ-ਸਥਾਈ, ਬੰਦੀ ਉੱਤੇ ਹੋਰਾਇਜ਼ੰਟਲ ਗੈਰ-ਸਥਾਈ, ਬੰਦੀ ਉੱਤੇ ਹੋਰਾਇਜ਼ੰਟਲ ਗੈਰ-ਸਥਾਈ, ਬੰਦੀ ਉੱਤੇ ਹੋਰਾਇਜ਼ੰਟਲ ਗੈਰ-ਸਥਾਈ, ਬੰਦੀ ਉੱਤੇ ਹੋਰਾਇਜ਼ੰਟਲ
ਕੰਟੇਨਰ ਚੌਦਾਈ ਨਾਨ (auto) 540px 720px 960px 1140px 1320px
ਲਾਗੂ ਹੋਣ ਵਾਲਾ ਮੋਬਾਈਲ ਵਾਕਟੀਕੈਲ ਮੋਬਾਈਲ ਹੋਰਾਇਜ਼ੰਟਲ ਟੇਬਲੇਟ ਲੈਪਟਾਬ ਲੈਪਟਾਬ ਅਤੇ ਡੇਸਕਟਾਪ ਲੈਪਟਾਬ ਅਤੇ ਡੇਸਕਟਾਪ
ਕੋਲ ਦਾ # 12 12 12 12 12 12
ਗੁੱਟਰ ਚੌਦਾਈ 1.5rem (ਕੋਲ ਦੇ ਹਰ ਪਾਸੇ .75rem ) 1.5rem (ਕੋਲ ਦੇ ਹਰ ਪਾਸੇ .75rem ) 1.5rem (ਕੋਲ ਦੇ ਹਰ ਪਾਸੇ .75rem ) 1.5rem (ਕੋਲ ਦੇ ਹਰ ਪਾਸੇ .75rem ) 1.5rem (ਕੋਲ ਦੇ ਹਰ ਪਾਸੇ .75rem ) 1.5rem (ਕੋਲ ਦੇ ਹਰ ਪਾਸੇ .75rem )
ਮਿਲਾਇਆ ਜਾ ਸਕਦਾ ਹਾਂ ਹਾਂ ਹਾਂ ਹਾਂ ਹਾਂ ਹਾਂ
ਸ਼ਿਫਟ ਹਾਂ ਹਾਂ ਹਾਂ ਹਾਂ ਹਾਂ ਹਾਂ
ਕੋਲਾਂ ਕਰਨਾ ਹਾਂ ਹਾਂ ਹਾਂ ਹਾਂ ਹਾਂ ਹਾਂ