بوت اسپرینگ 5 مفید آلٹرنٹیو

ਉਪਯੋਗਿਕ / ਸਹਾਇਕ ਕਲਾਸਾਂ

ਬੁੱਤਸਪ੍ਰਿੰਗ 5 ਵਿੱਚ ਕਈ ਉਪਯੋਗਿਕ / ਸਹਾਇਕ ਕਲਾਸਾਂ ਹਨ ਜੋ ਕਿ ਕੋਈ ਕ੍ਰਿਪਟੋਗ੍ਰਾਫਿਕ ਕੋਡ ਇਸਤੇਮਾਲ ਕੇਵਲ ਵਰਗ ਸਟਾਈਲ ਸੈਟ ਕਰਨ ਲਈ ਤੇਜ਼ੀ ਨਾਲ ਸੈਟ ਕਰ ਸਕਦੇ ਹਨ。

ਬੋਰਡਰ

ਬੋਰਡਰ ਕਲਾਸ ਦੀ ਮਦਦ ਨਾਲ ਇਲੈਕਟ੍ਰੌਨ ਨੂੰ ਬੋਰਡਰ ਜੋੜਨਾ ਜਾਂ ਹਟਾਉਣਾ:

مثال

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

خود کا تجربہ کریئن

ਬੋਰਡਰ ਚੌਡਾਈ

استعمال .border-1 ਤੋਂ .border-5 ਬੋਰਡਰ ਚੌਡਾਈ ਬਦਲਣ ਲਈ:

مثال

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

خود کا تجربہ کریئن

ਬੋਰਡਰ ਰੰਗ

ਕਿਸੇ ਵੀ ਕੰਟੈਕਸਟ ਬੋਰਡਰ ਰੰਗ ਵਰਗ ਨਾਲ ਬੋਰਡਰ ਨੂੰ ਰੰਗ ਜੋੜੋ:

مثال

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

خود کا تجربہ کریئن

ਕਿਨਾਰਾ ਗੋਲ

استعمال rounded ਐਲੀਮੈਂਟ ਨੂੰ ਗੋਲ ਕਿਨਾਰੇ ਜੋੜੋ:

مثال

<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>

خود کا تجربہ کریئن

ਫਲੌਟ ਅਤੇ ਫਲੌਟ ਸ਼ੁੱਧ ਕਰਨਾ

استعمال .float-end ਫਲੌਟ ਕਰਨ ਵਾਲੀ ਕਲਾਸ ਕਰੋ ਜਾਂ ਇਸ ਦੀ ਵਰਤੋਂ ਕਰੋ: .float-start ਸੱਜੇ ਤਰਫ ਫਲੌਟ ਕਰੋ ਅਤੇ ਇਸ ਦੀ ਵਰਤੋਂ ਕਰੋ: .clearfix ਫਲੌਟ ਸ਼ੁੱਧ ਕਰਨ ਵਾਲੀ ਕਲਾਸ:

مثال

<div class="clearfix">
  <span class="float-start">ਸੱਜੇ ਤਰਫ ਫਲੌਟ</span>
  <span class="float-end">ਸੱਜੇ ਤਰਫ ਫਲੌਟ</span>
</div>

خود کا تجربہ کریئن

ਰੈਸਪੋਨਸਿਵ ਫਲੌਟ

ਸਕਰੀਨ ਚੌਡਾਈ ਨੂੰ ਅਨੁਸਾਰ ਕਰਕੇ ਇਲੈਕਟ੍ਰੌਨਿਕ ਵਾਲੇ ਮੱਧਮਾਂਗੇ ਕਰੋ ਜਾਂ ਸੱਜੇ ਤਰਫ ਫਲੌਟ ਕਰੋ, ਯੂਜ਼ ਰੈਸਪੋਨਸਿਵ ਫਲੌਟ ਕਲਾਸ (.float-*-left|right) ਵਿੱਚ * ਹੈ:

  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

مثال

