خواندن ۵ دقیقه·۴ سال پیش

آموزش طراحی سایت-روش Flex در Bootstrap 4

سلام با آموزش 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

<!DOCTYPE html>
<html lang=&quoten&quot>
<head>
  <title>Bootstrap Example</title>
  <meta charset=&quotutf-8&quot>
  <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1&quot>
  <link rel=&quotstylesheet&quot href=&quothttps://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot>
  <script src=&quothttps://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js&quot>
  <script src=&quothttps://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js&quot>
  <script src=&quothttps://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js&quot>
</head>
<body> 
<div class=&quotcontainer mt-3&quot>
  <h2>Flex</h2>
  <p>To create a flexbox container and transform direct children into flex items, use the d-flex class:</p>
  <div class=&quotd-flex p-3 bg-secondary text-white&quot>  
  <div class=&quotp-2 bg-info&quot>Flex item 1</div>
    <div class=&quotp-2 bg-warning&quot>Flex item 2</div>
    <div class=&quotp-2 bg-primary&quot>Flex item 3</div>
  </div>
</div>
</body>
</html>

خروجی :

Flex

To create a flexbox container and transform direct children into flex items, use the d-flex class:

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

مثال 2

<!DOCTYPE html>
<html lang=&quoten&quot>
<head>
  <title>Bootstrap Example</title>
  <meta charset=&quotutf-8&quot>
  <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1&quot>
  <link rel=&quotstylesheet&quot href=&quothttps://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot>
  <script src=&quothttps://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js&quot>
  <script src=&quothttps://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js&quot>
  <script src=&quothttps://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js&quot>
</head>
<body> 
<div class=&quotcontainer mt-3&quot>
  <h2>Inline Flex</h2>
  <p>To create an inline flexbox container, use the d-inline-flex class:</p>
  <div class=&quotd-inline-flex p-3 bg-secondary text-white&quot>  
    <div class=&quotp-2 bg-info&quot>Flex item 1</div>
    <div class=&quotp-2 bg-warning&quot>Flex item 2</div>
    <div class=&quotp-2 bg-primary&quot>Flex item 3</div>
  </div>
</div>
</body>
</html>

خروجی :

Inline Flex

To create an inline flexbox container, use the d-inline-flex class:

https://www.aparat.com/v/4gGj2

آموزش طراحی سایت : آموزش چینش افقی Horizontal Direction در FlexBox:

از کلاس flex-row برای نمایش افقی (Horizontal) عناصر به صورت کنار هم استفاده نمایید (این حالت، روش پیش فرض نمایش flexBox است).

نکته :

برای نمایش عناصر از راست به چپ (برعکس حالت پیش فرض)، از کلاس flex-row-reverse استفاده نمایید.

مثال: در کد مثال عملی زیر، گروه اول عناصر را به صورت پیش فرض و از چپ به راست نمایش داده و گروه دوم را به صورت برعکس (از راست به چپ) قرار داده ایم :

مثال 3

<!DOCTYPE html>
<html lang=&quoten&quot>
<head>
  <title>Bootstrap Example</title>
  <meta charset=&quotutf-8&quot>
  <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1&quot>
  <link rel=&quotstylesheet&quot href=&quothttps://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot>
  <script src=&quothttps://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js&quot>
  <script src=&quothttps://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js&quot>
  <script src=&quothttps://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js&quot>
</head>
<body> 
<div class=&quotcontainer mt-3&quot>
  <h2>Horizontal Direction</h2>
  <p>Use .flex-row to make the flex items appear side by side (default):</p>
  <div class=&quotd-flex flex-row bg-secondary mb-3&quot>
    <div class=&quotp-2 bg-info&quot>Flex item 1</div>
    <div class=&quotp-2 bg-warning&quot>Flex item 2</div>
  <div class=&quotp-2 bg-primary&quot>Flex item 3</div>
  </div>
  <p>Use .flex-row-reverse to right-align the direction:</p>
  <div class=&quotd-flex flex-row-reverse bg-secondary&quot>
    <div class=&quotp-2 bg-info&quot>Flex item 1</div>
    <div class=&quotp-2 bg-warning&quot>Flex item 2</div>
    <div class=&quotp-2 bg-primary&quot>Flex item 3</div>
  </div>
