جدول آموزش

آموزش Bootstrap 5

• آموزش BS5
• آموزش BS5
• کانترولرهای BS5
• اساس‌های شبکه BS5
• چاپ‌های BS5
• رنگ‌های BS5
• جدول‌های BS5
• تصاویر BS5
• Jumbotron BS5
• پنجره‌های هشدار BS5
• دکمه‌های BS5
• گروه‌های دکمه BS5
• کلاهک‌های BS5
• نوارهای پیشرفت BS5
• بارگذار BS5
• صفحاتBS5
• گروه‌های لیستی BS5
• کارت‌های BS5
• منوهای فروپاشی BS5
• چرخه‌های BS5
• ناوبری BS5
• نوارهای ناوبری BS5
• اسلایدر BS5
• مدال BS5
• آیکن‌های ابزار BS5
• 弹出框 BS5
• Toast BS5
• Scrollspy BS5
• Offcanvas BS5
• ابزارهای مفید BS5
• Flex BS5

فرم‌های Bootstrap 5

• فرم‌های BS5
• منوهای انتخابی BS5
• چک‌باکس‌ها و دکمه‌های انتخابی BS5
• دامنه BS5
• گروه‌های ورودی BS5
• برچسب‌های شناور BS5
• بررسی فرم BS5

شبکه‌های Bootstrap 5

• سیستم شبکه BS5
• BS5 چیده/水平和
• BS5 شبکه XSmall
• BS5 شبکه Small
• BS5 شبکه Medium
• BS5 شبکه Large
• BS5 شبکه XLarge
• BS5 شبکه XXL
• مثال‌های شبکه BS5

Bootstrap 5 دیگر

• قالب پایه BS5
• آزمون BS5

درس‌های انتخابی

پیشنهاد دوره:

• صندوقچه جادویی CodeW3C.com

چارچوب انعطاف‌پذیر

تفاوت اصلی بین Bootstrap 3 و Bootstrap 4 & 5 این است که Bootstrap 5 از flexbox به جای شناور برای مدیریت ترتیب استفاده می‌کند.

بخش فریم‌های انعطاف‌پذیر، می‌توانید به راحتی ساختارهای انعطاف‌پذیر و واکنش‌گرا را طراحی کنید بدون نیاز به استفاده از شناور یا قرارگیری.

اگر با flex آشنایی ندارید، می‌توانید در آموزش CSS Flexbox در اینجا یاد بگیرید.

نکته:IE9 و نسخه‌های قبلی آن از Flexbox پشتیبانی نمی‌کنند.

نکته:اگر نیاز به پشتیبانی IE8-9 دارید، از Bootstrap 3 استفاده کنید. این نسخه پایدارترین نسخه Bootstrap است، تیم همچنان از آن برای رفع خطاهای کلیدی و تغییرات مستندات پشتیبانی می‌کند. اما هیچ ویژگی جدیدی به آن اضافه نخواهد شد.

مثال

برای ایجاد یک کانترولر flexbox و تبدیل مستقیم‌ترین فرزندان آن به موارد flex، از d-flex کلاس:

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">پروژه انعطاف‌پذیر 1</div>
  <div class="p-2 bg-warning">پروژه انعطاف‌پذیر 2</div>
  <div class="p-2 bg-primary">پروژه انعطاف‌پذیر 3</div>
</div>

امتحان کنید

مثال

برای ایجاد یک کانترولر flexbox درون خطی، از d-inline-flex کلاس:

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">پروژه انعطاف‌پذیر 1</div>
  <div class="p-2 bg-warning">پروژه انعطاف‌پذیر 2</div>
  <div class="p-2 bg-primary">پروژه انعطاف‌پذیر 3</div>
</div>

امتحان کنید

جهت افقی

لطفاً از .flex-row پروژه‌های انعطاف‌پذیر را به صورت افقی (به صورت عمودی) نمایش می‌دهد. این تنظیم پیش‌فرض است.

توجه:استفاده از .flex-row-reverse می‌توانند به سمت راست در جهت افقی جابجا شوند:

