سلام با آموزش Bootstrap 4 از دوره آموزش طراحی سایت در خدمت شما هستیم
آموزش کاربرد روش Flex در Bootstrap 4
بوت استرپ 4، از کلاس های Flex برای کنترل چیدمان (layout) اجزای صفحه استفاده می کند.
آموزش FlexBox با بوت استرپ 4:
بزرگترین تفاوت بین Bootstrap 3 و Bootstrap 4 این است که بوت استرپ 4 از FlexBox به جای شناورسازی (floats) جهت مدیریت و چیدمان قرارگیری عناصر صفحه، استفاده می کند.
ماژول قالب بندی Flexible Box، روش ساده تری جهت ایجاد قالب ریسپانسیو و واکنش گرا، بدون استفاده از خاصیت های شناوری (float) و موقعیت (Position)، در اختیارمان قرار داده است. اگر با ماژول Flex آشنا نیستید، به بخش آموزش FlexBox در سایت تحلیل داده بروید.
نکته :
ماژول FlexBox در نسخه های IE9 و قبلتر پشتیبانی نمی شود.
اگر نیاز دارید تا از پشتیبانی مرورگرهای IE9 و IE8 بهره گیرید، از Bootstrap 3 استفاده نمایید. بوت استرپ ورژن 3، پایدارترین نسخه بوت استرپ تا سال 2019 بوده و همچنان توسط تیم تولید کننده جهت رفع باگ های احتمالی و پشتیبانی و آموزش، مورد حمایت است اما ویژگی های جدید بوت استرپ 4، به آن اضافه نشده است!
برای ایجاد یک عنصر دربرگیرنده (Container) ماژول FlexBox و قرار دادن عناصر فرزند مورد نظر در آن، از کلاس d-flex، استفاده نمایید.
مثال: در کد مثال عملی زیر، یک عنصر FlexBox ایجاد کرده ایم که 3 عنصر دیگر درون آن قرار گرفته است.
آموزش طراحی سایت : مثال 1
Bootstrap Example
Flex
To create a flexbox container and transform direct children into flex items, use the d-flex class:
Flex item 1
Flex item 2
Flex item 3
خروجی :
Flex
To create a flexbox container and transform direct children into flex items, use the d-flex class:
برای ایجاد یک عنصر درون خطی inline flexbox، از کلاس d-inline-flex به صورت زیر استفاده کنید :
مثال 2
Bootstrap Example
Inline Flex
To create an inline flexbox container, use the d-inline-flex class:
Flex item 1
Flex item 2
Flex item 3
خروجی :
Inline Flex
To create an inline flexbox container, use the d-inline-flex class:
آموزش طراحی سایت : آموزش چینش افقی Horizontal Direction در FlexBox:
از کلاس flex-row برای نمایش افقی (Horizontal) عناصر به صورت کنار هم استفاده نمایید (این حالت، روش پیش فرض نمایش flexBox است).
نکته :
برای نمایش عناصر از راست به چپ (برعکس حالت پیش فرض)، از کلاس flex-row-reverse استفاده نمایید.
مثال: در کد مثال عملی زیر، گروه اول عناصر را به صورت پیش فرض و از چپ به راست نمایش داده و گروه دوم را به صورت برعکس (از راست به چپ) قرار داده ایم :
مثال 3
Bootstrap Example
Horizontal Direction
Use .flex-row to make the flex items appear side by side (default):
Flex item 1
Flex item 2
Flex item 3
Use .flex-row-reverse to right-align the direction:
Flex item 1
Flex item 2
Flex item 3
خروجی :
Horizontal Direction
Use .flex-row to make the flex items appear side by side (default):
Use .flex-row-reverse to right-align the direction:
آموزش چینش عمودی عناصر Vertical Direction در FlexBox:
از کلاس flex-column برای نمایش عناصر به صورت عمودی (بر روی هم) استفاده کنید. همچنین کلاس flex-column-reverse، عناصر را به صورت عمودی، ولی با ترتیب برعکس از پایین به بالا، نشان می دهد. همانند کد مثال عملی زیر :
مثال 4
Bootstrap Example
Vertical Direction
Use .flex-column to display the flex items vertically (on top of each other):
Flex item 1
Flex item 2
Flex item 3
Use .flex-column-reverse to reverse the vertical direction:
Flex item 1
Flex item 2
Flex item 3
خروجی :
Vertical Direction
Use .flex-column to display the flex items vertically (on top of each other):
Use .flex-column-reverse to reverse the vertical direction:
آموزش طراحی سایت : آموزش ترازبندی خطی (Justify) عناصر در FlexBox:
از کلاس های justify-content-* برای تنظیم ترتیب قرارگیری افقی (Justify) عناصر FlexBox استفاده می شود که در آن * می تواند یکی از مقادیر زیر را داشته باشد :
مقدار start : حالت پیش فرض. در این حالت عناصر از سمت چپ به راست مرتب می شوند.
مقدار end : در این حالت، عناصر در سمت راست عنصر دربرگیرنده تراز می شوند.
مقدار Center: در این حالت عناصر در وسط عنصر دربرگیرنده قرار می گیرند.
مقدار between: در این حالت، عنصر اول و آخر به لبه های عنصر مادر چسبیده و سایر عناصر در بین آن ها با فاصله تراز می شوند.
مقدار around: در این حالت، عناصر به همراه فضای خالی به صورت مساوی درون عنصر مادر قرار می گیرند.
تمامی موارد فوق را در کد مثال عملی زیر نشان داده ایم :
مثال 5
Bootstrap Example
Justify content
Use the .justify-content-* classes to change the alignment of flex items. Choose from start (default), end, center, between or around:
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
خروجی :
Justify content
Use the .justify-content-* classes to change the alignment of flex items. Choose from start (default), end, center, between or around:
آموزش طراحی سایت ادامه دارد.