</div>
</body>
</html>

خروجی :

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

<!DOCTYPE html>
<html lang=&quoten&quot>
<head>
  <title>Bootstrap Example</title>
  <meta charset=&quotutf-8&quot>
  <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1&quot>
  <link rel=&quotstylesheet&quot href=&quothttps://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot>
  <script src=&quothttps://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js&quot>
  <script src=&quothttps://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js&quot>
  <script src=&quothttps://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js&quot>
</head>
<body> 
<div class=&quotcontainer mt-3&quot>
  <h2>Vertical Direction</h2>
  <p>Use .flex-column to display the flex items vertically (on top of each other):</p>
  <div class=&quotd-flex flex-column mb-3&quot>
    <div class=&quotp-2 bg-info&quot>Flex item 1</div>
    <div class=&quotp-2 bg-warning&quot>Flex item 2</div>
    <div class=&quotp-2 bg-primary&quot>Flex item 3</div>
  </div>
  <p>Use .flex-column-reverse to reverse the vertical direction:</p>
  <div class=&quotd-flex flex-column-reverse&quot>
    <div class=&quotp-2 bg-info&quot>Flex item 1</div>
    <div class=&quotp-2 bg-warning&quot>Flex item 2</div>
    <div class=&quotp-2 bg-primary&quot>Flex item 3</div>
  </div>
</div>
</body>
</html>

خروجی :

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

<!DOCTYPE html>
<html lang=&quoten&quot>
<head>
  <title>Bootstrap Example</title>
  <meta charset=&quotutf-8&quot>
  <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1&quot>
  <link rel=&quotstylesheet&quot href=&quothttps://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot>
  <script src=&quothttps://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js&quot>
  <script src=&quothttps://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js&quot>
  <script src=&quothttps://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js&quot>
</head>
<body> 
<div class=&quotcontainer mt-3&quot>
  <h2>Justify content</h2>
  <p>Use the .justify-content-* classes to change the alignment of flex items. Choose from start (default), end, center, between or around:</p>
  <div class=&quotd-flex justify-content-start bg-secondary mb-3&quot>
    <div class=&quotp-2 bg-info&quot>Flex item 1</div>
    <div class=&quotp-2 bg-warning&quot>Flex item 2</div>
    <div class=&quotp-2 bg-primary&quot>Flex item 3</div>
  </div>
  <div class=&quotd-flex justify-content-end bg-secondary mb-3&quot>
    <div class=&quotp-2 bg-info&quot>Flex item 1</div>
    <div class=&quotp-2 bg-warning&quot>Flex item 2</div>
    <div class=&quotp-2 bg-primary&quot>Flex item 3</div>
  </div>
  <div class=&quotd-flex justify-content-center bg-secondary mb-3&quot>
    <div class=&quotp-2 bg-info&quot>Flex item 1</div>
    <div class=&quotp-2 bg-warning&quot>Flex item 2</div>
    <div class=&quotp-2 bg-primary&quot>Flex item 3</div>
  </div>
  <div class=&quotd-flex justify-content-between bg-secondary mb-3&quot>
    <div class=&quotp-2 bg-info&quot>Flex item 1</div>
    <div class=&quotp-2 bg-warning&quot>Flex item 2</div>
    <div class=&quotp-2 bg-primary&quot>Flex item 3</div>
  </div>
  <div class=&quotd-flex justify-content-around bg-secondary mb-3&quot>
    <div class=&quotp-2 bg-info&quot>Flex item 1</div>
    <div class=&quotp-2 bg-warning&quot>Flex item 2</div>
    <div class=&quotp-2 bg-primary&quot>Flex item 3</div>
  </div>
</div>
</body>
</html>

خروجی :

Justify content

Use the .justify-content-* classes to change the alignment of flex items. Choose from start (default), end, center, between or around:

آموزش طراحی سایت ادامه دارد.

آموزش طراحی سایت دوره آموزش طراحی سایت طراحی سایت آموزش بوت استرپ آموزش طراحی وب

برلیانس

شاید از این پست‌ها خوشتان بیاید