Bootstrap 5 گرید

Bootstrap 5 گرید سسٹم

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

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

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

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

ਯਕੀਨੀ ਕਰੋ ਕਿ ਸਮਾਂ 12 ਤੋਂ ਘੱਟ ਜਾਂ ਬਰਾਬਰ ਹੈ (ਜੇਕਰ ਤੁਸੀਂ ਸਾਰੇ 12 ਵਰਗਾਂ ਦਾ ਉਪਯੋਗ ਨਹੀਂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ)

ਗ੍ਰਿੱਡ ਵਰਗ

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

  • .col- (ਅਤੇ ਛੋਟੀ ਇਕਾਈ - ਸਕਰੀਨ ਚੌਦਾਈ ਤੋਂ ਘੱਟ 576px ਹੁੰਦੀ ਹੈ)
  • .col-sm- (ਛੋਟੀ ਇਕਾਈ - ਸਕਰੀਨ ਚੌਦਾਈ ਜਾਂ ਇਸ ਤੋਂ ਵੱਧ 576px ਹੁੰਦੀ ਹੈ)
  • .col-md- (ਮੱਧ ਇਕਾਈ - ਸਕਰੀਨ ਚੌਦਾਈ ਜਾਂ ਇਸ ਤੋਂ ਵੱਧ 768 ਪਿਕਸਲ ਹੁੰਦੀ ਹੈ)
  • .col-lg- (ਵੱਡੀ ਇਕਾਈ - ਸਕਰੀਨ ਚੌਦਾਈ ਜਾਂ ਇਸ ਤੋਂ ਵੱਧ 992 ਪਿਕਸਲ ਹੁੰਦੀ ਹੈ)
  • .col-xl- (xlarge ਇਕਾਈ - ਸਕਰੀਨ ਚੌਦਾਈ ਜਾਂ ਇਸ ਤੋਂ ਵੱਧ 1200px ਹੁੰਦੀ ਹੈ)
  • .col-xxl- (xxlarge ਇਕਾਈ - ਸਕਰੀਨ ਚੌਦਾਈ ਜਾਂ ਇਸ ਤੋਂ ਵੱਧ 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>

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

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

ਹੇਠ ਅਸੀਂ ਕੁਝ ਬੇਸਿਕ ਬੈਸਪਾਟਾਸ 5 ਗ੍ਰਿੱਡ ਲੇਆਉਟ ਦੇ ਉਦਾਹਰਣਾਂ ਦੀ ਸ਼ੂਟਿੰਗ ਕੀਤੀ ਹੈ。

ਤਿੰਨ ਸਮਾਨ ਚੌਦਾਈ

ਹੇਠ ਦਿੱਤਾ ਉਦਾਹਰਣ ਸਮਾਧਾਨ ਨੂੰ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਕਿਵੇਂ ਸਾਰੇ ਉਪਕਰਣਾਂ ਅਤੇ ਸਕਰੀਨ ਚੌਦਾਈ ਉੱਤੇ ਤਿੰਨ ਸਮਾਨ ਚੌਦਾਈ ਬਣਾਉਣਾ ਹੈ:

ਉਦਾਹਰਣ

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

ਆਪਣੇ ਹੀ ਮੰਨਣ ਦੋਹਰੀਕਰਨ

ਰੈਸਪੋਨਸਿਵ ਚੌਦਾਈ

ਹੇਠ ਦਿੱਤਾ ਉਦਾਹਰਣ ਸਮਾਧਾਨ ਨੂੰ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਕਿਵੇਂ ਟੇਬਲਟ ਤੋਂ ਸ਼ੁਰੂ ਕਰਕੇ ਚਾਰ ਸਮਾਨ ਚੌਦਾਈ ਬਣਾਉਣਾ ਹੈ ਅਤੇ ਉਸ ਨੂੰ ਅਧਿਕ ਵੱਡੇ ਡੈਸਕਟਾਪ ਤੱਕ ਫੈਲਾਉਣਾ ਹੈ:576px ਦੇ ਕਮ ਚੌਦਾਈ ਦੇ ਮੋਬਾਈਲ ਜਾਂ ਸਕਰੀਨ 'ਤੇ, ਚੌਦਾਈ ਆਪਣੇ ਹੀ ਸਟੈਕਡ ਹੋ ਜਾਣਗੇ:

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਹੀ ਮੰਨਣ ਦੋਹਰੀਕਰਨ

ਦੋ ਅਸਮਾਨ ਰੈਸਪੋਨਸਿਵ ਚੌਦਾਈ

ਹੇਠ ਦਿੱਤਾ ਉਦਾਹਰਣ ਸਮਾਧਾਨ ਨੂੰ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਕਿਵੇਂ ਟੇਬਲਟ ਵਿੱਚ ਦੋ ਵੱਖਰੇ ਚੌਦਾਈ ਦੀ ਚੌਦਾਈ ਅਤੇ ਉਸ ਨੂੰ ਅਧਿਕ ਵੱਡੇ ਡੈਸਕਟਾਪ ਤੱਕ ਫੈਲਾਉਣਾ ਹੈ:

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਹੀ ਮੰਨਣ ਦੋਹਰੀਕਰਨ

ਸੁਝਾਅ:ਤੁਸੀਂ ਇਸ ਟੂਰੀਆਮ ਦੇ ਬਾਅਦ ਇਸ ਬਾਰੇ ਸਿੱਖਣ ਵਾਲੇ ਹੋਵੋਗੇ ਗ੍ਰਿੱਡ ਸਿਸਟਮ ਦੇ ਹੋਰ ਸਮਗਰੀ