آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

فعال کردن رفتار های انعطاف پذیر 

برنامه های کاربردی نمایش را برای ایجاد ظرفیت flexbox اعمال کنید و عناصر مستقیم را به عناصر انعطاف پذیر تبدیل کنید. ظروف و وسایل انعطاف پذیر می توانند با ویژگی های انعطاف پذیری بیشتری بهبود یابند.

I'm a flexbox container!

 <div class="d-flex p-2">I'm a flexbox container!</div>

 

I'm an inline flexbox container!

 <div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

تغییرات ریسپانسیو نیز برای D-flex و D-Inline-flex وجود دارد.

 

  • .d-flex
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex

 

جهت

جهت انعطاف پذیری در یک ظرف انعطاف پذیر را با ابزارهای جهت گیری تنظیم کنید. در اغلب موارد، شما می توانید کلاس افقی را اینجا بگذارید زیرا پیش فرض مرورگر ردیف است. با این حال، شما ممکن است شرایطی را که در آن شما نیاز به صراحت این مقدار را دارید، مطرح کنید.

از خط .flex-row برای تنظیم جهت افقی یا .flex-row-reverse استفاده کنید تا جهت افقی را از طرف مقابل شروع کنید

 

 
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
 
 
 <div class="d-flex flex-row"> <div class="p-2">Flex item 1</div> <div class="p-2">Flex item 2</div> <div class="p-2">Flex item 3</div> </div> <div class="d-flex flex-row-reverse"> <div class="p-2">Flex item 1</div> <div class="p-2">Flex item 2</div> <div class="p-2">Flex item 3</div> </div>

استفاده از ستون flex برای تنظیم جهت عمودی، یا flex-column-reverse. برای شروع جهت عمودی از طرف مقابل.

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

 

 <div class="d-flex flex-column"> <div class="p-2">Flex item 1</div> <div class="p-2">Flex item 2</div> <div class="p-2">Flex item 3</div> </div> <div class="d-flex flex-column-reverse"> <div class="p-2">Flex item 1</div> <div class="p-2">Flex item 2</div> <div class="p-2">Flex item 3</div> </div>

تنوع ریسپانسیو نیز برای جهت انعطاف پذیری وجود دارد.

  • .flex-row
  • .flex-row-reverse
  • .flex-column
  • .flex-column-reverse
  • .flex-sm-row
  • .flex-sm-row-reverse
  • .flex-sm-column
  • .flex-sm-column-reverse
  • .flex-md-row
  • .flex-md-row-reverse
  • .flex-md-column
  • .flex-md-column-reverse
  • .flex-lg-row
  • .flex-lg-row-reverse
  • .flex-lg-column
  • .flex-lg-column-reverse
  • .flex-xl-row
  • .flex-xl-row-reverse
  • .flex-xl-column
  • .flex-xl-column-reverse

 

محاسبه محتوا 

از توابع توجیه محتوا در ظروف flexbox استفاده کنید تا هماهنگی موارد انعطاف پذیر را در محور اصلی تغییر دهید. از میان شروع (به طور پیش فرض مرورگر)، پایان، مرکز، بین، و یا اطراف را انتخاب کنید.

 

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

 

 <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 
تنوع ریسپانسیو نیز برای توجیه محتوا وجود دارد.
  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around

 تراز کردن موارد

از امکانات چیدمان موارد در ظروف flexbox را برای تغییر تراز کردن موارد انعطاف پذیر در محور متقابل استفاده کنید. از آغاز، پایان، مرکز، خط مشی اولیه یا کشش (به طور پیش فرض مرورگر) را انتخاب کنید.

 

Flex item
Flex item Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

 

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

تنوع ریسپانسیو نیز برای هم ترازی موارد وجود دارد.

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-sm-start
  • .align-items-sm-end
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .align-items-lg-end
  • .align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch

 

خودتان را تنظیم کنید 

از ویژگی های align-self بر روی آیتم های flexbox استفاده کنید تا به صورت جداگانه تغییر آنها را در محور متقاطع تغییر دهید. از گزینه های مشابه به عنوان align-items ها را انتخاب کنید: شروع، پایان، مرکز، خط مشی اولیه یا کشش (پیش فرض مرورگر).

Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item

 

Flex item
Aligned flex item
Flex item

 

 <div class="align-self-start">Aligned flex item</div> <div class="align-self-end">Aligned flex item</div> <div class="align-self-center">Aligned flex item</div> <div class="align-self-baseline">Aligned flex item</div> <div class="align-self-stretch">Aligned flex item</div>

تنوع ریسپانسیو نیز برای هماهنگی خود وجود دارد.

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch

 

حاشیه خودرو 

Flexbox می تواند برخی از چیزهای بسیار عالی را هنگامی که تراز شما وسط قرار دارد با حاشیه های خودکار را انجام دهد. در زیر نشان داده شده است سه نمونه از کنترل موارد انعطاف پذیر از طریق حاشیه های خودکار: پیش فرض (بدون حاشیه خودرو)، فشار دادن دو مورد به سمت راست (.mr-auto) و فشار دادن دو مورد به سمت چپ (.ml-auto).

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

 

