بوت اسپرینگ 5 گرید: بہت بڑی ڈیوائس

ਐਕਸਟ੍ਰਾ ਲਰਜ਼ ਉਪਕਰਣ ਗਰਿੱਡ ਉਦਾਹਰਣ

ਐਕਸ ਸਮਾਲ ਸਮਾਲ ਮੀਡੀਅਮ ਲਰਜ਼ ਐਕਸਟ੍ਰਾ ਲਰਜ਼ XXL
ਵਰਗ ਪ੍ਰੋਫਾਈਕਸ .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
ਸਕਰੀਨ ਚੌਡਾਈ <576px >=576px >=768px >=992px >=1200px >=1400px

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

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

ਪਰ ਵੱਡੇ ਉਪਕਰਣਾਂ 'ਤੇ 20% / 80% ਵੰਡ ਦਾ ਡਿਜ਼ਾਇਨ ਬਿਹਤਰ ਹੋ ਸਕਦਾ ਹੈ。

ਵੱਡੇ ਉਪਕਰਣਾਂ ਦੇ ਲਈ ਸਕਰੀਨ ਚੌਡਾਈ ਇਸ ਤਰ੍ਹਾਂ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤੀ ਜਾਵੇਗੀ 1200 ਪਾਇਕਸਲ ਤੋਂ ਵੱਧਵਰਤੀਆਂ ਜਾਵੇਗੀਆਂ。

xlarge ਉਪਕਰਣਾਂ ਲਈ ਅਸੀਂ .col-xl-* ਵਰਗ:

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

ਇਹ ਉਦਾਹਰਣ ਛੋਟੇ ਉਪਕਰਣਾਂ '25%/75%' ਦੀ ਵੰਡ ਕਰੇਗਾ, ਮੰਦਰੀ ਉਪਕਰਣਾਂ '50%/50%' ਦੀ ਵੰਡ ਕਰੇਗਾ, ਵੱਡੇ ਉਪਕਰਣਾਂ '33%/66%' ਦੀ ਵੰਡ ਕਰੇਗਾ ਅਤੇ xlarge ਅਤੇ xxlarge ਉਪਕਰਣਾਂ '20%/80%' ਦੀ ਵੰਡ ਕਰੇਗਾ। ਸੂਕਸ਼ਮ ਉਪਕਰਣਾਂ 'ਤੇ ਇਹ ਆਪਣੇ ਆਪ ਸਟੈਕ (100%) ਹੋ ਜਾਵੇਗਾ:

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਧਿਆਨ:ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਸਮੁੱਚਾ ਹਰਾਸ਼ਫਤ ਹਮੇਸ਼ਾ 12 ਹੋਵੇ

XLarge ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ

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

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਆਪਣੇ ਬਿਨਾ ਲੈਗਾਉਣਾ

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

ਜੇਕਰ ਸਕਰੀਨ ਸਾਈਜ਼ਲਘੂ 1200pxਅਤੇ ਸਤੰਭ ਪੱਧਰੀ ਸਟੈਕਡ ਹੋਣਗੇ:

<!-- ਦੋ ਸਤੰਭ: ਉਹਨਾਂ ਉਪਕਰਣਾਂ ਵਿੱਚ ਜਿਨ੍ਹਾਂ ਵਿੱਚ ਸੁਪਰ ਵੱਡਾ ਹੈ 50% ਚੌੜਾਈ -->
<div class="row">
  <div class="col-xl">1 of 2</div>
  <div class="col-xl">2 of 2</div>
</div>
<!-- ਚਾਰ ਸਤੰਭ: ਉਹਨਾਂ ਉਪਕਰਣਾਂ ਵਿੱਚ ਜਿਨ੍ਹਾਂ ਵਿੱਚ ਸੁਪਰ ਵੱਡਾ ਹੈ 25% ਚੌੜਾਈ -->
<div class="row">
  <div class="col-xl">1 of 4</div>
  <div class="col-xl">2 of 4</div>
  <div class="col-xl">3 of 4</div>
  <div class="col-xl">4 of 4</div>
</div>

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