ابزارهای مفید Bootstrap 5

کلاس‌های Utilitarian / Helper

Bootstrap 5 شامل بسیاری از کلاس‌های utilitarian/helper است که می‌توانید بدون استفاده از هیچ کد 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>

به طور مستقیم امتحان کنید

فاصله‌ها

Bootstrap 5 دارای مجموعه‌ای گسترده از کلاس‌های کاربردی margin و padding پاسخگو است. این کلاس‌ها برای تمام نقاط شکست (breakpoints) مناسب هستند:

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

استفاده از این دسته‌ها به صورت زیر است:{property}{sides}-{size} برای xs، و {property}{sides}-{breakpoint}-{size} برای smوmdوlgوxl و xxl.

property یکی از موارد زیر است:

  • m - تنظیم margin
  • p - تنظیم padding

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 - در تمامی چهار لبه عنصر تنظیم شود margin یا padding

size یکی از موارد زیر است:

  • 0 - تنظیم margin یا padding تنظیم شود 0
  • 1 - تنظیم margin یا padding تنظیم شود .25rem
  • 2 - تنظیم margin یا padding تنظیم شود .5rem
  • 3 - تنظیم margin یا padding تنظیم شود 1rem
  • 4 - تنظیم margin یا padding تنظیم شود 1.5rem
  • 5 - تنظیم margin یا padding تنظیم شود 3rem
  • auto - تنظیم margin به auto تنظیم شود

مثال‌ها

<div class="pt-4 bg-warning">من فقط margin بالا (1.5rem) دارم</div>
<div class="p-5 bg-success">من در تمامی لبه‌ها margin (3rem) دارم</div>
<div class="m-5 pb-5 bg-info">من در تمامی لبه‌ها و margin پایین (3rem) دارم</div>

به طور مستقیم امتحان کنید

مثال‌های بیشتر فاصله

.m-# / m-*-# margins تمامی لبه‌ها آزمایش کنید
.mt-# / mt-*-# margin بالا آزمایش کنید
.mb-# / mb-*-# margin پایین آزمایش کنید
.ms-# / ms-*-# margin چپ آزمایش کنید
.me-# / me-*-# margin راست آزمایش کنید
.mx-# / mx-*-# مargins افقی چپ و راست آزمایش کنید
.my-# / my-*-# margins عمودی بالا و پایین آزمایش کنید
.p-# / p-*-# margin تمامی لبه‌ها (پرکن) آزمایش کنید
.pt-# / pt-*-# margin بالا آزمایش کنید
.pb-# / pb-*-# margin پایین آزمایش کنید
.ps-# / ps-*-# margin چپ آزمایش کنید
.pe-# / pe-*-# margin راست آزمایش کنید
.py-# / py-*-# margins عمودی بالا و پایین آزمایش کنید
.px-# / px-*-# مargins افقی چپ و راست آزمایش کنید

شما می‌توانید در دستورالعمل واحد‌های CSS برای اطلاعات بیشتر در مورد rem و واحدهای اندازه مختلف در اینجا بخوانید.

سایه

لطفاً از shadow- برای افزودن سایه به عنصر استفاده کنید:

مثال‌ها

بدون سایه
<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 display value را تغییر نمی‌دهند. آن‌ها تنها 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-* کلاس‌ها با هم استفاده شوند.

مثال‌ها

به طور مستقیم امتحان کنید