Flex item
Flex item
Flex item
 <div class="d-flex"> <div class="p-2">Flex item</div> <div class="p-2">Flex item</div> <div class="p-2">Flex item</div> </div> <div class="d-flex"> <div class="mr-auto p-2">Flex item</div> <div class="p-2">Flex item</div> <div class="p-2">Flex item</div> </div> <div class="d-flex"> <div class="p-2">Flex item</div> <div class="p-2">Flex item</div> <div class="ml-auto p-2">Flex item</div> </div>

 

با جا به جایی موارد 

یک محصول انعطاف پذیر را به بالا یا پایین یک ظرف با مخلوط کردن آیتم های align-align، flex-direction: column و margin-top: auto یا margin-bottom: auto حرکت دهید.

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
 <div class="d-flex align-items-start flex-column" style="height: 200px;"> <div class="mb-auto p-2">Flex item</div> <div class="p-2">Flex item</div> <div class="p-2">Flex item</div> </div> <div class="d-flex align-items-end flex-column" style="height: 200px;"> <div class="p-2">Flex item</div> <div class="p-2">Flex item</div> <div class="mt-auto p-2">Flex item</div> </div>

 

بسته بندی کردن 

تغییر چگونگی قرار دادن انعطاف پذیری در یک ظرف انعطاف پذیر را تغییر دهید. از هیچ بسته بندی (به طور پیش فرض مرورگر) با flex-nowrap.، بسته شدن با flex-wrap.، یا بسته شدن معکوس با flex-wrap-reverse.، از هیچ بسته بندی استفاده نکنید.

Flex item
Flex item
Flex item
Flex item
Flex item

 

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

 

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

 

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

 

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

تغییرات پاسخگو نیز برای بسته بندی انعطاف پذیر وجود دارد.

 

  • .flex-nowrap
  • .flex-wrap
  • .flex-wrap-reverse
  • .flex-sm-nowrap
  • .flex-sm-wrap
  • .flex-sm-wrap-reverse
  • .flex-md-nowrap
  • .flex-md-wrap
  • .flex-md-wrap-reverse
  • .flex-lg-nowrap
  • .flex-lg-wrap
  • .flex-lg-wrap-reverse
  • .flex-xl-nowrap
  • .flex-xl-wrap
  • .flex-xl-wrap-reverse

 

سفارش 

نظم تصویری از اقلام انعطاف پذیر خاص را با چندین مورد از خدمات نظارتی تغییر دهید. ما تنها گزینه هایی برای ایجاد یک آیتم برای اولین بار یا آخرین ارائه، و همچنین تنظیم مجدد برای استفاده از سفارش DOM. به عنوان سفارش هر مقدار عدد صحیح (به عنوان مثال، 5)، هر CSS سفارشی را برای هر مقدار اضافی مورد نیاز اضافه می کند.

 <div class="d-flex flex-nowrap"> <div class="order-3 p-2">First flex item</div> <div class="order-2 p-2">Second flex item</div> <div class="order-1 p-2">Third flex item</div> </div>

تنوع ریسپانسیو برای سفارش سازی هم وجود دارد.

  • .order-0
  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-6
  • .order-7
  • .order-8
  • .order-9
  • .order-10
  • .order-11
  • .order-12
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-sm-6
  • .order-sm-7
  • .order-sm-8
  • .order-sm-9
  • .order-sm-10
  • .order-sm-11
  • .order-sm-12
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-md-6
  • .order-md-7
  • .order-md-8
  • .order-md-9
  • .order-md-10
  • .order-md-11
  • .order-md-12
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-lg-6
  • .order-lg-7
  • .order-lg-8
  • .order-lg-9
  • .order-lg-10
  • .order-lg-11
  • .order-lg-12
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xl-6
  • .order-xl-7
  • .order-xl-8
  • .order-xl-9
  • .order-xl-10
  • .order-xl-11
  • .order-xl-12

 

محتوا را تنظیم کنید

استفاده از محتویات محتوا در ظروف flexbox را برای انتخاب محصولات فلکس با هم در محور متقابل. از میان شروع (پیش فرض مرورگر)، پایان، مرکز، بین، در اطراف، و یا کشش را انتخاب کنید. برای نشان دادن این خدمات، ما پیاده سازی انعطاف پذیری را انجام داده ایم: تعداد موارد انعطاف پذیر را بسته بندی کرده و افزایش داده ایم.

 <div class="d-flex align-content-start flex-wrap"> ... </div>

 

 
 <div class="d-flex align-content-end flex-wrap">...</div>

 

 
 <div class="d-flex align-content-center flex-wrap">...</div>

 

 
 <div class="d-flex align-content-between flex-wrap">...</div>

 

 
 <div class="d-flex align-content-around flex-wrap">...</div>

 

 
 <div class="d-flex align-content-stretch flex-wrap">...</div> 

تنوع ریسپانسیو برای هم ترازی محتوا نیز وجود دارد.

 

  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-around
  • .align-content-xl-stretch