ਬੂਸਟਰੈਪ 5 ਗ੍ਰਿੱਡ: ਵੱਡੇ ਉਪਕਰਣ

ਕੋਰਸ ਸਿਫਾਰਸ਼:

ਵੱਡੇ ਉਪਕਰਣਾਂ ਦੀ ਗਰਿੱਡ ਇੰਸਟੈਂਸ ਐਕਸ ਸਮਾਲ ਸਮਾਲ ਮੀਡੀਅਮ ਲਰਜ ਐਕਸਟਰਾ ਲਰਜ
XXL ਵਰਗ ਪ੍ਰਿਫਿਕਸ .col- .col-sm- .col-md- .col-lg- .col-xl-
.col-xxl- ਸਕਰੀਨ ਚੌਡਾਈ <576px >=768px >=992px >=1200px >=1400px

ਪਿਛਲੇ ਖੰਡ ਵਿੱਚ ਅਸੀਂ ਇੱਕ ਗਰਿੱਡ ਇੰਸਟੈਂਸ ਦਿਖਾਇਆ ਹੈ ਜਿਸ ਵਿੱਚ ਛੋਟੇ ਅਤੇ ਮੰਦ ਉਪਕਰਣਾਂ ਲਈ ਵਰਗ ਹਨ। ਅਸੀਂ ਦੋ ਵੱਡੇ ਵਰਗਾਂ (ਡਿਵ) ਵਰਤੇ ਹਨ ਅਤੇ ਛੋਟੇ ਉਪਕਰਣਾਂ 'ਤੇ 25%/75% ਦੀ ਵੰਡ ਕੀਤੀ ਹੈ, ਮੰਦ ਉਪਕਰਣਾਂ 'ਤੇ 50%/50% ਦੀ ਵੰਡ ਕੀਤੀ ਹੈ:

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

ਪਰ ਵੱਡੇ ਉਪਕਰਣਾਂ 'ਤੇ 33% / 66% ਦੀ ਵੰਡ ਡਿਜਾਈਨ ਬਿਹਤਰ ਹੋ ਸਕਦੀ ਹੈ。

ਵੱਡੇ ਉਪਕਰਣਾਂ ਦੇ ਸਕਰੀਨ ਚੌਡਾਈ ਦੇ ਪਰਿਭਾਸ਼ਿਤ ਹੁੰਦੇ ਹਨ992 ਪਿਕਸਲ ਤੋਂ 1199 ਪਿਕਸਲ ਤੱਕਵਰਤਣਗੇ。

ਵੱਡੇ ਉਪਕਰਣਾਂ ਲਈ ਅਸੀਂ .col-lg-* ਵਰਗ:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

ਛੋਟੇ ਉਪਕਰਣਾਂ 'ਤੇ ਕਿਰਪਾ ਕਰਕੇ ਹੇਠ ਲਿਖੇ ਵਰਗ ਨੂੰ ਵਰਤੋਂ ਕਰੋ -sm- ਦੀ ਵਰਗ। ਮੰਦ ਉਪਕਰਣਾਂ 'ਤੇ ਕਿਰਪਾ ਕਰਕੇ ਹੇਠ ਲਿਖੇ ਵਰਗ ਨੂੰ ਵਰਤੋਂ ਕਰੋ -md- ਦੀ ਵਰਗ। ਵੱਡੇ ਉਪਕਰਣਾਂ 'ਤੇ ਕਿਰਪਾ ਕਰਕੇ ਹੇਠ ਲਿਖੇ ਵਰਗ ਨੂੰ ਵਰਤੋਂ ਕਰੋ -lg- ਦੀ ਵਰਗ.

ਨਿਮਨ ਉਦਾਹਰਣ ਛੋਟੇ ਉਪਕਰਣਾਂ '25%/75%' ਵਿੱਚ ਵੰਡਣ ਦੇ ਕਾਰਨ ਪ੍ਰਭਾਵਿਤ ਹੋਵੇਗਾ, ਮੰਦ ਉਪਕਰਣਾਂ '50%/50%' ਵਿੱਚ ਵੰਡਣ ਦੇ ਕਾਰਣ ਪ੍ਰਭਾਵਿਤ ਹੋਵੇਗਾ, ਵੱਡੇ, xlarge ਅਤੇ xxlarge ਉਪਕਰਣਾਂ '33%/66%' ਵਿੱਚ ਵੰਡਣ ਦੇ ਕਾਰਣ ਪ੍ਰਭਾਵਿਤ ਹੋਵੇਗਾ। ਸੁਪਰ ਛੋਟੇ ਉਪਕਰਣਾਂ '100%' ਵਿੱਚ ਇਸ ਨੂੰ ਆਪਣੇ ਹੀ ਹੁਣੇ ਸਟੈਕ ਕਰ ਦਿੱਤਾ ਜਾਵੇਗਾ:

