بوت اسپرینک 5 فلیکس

کلاس‌های ابزار/کمک

Bootstrap 5 دارای بسیاری از کلاس‌های ابزار/کمک است که می‌توانید بدون استفاده از هیچ کد CSS، به سرعت سبک عناصر را تنظیم کنید.

لبه‌ها

استفاده از کلاس‌های لبه برای افزودن یا حذف لبه‌ها:

مثال

<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 مركزی عنصر (افزودن margin-left و margin-right: 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>

آپ خود سنجید

فاصلہ

بوت اسٹپ 5 میں وسیع سمت کا مارگن اور پینڈنگ پر یونٹ کلاس موجود ہیں۔ وہ تمام بکپوائنٹس کے لئے استعمالی ہیں:

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

یہ کلاسوں کا استعمال کے فورمٹ یہ ہوتا ہے:{property}{sides}-{size} used for xs، as well as {property}{sides}-{breakpoint}-{size} used for sm、md、lg、xl and xxl。

property one of the following is:

  • m - set margin
  • p - set padding

sides one of the following is:

  • t - set margin-top یا padding-top
  • b - set margin-bottom یا padding-bottom
  • s - set margin-left یا padding-left
  • e - set margin-right یا padding-right
  • x - set at the same time padding-left and padding-right یا margin-left and margin-right
  • y - set at the same time padding-top and padding-bottom یا margin-top and margin-bottom
  • blank - set on all four sides of the element margin یا padding

size one of the following is:

  • 0 - put margin یا padding set to 0
  • 1 - put margin یا padding set to .25rem
  • 2 - put margin یا padding set to .5rem
  • 3 - put margin یا padding set to 1rem
  • 4 - put margin یا padding set to 1.5rem
  • 5 - put margin یا padding set to 3rem
  • auto - put margin set to 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 اکائیوں کا مرجع دستاویز کم سائدها کی بار کریں اور مختلف اکائیوں کی مختلف سائزوں کے بار کریں.

سائدها

آپ کا استعمال 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 کلاس عناصر کی دیکھ بھال کو کنٹرول کرسکتی ہیں:

نوٹ:یہ کلاسوں نے CSS دیسپلے کا مرتبہ بدلنا نہیں کرسکتا، وہ صرف 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>

آپ خود سنجید

رنگ

جیسا کہ 'رنگ' کے چپ میں بتایا گیا ہے، نیچے تمام متن اور پس منظر رنگ کی کلاسوں کی فہرست دی گئی ہے:

متن کی کلاسوں کا حوالہ دیتا ہے:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body(مقابلہ بدل کا رنگ/عموماً سورجی رنگ)
  • .text-light

مثال

آپ خود سنجید

متن کی کلاس بھی لنگ میں استعمال کی جاسکتی ہیں:

مثال

آپ خود سنجید

آپ .text-black-50 یا .text-white-50 کی کلاس استعمال کرسکتے ہیں تاکہ 50% کی شفافیت کا رکھا جائے:

مثال

آپ خود سنجید

پس منظر رنگ

پس منظر رنگ کی کلاسوں کا حوالہ دیتا ہے:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

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

مثال

آپ خود سنجید