Bootstrap 5 ਗ੍ਰਿੱਡ: ਹੱਲ੍ਹੇ ਤੋਂ ਲੱਕੜੀ ਤੱਕ

ਗ੍ਰਿੱਡ ਉਦਾਹਰਣ: ਹੱਲ੍ਹੇ ਤੋਂ ਲੱਕੜੀ ਤੱਕ

ਹਾਲੇ ਇੱਕ ਮੁੱਢਲਾ ਗ੍ਰਿੱਡ ਸਿਸਟਮ ਬਣਾਓ, ਜਿਸ ਵਿੱਚ ਸ਼ੁਰੂਆਤ ਵਿੱਚ ਸੂਕਸ਼ਮ ਉਪਕਰਣਾਂ ਉੱਤੇ ਹੱਲ੍ਹਾ ਹੁੰਦਾ ਹੈ ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਵੱਡੇ ਉਪਕਰਣਾਂ ਉੱਤੇ ਹੱਲ੍ਹੇ ਤੋਂ ਲੱਕੜੀ ਤੱਕ ਹੁੰਦਾ ਹੈ。

ਹੇਠ ਦਾ ਉਦਾਹਰਣ ਇੱਕ ਸਰਲ ‘ਹੱਲ੍ਹੇ ਤੋਂ ਲੱਕੜੀ ਤੱਕ’ ਦੋ ਸਤੰਭਾਂ ਦੀ ਲੇਆਉਟ ਦਿਸ਼ਾ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ, ਇਹ ਸਾਰੇ ਸਕਰੀਨਾਂ ਉੱਤੇ 50%/50% ਦਾ ਵੰਡ ਕਰਦਾ ਹੈ, ਮੁਕਤਾਬਕ ਸੂਕਸ਼ਮ ਸਕਰੀਨਾਂ ਉੱਤੇ ਇਹ ਆਪਣੇ ਹੀ ਹੈ (100%):

ਉਦਾਹਰਣ: ਹੱਲ੍ਹੇ ਤੋਂ ਲੱਕੜੀ ਤੱਕ

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>ਸਤੰਭ 1 ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>ਸਤੰਭ 2 ...</p>
    </div>
  </div>
</div>

ਆਪਣੇ ਤੌਰ 'ਤੇ ਪ੍ਰਯੋਗ ਕਰੋ

ਸੁਝਾਅ:.col-sm-* ਵਰਗ ਵਿੱਚ ਸੰਖਿਆ ਦਾ ਅਰਥ ਹੈ ਕਿ div ਕਿੰਨੇ ਸਤੰਭ ਤੋਂ ਲੰਬਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ (ਕੁੱਲ 12 ਸਤੰਭ)।ਤਾਂ ਹੈ।.col-sm-1 1 ਸਤੰਭ ਤੋਂ.col-sm-4 4 ਸਤੰਭ ਤੋਂ ਲੈ ਕੇ.col-sm-6 6 ਸਤੰਭ ਤੋਂ ਲੈ ਕੇ ਇਲਾਵਾ

ਧਿਆਨ:ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਕੁੱਲ ਸਮਾਨਤਾ 12 (ਸਾਰੇ 12 ਉਪਲੱਬਧ ਸਤੰਭਾਂ ਦਾ ਇਸਤੇਮਾਲ ਨਹੀਂ ਕਰਨਾ ਚਾਹੀਦਾ) ਹੈ ਜਾਂ ਘੱਟ ਹੈ:

ਸੁਝਾਅ:ਜਿਵੇਂ ਹੀ .container-fluid ਵਰਗ ਨੂੰ .containerਤੁਸੀਂ ਕਿਸੇ ਵੀ full-width ਸੰਗਠਨ ਵਿੱਚ ਬਦਲਿਆ ਜਾਂਦਾ ਹੈ fixed-width ਦੀ ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਸੰਗਠਨ:

ਉਦਾਹਰਣ: ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਕੰਟੇਨਰ

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>ਸਤੰਭ 1 ...</p>
    </div>
    <div class="col-sm-6">
      <p>ਸਤੰਭ 2 ...</p>
    </div>
  </div>
</div>

ਆਪਣੇ ਤੌਰ 'ਤੇ ਪ੍ਰਯੋਗ ਕਰੋ

ਸਵੈਚਾਲਿਤ ਸਥਾਨਕ ਸਤੰਭ

Bootstrap 5 ਵਿੱਚ, ਸਾਰੇ ਉਪਕਰਣਾਂ ਲਈ ਸਮਾਨ ਚੌੜਾਈ ਦੇ ਸਤੰਭ ਬਣਾਉਣ ਦਾ ਇੱਕ ਸਰਲ ਤਰੀਕਾ ਹੈ: ਜਿਵੇਂ ਹੀ .col-size-* ਸ਼ੱਦਾਂ ਵਿੱਚ ਹਟਾਓ, ਅਤੇ ਕੇਵਲ col ਅਣਗਿਣਤ ਉੱਤੇ ਵਰਤੋਂ ਕਰੋ .col-size ਵਰਗ।Bootstrap ਕਿੰਨੇ ਸਤੰਭ ਹਨ ਦੱਸਦਾ ਹੈ, ਅਤੇ ਹਰ ਸਤੰਭ ਨੂੰ ਇੱਕ ਜਿਸ਼ਤ ਚੌੜਾਈ ਮਿਲੇਗੀ।size ਵਰਗ (sm, md ਆਦਿ) ਨਾਲ ਸਤੰਭ ਜਦੋਂ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਨਾ ਹੈ ਤੇ ਤੈਅ ਕੀਤਾ ਜਾਂਦਾ ਹੈ:

<!-- ਦੋ ਸਤੰਭ: ਸਾਰੇ ਸਕਰੀਨਾਂ 'ਤੇ 50% ਚੌੜਾਈ, ਮੁਕਤ ਸੂਕਸ਼ਮ ਉਪਕਰਣ (100% ਚੌੜਾਈ) ਤੋਂ ਇਲਾਵਾ -->
<div class="row">
  <div class="col-sm">1 of 2</div>
  <div class="col-sm">2 of 2</div>
</div>
<!-- ਚਾਰ ਸਤੰਭ: ਸਾਰੇ ਸਕਰੀਨਾਂ 'ਤੇ 25% ਚੌੜਾਈ, ਮੁਕਤ ਸੂਕਸ਼ਮ ਉਪਕਰਣ (100% ਚੌੜਾਈ) ਤੋਂ ਇਲਾਵਾ -->
<div class="row">
  <div class="col-sm">1 of 4</div>
  <div class="col-sm">2 of 4</div>
  <div class="col-sm">3 of 4</div>
  <div class="col-sm">4 of 4</div>
</div>

ਆਪਣੇ ਤੌਰ 'ਤੇ ਪ੍ਰਯੋਗ ਕਰੋ