بوت اسپرینگ 5 گرڈ نمونہ
- ਪਿਛਲਾ ਪੰਨਾ BS5 ਗ੍ਰਿੱਡ XXL
- ਅਗਲਾ ਪੰਨਾ BS5 ਬੇਸਿਕ ਟੈਮਪਲੇਟ
下面我们整理了一些 Bootstrap 5 网格布局的实例。
ਤਿੰਨ ਸਮਾਨ ਕਾਲਮ
ਨਿਰਧਾਰਿਤ ਸੰਖਿਆ ਦੇ ਇਲਾਕੇ ਵਿੱਚ ਵਰਤਣ ਵਾਲੇ .col ਕਲਾਸ ਨੂੰ ਵਰਤਣ ਵਾਲੇ ਤਿੰਨ ਕਾਲਮ (ਹਰ ਕਿਸੇ ਦੇ ਚੌਕੇ 33.33% ਹੋਣਗੇ) ਨੂੰ ਹਰ ਕਿਸੇ ਦੇ ਚੌਕੇ 33.33% ਹੋਣਗੇ) ਵਰਤਣ ਵਾਲੇ ਕਾਲਮ ਨੂੰ ਹਰ ਕਿਸੇ ਦੇ ਚੌਕੇ 33.33% ਹੋਣਗੇ):
ਉਦਾਹਰਣ
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
ਨੰਬਰ ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਲੇ ਤਿੰਨ ਸਮਾਨ ਕਾਲਮ
ਤੁਸੀਂ ਨੰਬਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਾਲਮ ਚੌਕੇ ਕੰਟਰੋਲ ਕਰ ਸਕਦੇ ਹੋ। ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਕੁੱਲ ਸਮਾਂ 12 ਤੋਂ ਘੱਟ ਹੋਵੇ (ਸਾਰੇ 12 ਕਾਲਮ ਵਰਤਣਾ ਜ਼ਰੂਰੀ ਨਹੀਂ ਹੈ):
ਉਦਾਹਰਣ
<div class="row"> <div class="col-4">col-4</div> <div class="col-4">col-4</div> <div class="col-4">col-4</div> </div>
ਤਿੰਨ ਅਸਮਾਨ ਕਾਲਮ
ਅਸਮਾਨ ਕਾਲਮ ਬਣਾਉਣ ਲਈ ਤੁਸੀਂ ਨੰਬਰ ਵਰਤਣਾ ਹੋਵੇਗਾ। ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ 25%/50%/25% ਦੀ ਵੰਡ ਬਣਾਈ ਜਾਵੇਗੀ:
ਉਦਾਹਰਣ
<div class="row"> <div class="col-3">col-3</div> <div class="col-6">col-6</div> <div class="col-3">col-3</div> </div>
ਕਾਲਮ ਚੌਕੇ ਸੈੱਟ ਕਰੋ
ਤਾਂ ਹਾਲੇ, ਇੱਕ ਕਾਲਮ ਦੀ ਚੌਕੇ ਸੈੱਟ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਭਾਈਚਾਰੇ ਵਾਲੇ ਕਾਲਮ ਆਪ ਹੀ ਆਕਾਰ ਬਦਲ ਲੈਣ ਦੇਣਗੇ। ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ 25%/50%/25% ਦੀ ਵੰਡ ਬਣਾਈ ਜਾਵੇਗੀ:
ਉਦਾਹਰਣ
<div class="row"> <div class="col">col</div> <div class="col-6">col-6</div> <div class="col">col</div> </div>
ਅਧਿਕ ਸਮਾਨ ਕਾਲਮ
ਉਦਾਹਰਣ
<!-- ਦੋ ਸਮਾਨ ਕਾਲਮ --> <div class="row"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <!-- ਚਾਰ ਸਮਾਨ ਕਾਲਮ --> <div class="row"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <!-- ਛੇ ਸਮਾਨ ਕਾਲਮ --> <div class="row"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
ਰੋ ਕੋਲਸ
ਤੁਸੀਂ ਇਸ ਦੀ ਵੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ .row-cols-* ਕਲਾਸ ਕੰਟਰੋਲ ਹੋਣਾ ਹੈ ਕਿਉਂਕਿ ਸਾਡੇ ਕਾਲਮ ਇੱਕ ਦੂਜੇ ਦੇ ਪਾਸੇ ਹਨ (ਚਾਹੇ ਕਿਤਨੇ ਕਾਲਮ ਹੋਣ):
ਉਦਾਹਰਣ
<div class="row row-cols-1"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <div class="row row-cols-2"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <div class="row row-cols-3"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
ਅਧਿਕ ਅਸਮਾਨ ਕਾਲਮ
ਉਦਾਹਰਣ
<!-- ਦੋ ਅਸਮਾਨ ਕਾਲਮ --> <div class="row"> <div class="col-8">1 of 2</div> <div class="col-4">2 of 2</div> </div> <!-- Four unequal columns --> <div class="row"> <div class="col-2">1 of 4</div> <div class="col-2">2 of 4</div> <div class="col-2">3 of 4</div> <div class="col-6">4 of 4</div> </div> <!-- Setting two column widths --> <div class="row"> <div class="col-4">1 of 4</div> <div class="col-6">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div>
ਇੱਕ ਚੌਦਾਈ ਉੱਚਾਈ
ਜੇਕਰ ਇੱਕ ਕਲਾਨ ਦੂਜੇ ਕਲਾਨ ਤੋਂ ਉੱਚਾ ਹੈ (ਟੈਕਸਟ ਜਾਂ CSS ਉੱਚਾਈ ਦੇ ਕਾਰਣ), ਬਾਕੀ ਤਕ ਫਿਰ ਸ਼ਾਮਿਲ ਹੁੰਦੇ ਹਨ:
ਉਦਾਹਰਣ
<div class="row"> <div class="col">Lorem ipsum...</div> <div class="col">col</div> <div class="col">col</div> </div>
ਨਿਹਿਤ ਕਲਾਨ
ਇਹ ਉਦਾਹਰਣ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਕਿਵੇਂ ਦੋ ਕਲਾਨ ਸਾਰਣੀ ਬਣਾਓ, ਜਿਸ ਵਿੱਚ ਇੱਕ ਕਲਾਨ ਵਿੱਚ ਦੋ ਹੋਰ ਕਲਾਨ ਹਨ:
ਉਦਾਹਰਣ
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
ਪ੍ਰਤੀਕਿਰਿਆ ਕਲਾਸ
Bootstrap 5 ਗ੍ਰਿੱਡ ਸਿਸਟਮ ਵਿੱਚ ਪੰਜ ਕਲਾਸ ਹਨ:
.col-(ਅਧਿਕਤਮ ਛੋਟਾ ਸਮਾਰਕ - ਸਕਰੀਨ ਚੌਦਾਈ 576px ਤੋਂ ਘੱਟ ਹੁੰਦੀ ਹੈ).col-sm-(ਛੋਟਾ ਸਮਾਰਕ - ਸਕਰੀਨ ਚੌਦਾਈ 576px ਤੋਂ ਵੱਧ ਹੁੰਦੀ ਹੈ).col-md-(ਮੱਧ ਸਮਾਰਕ - ਸਕਰੀਨ ਚੌਦਾਈ 768 ਪਿਕਸਲ ਤੋਂ ਵੱਧ ਹੁੰਦੀ ਹੈ).col-lg-(ਮੋਟਾ ਸਮਾਰਕ - ਸਕਰੀਨ ਚੌਦਾਈ 992 ਪਿਕਸਲ ਤੋਂ ਵੱਧ ਹੁੰਦੀ ਹੈ).col-xl-(ਵੱਡੇ ਸਮਾਰਕ - ਸਕਰੀਨ ਚੌਦਾਈ 1200px ਤੋਂ ਵੱਧ ਹੁੰਦੀ ਹੈ).col-xxl-(ਸਭ ਤੋਂ ਵੱਡੇ ਸਮਾਰਕ - ਸਕਰੀਨ ਚੌਦਾਈ 1400px ਤੋਂ ਵੱਧ ਹੁੰਦੀ ਹੈ)
ਉਪਰੋਕਤ ਕਲਾਸਾਂ ਨੂੰ ਮਿਲਾ ਕੇ ਵਧੇਰੇ ਗਤੀਸ਼ੀਲ ਅਤੇ ਮਨੁੱਖੀ ਸਾਰਣੀ ਬਣਾਓ ਸਕਦੇ ਹੋ。
ਸੁਝਾਅ:ਹਰ ਕਲਾਸ ਪ੍ਰਪੋਰਸ਼ਨਲ ਤੌਰ 'ਤੇ ਵਧਾਈ ਜਾਂਦੀ ਹੈ, ਇਸ ਲਈ ਜੇਕਰ ਤੁਸੀਂ sm ਅਤੇ md ਸਮਾਨ ਚੌਦਾਈ ਸੈੱਟ ਕਰਨ ਲਈ ਸਿਰਫ਼ sm。
ਸਟੈਕ ਤੋਂ ਪੱਧਰੀ
ਇਹ ਉਦਾਹਰਣ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਕਿਵੇਂ ਕਲਾਨ ਸਾਰਣੀ ਬਣਾਓ, ਜੋ ਸ਼ੁਰੂ ਵਿੱਚ ਅਧਿਕਤਮ ਸਮਾਰਕ ਉਪਕਰਣਾਂ 'ਤੇ ਸਟੈਕ (ਸਟੈਕਿੰਗ) ਹੁੰਦੀ ਹੈ ਅਤੇ ਫਿਰ ਵੱਡੇ ਸਮਾਰਕ ਉਪਕਰਣਾਂ (sm, md, lg ਅਤੇ xl) 'ਤੇ ਪੱਧਰੀ (ਹੈਵੈਲੇਸ਼ਨ) ਸਾਰਣੀ ਬਣਦੀ ਹੈ:
ਉਦਾਹਰਣ
<div class="row"> <div class="col-sm-9">col-sm-9</div> <div class="col-sm-3">col-sm-3</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div>
ਮਿਕਸ ਅਤੇ ਮੈਚ
ਉਦਾਹਰਣ
<!-- ਅਧਿਕ ਛੋਟੇ ਉਪਕਰਣ 'ਤੇ 50%/50% ਵੰਡ, ਵੱਡੇ ਉਪਕਰਣ 'ਤੇ 75%/25% ਵੰਡ --> <div class="row"> <div class="col-6 col-sm-9">col-6 col-sm-9</div> <div class="col-6 col-sm-3">col-6 col-sm-3</div> </div> <!-- ਅਧਿਕ ਛੋਟੇ, ਛੋਟੇ, ਮੱਧ ਉਪਕਰਣਾਂ 'ਤੇ 58%/42% ਵੰਡ, ਵੱਡੇ ਅਤੇ ਅਧਿਕ ਵੱਡੇ ਉਪਕਰਣਾਂ 'ਤੇ 66.3%/33.3% ਵੰਡ --> <div class="row"> <div class="col-7 col-lg-8">col-7 col-lg-8</div> <div class="col-5 col-lg-4">col-5 col-lg-4</div> </div> <!-- ਛੋਟੇ ਉਪਕਰਣਾਂ 'ਤੇ 25%/75% ਵੰਡ, ਮੱਧ ਉਪਕਰਣਾਂ 'ਤੇ 50%/50% ਵੰਡ, ਵੱਡੇ ਅਤੇ ਅਧਿਕ ਵੱਡੇ ਉਪਕਰਣਾਂ 'ਤੇ 33%/66% ਵੰਡ। ਅਧਿਕ ਛੋਟੇ ਉਪਕਰਣਾਂ 'ਤੇ ਆਪਣੇ ਆਪ ਸਟੈਕ (100%) --> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div> <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div> </div>
ਬੰਦੂਕਰਣ ਰਹਿਤ
ਜੇਕਰ ਸਿਰਲੇਖਾਂ ਦਰਮਿਆਨ ਦੂਰੀ (ਅਤਿਰਿਕਤ ਜਗ੍ਹਾ) ਬਦਲਣੀ ਹੈ, ਤਾਂ ਕੋਈ ਵੀ .g-1|2|3|4|5 ਵਰਗ (.g-4 ਮੂਲਤਬੀ ਹੈ)।
ਜੇਕਰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬੰਦੂਕਰਣ (gutter) ਹਟਾਉਣਾ ਹੈ, ਤਾਂ ਇਸਤੇਮਾਲ ਕਰੋ .g-0：
ਉਦਾਹਰਣ
<div class="row g-0">
- ਪਿਛਲਾ ਪੰਨਾ BS5 ਗ੍ਰਿੱਡ XXL
- ਅਗਲਾ ਪੰਨਾ BS5 ਬੇਸਿਕ ਟੈਮਪਲੇਟ