<div class="float-sm-end">ਛੋਟਾ ਸਕਰੀਨ ਜਾਂ ਵਧੇਰੇ ਚੌਡੇ ਸਕਰੀਨ 'ਤੇ ਸੱਜੇ ਤਰਫ ਫਲੌਟ</div><br>
<div class="float-md-end">ਮੱਧ ਸਕਰੀਨ ਜਾਂ ਵਧੇਰੇ ਚੌਡੇ ਸਕਰੀਨ 'ਤੇ ਸੱਜੇ ਤਰਫ ਫਲੌਟ</div><br>
<div class="float-lg-end">ਮੋਟਾ ਸਕਰੀਨ ਜਾਂ ਵਧੇਰੇ ਚੌਡੇ ਸਕਰੀਨ 'ਤੇ ਸੱਜੇ ਤਰਫ ਫਲੌਟ</div><br>
<div class="float-xl-end">ਅਧਿਕਤਮ ਸਕਰੀਨ ਜਾਂ ਵਧੇਰੇ ਚੌਡੇ ਸਕਰੀਨ 'ਤੇ ਸੱਜੇ ਤਰਫ ਫਲੌਟ</div><br>
<div class="float-xxl-end">ਵਿਸ਼ਾਲ ਸਕਰੀਨ ਜਾਂ ਵਧੇਰੇ ਚੌਡੇ ਸਕਰੀਨ 'ਤੇ ਸੱਜੇ ਤਰਫ ਫਲੌਟ</div><br>
<div class="float-none">ਫਲੌਟ ਨਹੀਂ ਕਰੋ</div>

خود کا تجربہ کریئن

ਮੱਧ ਮੱਧਮਾਂਗੇ ਮੁੱਢਕਲੀਬੇ

استعمال .mx-auto ਕਲਾਸ ਮੈਡੀਅਮ ਇਲੈਕਟ੍ਰੌਨਿਕ (ਮਾਰਜਿਨ-ਲੈਫਟ ਅਤੇ ਮਾਰਜਿਨ-ਰਾਈਟ: ਆਟੋ):

مثال

<div class="mx-auto bg-warning" style="width:150px">ਮੱਧਮੁੱਖ</div>

خود کا تجربہ کریئن

ਚੌਦਾਈ