ਉਦਾਹਰਣ

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4">
      <p>ਵਿਸ਼ਵ ਕੁਦਰਤ ਫਾਊਂਡੇਸ਼ਨ (WWF), 1961 ਅਪ੍ਰੈਲ 29 ਨੂੰ ਸਥਾਪਤ ਹੋਈ, ਉਸ ਦਾ ਪ੍ਰਤੀਕ ਇੱਕ ਮਾਰਕਿਨ ਹੈ ...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8">
      <p>1980 ਵਿੱਚ, WWF ਸਰਵੋਤਮ ਆਉਣ ਚੀਨ, ਚੀਨ ਸਰਕਾਰ ਦੀ ਸ਼ਲਾਘਾ ਦੇ ਰੂਪ ਵਿੱਚ ਚੀਨ ਆਈ ਸੀ ਮਾਰਕਿਨ ਅਤੇ ਉਸ ਦੇ ਵਾਸਸਥਾਨ ਦੀ ਸੁਰੱਖਿਆ ਕਾਰਜ ਕਰਨ ਲਈ ...</p>
    </div>
  </div>
</div>

ਆਪਣੇ ਅਕਸਰ ਚੇਨ

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

ਲੜੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ

ਨਿਚੇ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ, ਅਸੀਂ ਕੇਵਲ .col-lg-6 ਵਰਗ (ਕੋਈ ਵੀ ਨਹੀਂ ਹੋਵੇ) .col-md-* ਅਤੇ/ਜਾਂ .col-sm-*）。ਇਹ ਮਤਲਬ ਹੈ ਕਿ large, xlarge ਅਤੇ xxlarge ਉਪਕਰਣਾਂ ਨੂੰ 50%/50% ਵੰਡਿਆ ਜਾਵੇਗਾ। ਪਰ, ਮੀਡੀਅਮ, ਸਮਾਲ ਅਤੇ ਐਕਸਮਾਲ ਉਪਕਰਣਾਂ ਵਿੱਚ ਉੱਚੇ ਤੌਰ 'ਤੇ ਸਟੋਕ ਹੋਣਗੇ (100% ਚੌਦਾਈ):

ਉਦਾਹਰਣ

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <p>ਵਿਸ਼ਵ ਕੁਦਰਤ ਫਾਊਂਡੇਸ਼ਨ (WWF), 1961 ਅਪ੍ਰੈਲ 29 ਨੂੰ ਸਥਾਪਤ ਹੋਈ, ਉਸ ਦਾ ਪ੍ਰਤੀਕ ਇੱਕ ਮਾਰਕਿਨ ਹੈ ...</p>
    </div>
    <div class="col-lg-6">
      <p>1980 ਵਿੱਚ, WWF ਸਰਵੋਤਮ ਆਉਣ ਚੀਨ, ਚੀਨ ਸਰਕਾਰ ਦੀ ਸ਼ਲਾਘਾ ਦੇ ਰੂਪ ਵਿੱਚ ਚੀਨ ਆਈ ਸੀ ਮਾਰਕਿਨ ਅਤੇ ਉਸ ਦੇ ਵਾਸਸਥਾਨ ਦੀ ਸੁਰੱਖਿਆ ਕਾਰਜ ਕਰਨ ਲਈ ...</p>
    </div>
  </div>
</div>

ਆਪਣੇ ਅਕਸਰ ਚੇਨ

ਆਪਣੇ ਆਪ ਲੈਗਜ਼ ਸਤੰਭ

Bootstrap 5 ਵਿੱਚ, ਸਾਰੇ ਉਪਕਰਣਾਂ ਲਈ ਸਮਾਨ ਚੌਦਾਈ ਵਾਲੇ ਸਤੰਭ ਬਣਾਉਣ ਲਈ ਇੱਕ ਸਰਲ ਤਰੀਕਾ ਹੈ: ਜਿਵੇਂ ਹੀ .col-lg-* ਵਿੱਚ ਨੰਬਰ ਹਟਾਓ, ਅਤੇ ਕੇਵਲ col ਇਲੈਕਟਰ 'ਤੇ ਵਰਤੋਂ ਕਰੋ .col-lg ਵਰਗ ਨੂੰ ਹਟਾਓ, ਅਤੇ ਕੇਵਲ col ਇਲੈਕਟਰ ਉੱਤੇ ਵਰਤੋਂ ਕਰੋ

ਜੇਕਰ ਸਕਰੀਨ ਸਾਈਜ਼ਘੱਟ ਤੋਂ 992pxਅਤੇ, ਸਤੰਭ ਪੱਧਰੀ ਤੌਰ 'ਤੇ ਸਟੋਕ ਹੋਣਗੇ:

<!-- ਦੋ ਸਤੰਭ: ਵੱਡੇ ਤੋਂ ਉੱਪਰ ਵਿੱਚ 50% ਚੌਦਾਈ -->
<div class="row">
  <div class="col-lg">1 of 2</div>
  <div class="col-lg">2 of 2</div>
</div>
<!-- ਚਾਰ ਸਤੰਭ: ਵੱਡੇ ਤੋਂ ਉੱਪਰ ਵਿੱਚ 25% ਚੌਦਾਈ -->
<div class="row">
  <div class="col-lg">1 of 4</div>
  <div class="col-lg">2 of 4</div>
  <div class="col-lg">3 of 4</div>
  <div class="col-lg">4 of 4</div>
</div>

ਆਪਣੇ ਅਕਸਰ ਚੇਨ