مثال

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">پروژه انعطاف‌پذیر 1</div>
  <div class="p-2 bg-warning">پروژه انعطاف‌پذیر 2</div>
  <div class="p-2 bg-primary">پروژه انعطاف‌پذیر 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">پروژه انعطاف‌پذیر 1</div>
  <div class="p-2 bg-warning">پروژه انعطاف‌پذیر 2</div>
  <div class="p-2 bg-primary">پروژه انعطاف‌پذیر 3</div>
</div>

امتحان کنید

جهت عمودی

لطفاً از .flex-column پروژه‌های flex را به صورت عمودی نمایش می‌دهد (روی هم قرار می‌گیرند) یا از .flex-column-reverse جهت عمودی معکوس:

مثال

<div class="d-flex flex-column">
  <div class="p-2 bg-info">پروژه انعطاف‌پذیر 1</div>
  <div class="p-2 bg-warning">پروژه انعطاف‌پذیر 2</div>
  <div class="p-2 bg-primary">پروژه انعطاف‌پذیر 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">پروژه انعطاف‌پذیر 1</div>
  <div class="p-2 bg-warning">پروژه انعطاف‌پذیر 2</div>
  <div class="p-2 bg-primary">پروژه انعطاف‌پذیر 3</div>
</div>

امتحان کنید

محتوای هم‌ترازی

استفاده از .justify-content-* کلاس‌ها می‌توانند روشنایی پروژه‌های انعطاف‌پذیر را تغییر دهند. کلاس‌های معتبر عبارتند از::

• start(پیش‌فرض)
• end
• center
• between
• around

مثال

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

امتحان کنید

عرض یکسان

از flex پروژه استفاده کنید .flex-fill می‌توانید آن‌ها را به طور اجباری به عرض یکسان کنید:

مثال

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">پروژه انعطاف‌پذیر 1</div>
  <div class="p-2 bg-warning flex-fill">پروژه انعطاف‌پذیر 2</div>
  <div class="p-2 bg-primary flex-fill">پروژه انعطاف‌پذیر 3</div>
</div>

امتحان کنید

گسترش

از flex پروژه استفاده کنید .flex-grow-1 میتوانید فضای اضافی را استفاده کنید. در مثال زیر، دو اولین پروژه flex به فضای مورد نیاز اختصاص داده شده‌اند و پروژه آخر فضای قابل استفاده باقی‌مانده را اشغال کرده است:

مثال

<div class="d-flex">
  <div class="p-2 bg-info">پروژه انعطاف‌پذیر 1</div>
  <div class="p-2 bg-warning">پروژه انعطاف‌پذیر 2</div>
  <div class="p-2 bg-primary flex-grow-1">پروژه انعطاف‌پذیر 3</div>
</div>

امتحان کنید

توجه:از flex پروژه استفاده کنید .flex-shrink-1 می‌تواند در صورت نیاز کوچک شود.

ترتیب

استفاده از .order کلاس‌ها می‌توانند ترتیب بصری یک پروژه خاص flex را تغییر دهند. کلاس‌های معتبر از 0 تا 5 هستند، جایی که عدد کمتر اولویت بیشتری دارد (order-1 قبل از order-2 نمایش داده می‌شود و غیره):

مثال

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">پروژه انعطاف‌پذیر 1</div>
  <div class="p-2 bg-warning order-2">پروژه انعطاف‌پذیر 2</div>
  <div class="p-2 bg-primary order-1">پروژه انعطاف‌پذیر 3</div>
</div>

امتحان کنید

حاشیه‌های خودکار

استفاده از .ms-auto(با حرکت به راست) یا از .me-auto(با حرکت به چپ) می‌توان به راحتی حاشیه‌های خودکار به پروژه‌های انعطاف‌پذیر اضافه کرد:

مثال

<div class="d-flex bg-secondary">
  <div class="p-2 ms-auto bg-info">پروژه انعطاف‌پذیر 1</div>
  <div class="p-2 bg-warning">پروژه انعطاف‌پذیر 2</div>
  <div class="p-2 bg-primary">پروژه انعطاف‌پذیر 3</div>