w-* ਵਰਗ ਦੀ ਵਰਤੋਂ ਕਰਕੇ (.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100）ਅੰਗਰੇਜ਼ੀ ਦੇ ਇਲਾਵਾ ਸਿਖ਼ਤ ਵਿੱਚ ਵੀ ਇਹ ਚੌਦਾਈ ਨੂੰ ਸੈਟ ਕਰੋ:

مثال

<div class="w-25 bg-warning">ਚੌਦਾਈ 25%</div>
<div class="w-50 bg-warning">ਚੌਦਾਈ 50%</div>
<div class="w-75 bg-warning">ਚੌਦਾਈ 75%</div>
<div class="w-100 bg-warning">ਚੌਦਾਈ 100%</div>
<div class="w-auto bg-warning">ਸਵੈਚਾਲਤ ਚੌਦਾਈ</div>
<div class="mw-100 bg-warning">ਸਭ ਤੋਂ ਵੱਧ ਚੌਦਾਈ 100%</div>

خود کا تجربہ کریئن

ਉਚਾਈ

h-* ਵਰਗ ਦੀ ਵਰਤੋਂ ਕਰਕੇ (.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100）ਅੰਗਰੇਜ਼ੀ ਦੇ ਇਲਾਵਾ ਸਿਖ਼ਤ ਵਿੱਚ ਵੀ ਇਹ ਉਚਾਈ ਨੂੰ ਸੈਟ ਕਰੋ:

مثال

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">ਉਚਾਈ 25%</div>
  <div class="h-50 bg-warning">ਉਚਾਈ 50%</div>
  <div class="h-75 bg-warning">ਉਚਾਈ 75%</div>
  <div class="h-100 bg-warning">ਉਚਾਈ 100%</div>
  <div class="h-auto bg-warning">ਸਵੈਚਾਲਤ ਉਚਾਈ</div>
  <div class="mh-100 bg-warning" style="height:500px">ਸਭ ਤੋਂ ਵੱਧ ਉਚਾਈ 100%</div>
</div>

خود کا تجربہ کریئن

ਅੰਤਰਾਲ

Bootstrap 5 ਵਿੱਚ ਵਿਆਪਕ ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ margin ਅਤੇ padding ਵਰਗਾਂ ਹਨ। ਉਹ ਸਾਰੇ ਬੈਂਕਪੁਅਈਨਟਾਂ ਲਈ ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਹਨ:

  • xs (<= 576px)
  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

ਇਹ ਵਰਗਾਂ ਦਾ ਇਸਤੇਮਾਲ ਫਾਰਮੈਟ:{ਪ੍ਰਪਰਟੀ}{sides}-{ਸਾਈਜ਼} ਲਈ xs، ਅਤੇ {ਪ੍ਰਪਰਟੀ}{sides}-{breakpoint}-{ਸਾਈਜ਼} ਲਈ sm、md、lg、xl ਅਤੇ xxl。

ਪ੍ਰਪਰਟੀ ਇਕ ਵਿੱਚੋਂ ਹੈ:

  • m - ਸੈਟ ਕਰੋ ਮਾਰਜਿਨ
  • p - ਸੈਟ ਕਰੋ ਪੈਡਿੰਗ

sides ਇਕ ਵਿੱਚੋਂ ਹੈ:

  • t - ਸੈਟ ਕਰੋ margin-top یا padding-top
  • b - ਸੈਟ ਕਰੋ margin-bottom یا padding-bottom
  • s - ਸੈਟ ਕਰੋ margin-left یا padding-left
  • e - ਸੈਟ ਕਰੋ margin-right یا padding-right
  • x - ਸਾਥ-ਸਾਥ ਸੈਟ ਕਰੋ padding-left ਅਤੇ padding-right یا margin-left ਅਤੇ margin-right
  • y - ਸਾਥ-ਸਾਥ ਸੈਟ ਕਰੋ padding-top ਅਤੇ padding-bottom یا margin-top ਅਤੇ margin-bottom
  • blank - ਇਲੈਕਟ੍ਰੌਨ ਦੇ ਚਾਰ ਕਿਨਾਰਿਆਂ ਉੱਤੇ ਮਾਰਜਿਨ یا ਪੈਡਿੰਗ

ਸਾਈਜ਼ ਇਕ ਵਿੱਚੋਂ ਹੈ:

  • 0 - ਕੇਵਲ ਮਾਰਜਿਨ یا ਪੈਡਿੰਗ ਮੁੱਲ ਨੂੰ 0
  • 1 - ਕੇਵਲ ਮਾਰਜਿਨ یا ਪੈਡਿੰਗ ਮੁੱਲ ਨੂੰ .25rem
  • 2 - ਕੇਵਲ ਮਾਰਜਿਨ یا ਪੈਡਿੰਗ ਮੁੱਲ ਨੂੰ .5rem
  • 3 - ਕੇਵਲ ਮਾਰਜਿਨ یا ਪੈਡਿੰਗ ਮੁੱਲ ਨੂੰ 1rem
  • 4 - ਕੇਵਲ ਮਾਰਜਿਨ یا ਪੈਡਿੰਗ ਮੁੱਲ ਨੂੰ 1.5rem
  • 5 - ਕੇਵਲ ਮਾਰਜਿਨ یا ਪੈਡਿੰਗ ਮੁੱਲ ਨੂੰ 3rem
  • auto - ਕੇਵਲ ਮਾਰਜਿਨ ਮੁੱਲ ਨੂੰ auto ਮੁੱਲ ਦੇਣਾ

مثال

<div class="pt-4 bg-warning">ਮੈਂ ਸਿਰਫ਼ ਉੱਪਰ ਅੰਦਰੂਨੀ ਘੇਰਾਅ (1.5rem) ਰੱਖਿਆ ਹੈ</div>
<div class="p-5 bg-success">ਮੈਂ ਸਾਰੇ ਕਿਨਾਰਿਆਂ ਉੱਤੇ ਅੰਦਰੂਨੀ ਘੇਰਾਅ (3rem) ਰੱਖਿਆ ਹੈ</div>
<div class="m-5 pb-5 bg-info">ਮੈਂ ਸਾਰੇ ਕਿਨਾਰਿਆਂ ਉੱਤੇ ਬਾਹਰੀ ਘੇਰਾਅ (3rem) ਅਤੇ ਹੇਠ ਅੰਦਰੂਨੀ ਘੇਰਾਅ (3rem) ਰੱਖਿਆ ਹੈ</div>

خود کا تجربہ کریئن

ਹੋਰ ਅੰਤਰਾਲ ਉਦਾਹਰਣ

.m-# / m-*-# ਸਾਰੇ ਕਿਨਾਰਿਆਂ ਦੇ ਬਾਹਰੀ ਘੇਰਾਅ ਸਿਖਰਨਾ ਦੋਹਰਾਓ
.mt-# / mt-*-# ਉੱਪਰ ਬਾਹਰੀ ਘੇਰਾਅ ਸਿਖਰਨਾ ਦੋਹਰਾਓ
.mb-# / mb-*-# ਹੇਠ ਬਾਹਰੀ ਘੇਰਾਅ ਸਿਖਰਨਾ ਦੋਹਰਾਓ
.ms-# / ms-*-# ਖੱਬੇ ਬਾਹਰੀ ਘੇਰਾਅ ਸਿਖਰਨਾ ਦੋਹਰਾਓ
.me-# / me-*-# ਸੱਜੇ ਬਾਹਰੀ ਘੇਰਾਅ ਸਿਖਰਨਾ ਦੋਹਰਾਓ
.mx-# / mx-*-# ਖੱਬੇ ਅਤੇ ਸੱਜੇ ਅੰਦਰੂਨੀ ਘੇਰਾਅ ਸਿਖਰਨਾ ਦੋਹਰਾਓ
.my-# / my-*-# ਉੱਪਰ ਅਤੇ ਹੇਠ ਬਾਹਰੀ ਘੇਰਾਅ ਸਿਖਰਨਾ ਦੋਹਰਾਓ
.p-# / p-*-# ਸਾਰੇ ਕਿਨਾਰਿਆਂ ਦੇ ਅੰਦਰੂਨੀ ਘੇਰਾਅ (ਪੈਡਿੰਗ) ਸਿਖਰਨਾ ਦੋਹਰਾਓ
.pt-# / pt-*-# ਉੱਪਰ ਅੰਦਰੂਨੀ ਘੇਰਾਅ ਸਿਖਰਨਾ ਦੋਹਰਾਓ
.pb-# / pb-*-# ਹੇਠ ਅੰਦਰੂਨੀ ਘੇਰਾਅ ਸਿਖਰਨਾ ਦੋਹਰਾਓ
.ps-# / ps-*-# ਖੱਬੇ ਅੰਦਰੂਨੀ ਘੇਰਾਅ ਸਿਖਰਨਾ ਦੋਹਰਾਓ
.pe-# / pe-*-# ਸੱਜੇ ਅੰਦਰੂਨੀ ਘੇਰਾਅ ਸਿਖਰਨਾ ਦੋਹਰਾਓ
.py-# / py-*-# ਉੱਪਰ ਅਤੇ ਹੇਠ ਅੰਦਰੂਨੀ ਘੇਰਾਅ ਸਿਖਰਨਾ ਦੋਹਰਾਓ
.px-# / px-*-# ਖੱਬੇ ਅਤੇ ਸੱਜੇ ਅੰਦਰੂਨੀ ਘੇਰਾਅ ਸਿਖਰਨਾ ਦੋਹਰਾਓ

ਸਾਡੇ CSS ਇਕਾਈਆਂ ਸੰਦਰਭ ਹੰਡਬੁੱਕ rem ਅਤੇ ਵੱਖ-ਵੱਖ ਮੈਟਰਿਕ ਇਕਾਈਆਂ ਬਾਰੇ ਹੋਰ ਵਿਸਤਾਰ ਲਈ ਚੜ੍ਹੋ。

ਛਾਲ

ਵਰਤੋਂ ਕਰੋ shadow- ਵਰਗ ਨਾਲ ਇਲੈਕਟ੍ਰੌਨ ਨੂੰ ਛਾਲ ਜੋੜੋ:

مثال

<div class="shadow-none p-4 mb-4 bg-light">ਕੋਈ ਛਾਲ ਨਹੀਂ</div>
<div class="shadow-sm p-4 mb-4 bg-white">ਛੋਟਾ ਛਾਯਾਚਿੱਤਰ</div>
<div class="shadow p-4 mb-4 bg-white">ਮੂਲਤਬੀ ਛਾਯਾਚਿੱਤਰ</div>
<div class="shadow-lg p-4 mb-4 bg-white">ਵੱਡਾ ਛਾਯਾਚਿੱਤਰ</div>

خود کا تجربہ کریئن

ਉੱਚਾਈ ਸਾਂਝਾ ਕਰੋ

ਵਰਤੋਂ ਕਰੋ align- ਵਰਗ ਸਮਾਨ ਵਸਤੂ ਦੀ ਸਥਿਤੀ ਨੂੰ ਬਦਲਦੇ ਹਨ (ਸਿਰਫ inline, inline-block, inline-table ਅਤੇ ਟੇਬਲ ਸੈੱਲ ਵਸਤੂਆਂ ਲਈ):

مثال

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

خود کا تجربہ کریئن

ਅਸਪੈਕਟ ਰੇਸ਼ੀਅਮ

ਮੁੱਖ ਵਸਤੂ ਦੀ ਚੌੜਾਈ ਦੇ ਅਧਾਰ 'ਤੇ ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਵਿਡੀਓ ਜਾਂ ਸਲਾਈਡ ਸ਼ੋ ਬਣਾਓ。

ਜੋੜੋ .ratio ਵਰਗ ਅਤੇ ਚੁਣੇ ਗਏ ਅਸਪੈਕਟ ਰੇਸ਼ੀਅਮ .aspect-ratio-* ਮੁੱਖ ਵਸਤੂ ਵਿੱਚ ਜੋੜੋ ਅਤੇ ਵਿਡੀਓ ਜਾਂ iframe ਵਿੱਚ ਵਿਸ਼ਾਲ ਵਸਤੂ ਜੋੜੋ:

مثال

<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="shanghai.mp4"></iframe>
</div>

خود کا تجربہ کریئن

ਦਿਸ਼ਾ

استعمال .visible یا .invisible ਵਰਗ ਸਮਾਨ ਵਸਤੂ ਦੀ ਦਿਸ਼ਾ ਨੂੰ ਕੰਟਰੋਲ ਕਰ ਸਕਦੇ ਹਨ:

ਟਿੱਪਣੀਆਂ:ਇਹ ਵਰਗ ਸੀਐੱਸਐੱਸ display ਮੁੱਲ ਨੂੰ ਬਦਲ ਦਾ ਨਹੀਂ ਹੈ। ਉਹ ਸਿਰਫ ਜੋੜਦੇ ਹਨ visibility:visible یا visibility:hidden。

مثال

<div class="visible">مجھی دکھایا جائیگا。</div>
<div class="invisible">مجھی بند کیا جائیگا。</div>

خود کا تجربہ کریئن

بند کرنے والی علامت

استعمال .btn-close کلاس کو بند کرنے والی علامت کا انداز تعین کرسکتا ہے۔ عام طور پر وارننگ بوف اور مودل میں استعمال کی جاتی ہیں。

مثال

<button type="button" class="btn-close"></button>

خود کا تجربہ کریئن

اسکرین ریکارڈر

استعمال .visually-hidden کلاسز جو تمام سسٹمز پر علامت کا خفیہ کرتی ہیں، سینر ریکارڈروں کو چوڑا نہیں کیا جائیگا:

مثال

<span class="visually-hidden">آپ سارے اسکرینوں پر خفیہ رہ جائیگا، سینر ریکارڈروں کو چوڑا نہیں کیا جائیگا。</span>

خود کا تجربہ کریئن

رنگ

جیسا کہ ‘رنگ’ کے چپ میں بتایا گیا ہے، نیچے تمام متن اور پس منظر رنگ کی کلاسز کی لسٹ دی گئی ہے:

متن کی کلاسز کا تعین:

  • .ٹیکسٹ-ماتد
  • .ٹیکسٹ-پرائمری
  • .ٹیکسٹ-سکسیس
  • .ٹیکسٹ-اینفارمیشن
  • .ٹیکسٹ-وائننگ
  • .ٹیکسٹ-ڈینجر
  • .ٹیکسٹ-سیکنڈری
  • .ٹیکسٹ-وائن
  • .ٹیکسٹ-ڈارک
  • .ٹیکسٹ-بادیمقابلہ رنگ کا رنگ (مجموعی طور پر بادی رنگ/عموماً بلک)
  • .ٹیکسٹ-لائٹ

مثال

خود کا تجربہ کریئن

متن کی کلاس بھی لینکوں کے لئے استعمال کی جاسکتی ہیں:

مثال

خود کا تجربہ کریئن

آپ کو بھی .ٹیکسٹ-بلک-50 یا .ٹیکسٹ-وائن-50 کی کلاس استعمال کرسکتا ہے تاکہ 50% کی شفافیت کا کچھ رنگ یا وائن رنگ کا تیار ہو سکے:

مثال

خود کا تجربہ کریئن

پس منظر رنگ

پس منظر رنگ کی کلاسز کا تعین:

  • .ٹیکسٹ-پرائمری
  • .ٹیکسٹ-سکسیس
  • .ٹیکسٹ-اینفارمیشن
  • .ٹیکسٹ-وائننگ
  • .ٹیکسٹ-ڈینجر
  • .ٹیکسٹ-سیکنڈری
  • .ٹیکسٹ-ڈارک
  • .ٹیکسٹ-بلیٹ

توجہ دے کریئن، پس منظر رنگ کا رنگ میں کچھ حالات میں، آپ کو ان کے ساتھ .ٹیکسٹ-* کلاس کو ساتھ استعمال کریئن

مثال

خود کا تجربہ کریئن