بوت اسپرینگ 5 کنٹینر

بوت اسپرینگ 5 کنٹینر

ਪਿਛਲੇ ਅਧਿਆਏ ਵਿੱਚ ਤੁਸੀਂ ਸਿੱਖੇ ਕਿ ਬ੍ਰੌਸਟਪ ਨੂੰ ਸਾਈਟ ਸਮੱਗਰੀ ਨੂੰ ਬੰਦਕਰ ਵਰਗ ਦੇ ਇਲਾਵਾ ਲੋੜੀਂਦਾ ਹੈ。

ਅਸੀਂ ਕੰਟੇਨਰ ਵਿੱਚ ਸਮੱਗਰੀ ਭਰਦੇ ਹਾਂ ਅਤੇ ਦੋ ਕੰਟੇਨਰ ਵਰਗ ਉਪਲੱਬਧ ਹਨ:

  • .container ਵਰਗ ਨੇ ਜਵਾਬੀ ਸਥਿਰ ਚੌੜਾਈ ਵਾਲੇ ਕੰਟੇਨਰ ਪ੍ਰਦਾਨ ਕੀਤੇ ਹਨ
  • .container-fluid ਵਰਗ ਨੇ ਪੂਰੀ ਚੌੜਾਈ ਵਾਲੇ ਕੰਟੇਨਰ ਪ੍ਰਦਾਨ ਕੀਤੇ ਹਨ

ਸਥਿਰ ਕੰਟੇਨਰ

ਵਰਗ ਦੀ ਵਰਤੋਂ .container ਵਰਗ ਨਾਲ ਜਵਾਬੀ ਚੌੜਾਈ ਵਾਲੇ ਕੰਟੇਨਰ ਬਣਾਉਂਦੇ ਹਨ。