</div>
<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">پروژه انعطاف‌پذیر 1</div>
  <div class="p-2 bg-warning">پروژه انعطاف‌پذیر 2</div>
  <div class="p-2 me-auto bg-primary">پروژه انعطاف‌پذیر 3</div>
</div>

امتحان کنید

بازگرداندن

از طریق .flex-nowrap(پیش‌فرض)،.flex-wrap یا .flex-wrap-reverse، که چگونه پروژه‌های flex در قالب‌بندی flex container بسته می‌شوند را کنترل می‌کند.

مثال

<div class="d-flex flex-wrap">..</div>
<div class="d-flex flex-wrap-reverse">..</div>
<div class="d-flex flex-nowrap">..</div>

امتحان کنید

محتوای هم‌ترازی

لطفاً از .align-content-* کنترل روش عمودی تراز کردن پروژه‌های انعطاف‌پذیر. کلاس‌های معتبر عبارتند از:

• .start-align-content(پیش‌فرض)
• .end-align-content
• .center-align-content
• .between-content
• .around-content
• .stretch-content

نکته:این کلاس‌ها بر روی پروژه‌های انعطاف‌پذیر یک خط تأثیری ندارند.

لطفاً روی دکمه‌های زیر کلیک کنید تا تفاوت پنج کلاس را مشاهده کنید: با تغییر روشنایی عمودی پروژه‌های انعطاف‌پذیر در جعبه نمونه

مثال

<div class="d-flex wrap flex start-content">..</div>
<div class="d-flex wrap flex end-content">..</div>
<div class="d-flex wrap flex center-content">..</div>
<div class="d-flex wrap flex around-content">..</div>
<div class="d-flex wrap flex stretch-content">..</div>

امتحان کنید

هم‌ترازی پروژه‌ها

لطفاً از .items-align-* کنترل کلاسیک خطروشنایی عمودی پروژه‌های انعطاف‌پذیر. کلاس‌های معتبر عبارتند از:

• .start-items
• .end-items
• .center-items
• .baseline-items
• .stretch-items(پیش‌فرض)

لطفاً روی دکمه‌های زیر کلیک کنید تا تفاوت پنج کلاس را مشاهده کنید:

مثال

<div class="d-flex start-items">..</div>
<div class="d-flex end-items">..</div>
<div class="d-flex center-items">..</div>
<div class="d-flex baseline-items">..</div>
<div class="d-flex stretch-items">..</div>

امتحان کنید

Self-align

لطفاً از .self-align-* کنترل کلاستعیین پروژه‌های انعطاف‌پذیرروشنایی عمودی. کلاس‌های معتبر عبارتند از:

• .start-self
• .end-self
• .center-self
• .baseline-self
• .stretch-self(پیش‌فرض)

برای مشاهده تفاوت بین پنج کلاس زیر، دکمه زیر را کلیک کنید:

مثال

<div class="d-flex bg-light" style="height:150px">
  <div class="p-2 border">ماده انعطاف‌پذیر 1</div>
  <div class="p-2 border align-self-start">ماده انعطاف‌پذیر 2</div>
  <div class="p-2 border">ماده انعطاف‌پذیر 3</div>
</div>

امتحان کنید

کلاس‌های انعطاف‌پذیر پاسخگو

تمام کلاس‌های انعطاف‌پذیر دارای کلاس‌های پاسخگو اضافی هستند که تنظیم کلاس‌های flex خاص در اندازه‌های صفحه‌نمایش خاص را آسان می‌کند.

* می‌تواند جایگزین sm،md،lg،xl یا xxl شود که به ترتیب به معنای صفحه‌های نمایش کوچک، متوسط، بزرگ،超大 و特大 هستند.

برای جستجوی کلاس‌های انعطاف‌پذیر خاص ..

ابزارخانه

آزمون JavaScript

لینک‌های حامی