ਧਿਆਨ ਦੇਵੋ ਕਿ ਇਸ ਦੀ ਚੌੜਾਈ (max-width）ਵੱਖ-ਵੱਖ ਸਕਰੀਨ ਅਕਾਰਾਂ 'ਚ ਬਦਲਦੀ ਹੈ:

ਅਤਿ-ਛੋਟਾ
<576px 		ਅਤਿ-ਛੋਟਾ
≥576px 		ਛੋਟਾ
≥768px 		ਮੱਧ
≥992px 		ਐਕਸਟਰਾ ਲਰਜ਼
≥1200px 		XXL
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

ਕੀਤੇ ਹੇਠਲੇ ਉਦਾਹਰਨ ਨੂੰ ਖੋਲ੍ਹੋ ਅਤੇ ਬਰਾਉਜ਼ਰ ਵਿੰਡੋ ਦਾ ਅਕਾਰ ਸਰਕਰਾਰ ਕਰੋ ਤਾਂ ਕਿ ਕੰਟੇਨਰ ਚੌੜਾਈ ਵੱਖ-ਵੱਖ ਬੰਦੂਕਾਂ 'ਚ ਕਿਵੇਂ ਬਦਲਦੀ ਹੈ ਦੇਖੋ:

ਉਦਾਹਰਣ

<div class="container">
  <h1>ਮੇਰੀ ਪਹਿਲੀ ਬ੍ਰੌਸਟਪ ਪੇਜ</h1>
  <p>ਇਹ ਕੁਝ ਟੈਕਸਟ ਹੈ。</p>
</div>

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

XXL ਬੰਦੂਕ (≥1400px) ਬ੍ਰੌਸਟਪ 5 ਵਿੱਚ ਨਵੇਂ ਹੋਏ ਹਨ ਅਤੇ ਬ੍ਰੌਸਟਪ 4 ਵਿੱਚ ਸਭ ਤੋਂ ਵੱਡੇ ਬੰਦੂਕ ਐਕਸਟਰਾ ਲਰਜ਼ (≥1200px) ਹਨ。

ਪੂਰੀ ਚੌੜਾਈ ਵਾਲੇ ਕੰਟੇਨਰ

ਵਰਗ ਦੀ ਵਰਤੋਂ .container-fluid ਵਰਗ ਨਾਲ ਪੂਰੀ ਚੌੜਾਈ ਵਾਲੇ ਕੰਟੇਨਰ ਬਣਾਉਂਦੇ ਹਨ ਜੋ ਹਮੇਸ਼ਾ ਪੂਰੀ ਸਕਰੀਨ ਚੌੜਾਈ ਤੱਕ ਫੈਲਦੇ ਹਨ (width ਹਮੇਸ਼ਾ 100%）：

ਉਦਾਹਰਣ

<div class="container-fluid">
  <h1>ਮੇਰੀ ਪਹਿਲੀ ਬ੍ਰੌਸਟਪ ਪੇਜ</h1>
  <p>ਇਹ ਕੁਝ ਟੈਕਸਟ ਹੈ。</p>
</div>

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

ਕੰਟੇਨਰ ਖਿੜ੍ਹੀ

ਮੂਲ ਰੂਪ ਵਿੱਚ, ਕੰਟੇਨਰ ਦੋਹਾਂ ਤਰਫ਼ ਵਿੱਚ ਖਿੜ੍ਹੀ ਹੁੰਦੀ ਹੈ (ਆਉਟਰੀਸਪੇਸ), ਪਰ ਉੱਚੀ ਜਾਂ ਹੇਠਲੀ ਖਿੜ੍ਹੀ ਨਹੀਂ ਹੁੰਦੀ (ਟੋਪ ਜਾਂ ਬੋਟਮ ਇਨਰਸਪੇਸ)। ਇਸ ਲਈ ਅਸੀਂ ਸਾਧਾਰਨ ਤੌਰ 'ਤੇ spacing ਉਪਯੋਗਿਕਤਾਵਾਂ（ਉਪਯੋਗਿਕਤਾਵਾਂ），ਜਿਵੇਂ ਕਿ ਅਤਿਰਿਕਤ ਖਿੜ੍ਹੀ ਅਤੇ ਮੈਰੀਜ਼, ਉਹ ਬਿਹਤਰ ਦਿਖਾਈ ਦੇਣ। ਉਦਾਹਰਨ ਵਜੋਂ，.pt-5 ਦਾ ਮਤਲਬ "ਇੱਕ ਵੱਡੇਉੱਚੀ ਖਿੜ੍ਹੀ：

ਉਦਾਹਰਣ

<div class="container pt-5"></div>

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

ਕੰਟੇਨਰ ਬਾਰਡਰ ਅਤੇ ਰੰਗ

ਹੋਰ ਟੂਲਜ਼, ਜਿਵੇਂ ਕਿ ਬਾਰਡਰ ਅਤੇ ਰੰਗ, ਅਕਸਰ ਕੰਟੇਨਰ ਦੇ ਨਾਲ ਵੀ ਵਰਤੇ ਜਾਂਦੇ ਹਨ:

ਉਦਾਹਰਣ

<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>

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

ਰੰਗ ਅਤੇ ਬਾਰਡਰ ਟੂਲਜ਼ ਬਾਰੇ ਬਹੁਤ ਸਾਰੀ ਜਾਣਕਾਰੀ ਤੁਸੀਂ ਬਾਅਦ ਵਿੱਚ ਦੇਖ ਸਕਣਗੇ。

ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਕੰਟੇਨਰ

ਤੁਸੀਂ ਇਸ ਦੇ ਅਲਾਵਾ .container-sm|md|lg|xl ਵਰਗ ਨਾਲ ਨਿਰਧਾਰਿਤ ਕਰਨ ਲਈ ਜਦੋਂ ਕੰਟੇਨਰ ਦਾ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਨਾ ਹੈ ਤਾਂ ਸਪਸ਼ਟ ਕੀਤਾ ਜਾਵੇਗਾ。

ਕੰਟੇਨਰ ਦੇ max-width ਵੱਖ-ਵੱਖ ਸਕਰੀਨ ਸਾਈਜ਼ / ਵਿਜੂਅਲ ਪੋਰਟ ਉੱਤੇ ਬਦਲ ਰਹੇ ਹਨ:

ਵਰਗ ਅਤਿ-ਛੋਟਾ
<576px		 ਅਤਿ-ਛੋਟਾ
≥576px		 ਛੋਟਾ
≥768px		 ਮੱਧ
≥992px		 ਵੱਡਾ
≥1200px		 XXL
≥1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px

ਉਦਾਹਰਣ

<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>

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