آموزش فوق کاربردی Flex در بوت استرپ 4


آموزش فوق کاربردی Flex در بوت استرپ 4
براي خريد اين درس نياز است وارد سايت شويد. در صورت نداشتن حساب کاربري عضو شويد.

یادگیری Flex در بوت استرپ 4:


در این بخش از آموزش، با مبحث بسیار مهم و کاربردی flex و کلاس‌های آن در بوت استرپ 4 آشنا خواهید شد.

Flex:

  • d-flex: با استفاده از این کلاس display یک شی را flex قرار می‌دهیم.
  • d-inline-flex: با استفاده از این کلاس شی می‌تواند علاوه بر خاصیت flex، خاصیت inline هم داشته باشد.
  • flex-row: با استفاده از این کلاس اشیا در یک سطر قرار می‌گیرند.
  • flex-row-reverse: مانند flex-row می‌باشد، با این تفاوت که اگر صفحه شما راست چین باشد در سمت چپ قرار می‌گیرند و اگر چپ چین باشد در سمت راست قرار می‌گیرند.
  • flex-column: با استفاده از این کلاس اشیا به صورت عمودی قرار می‌گیرند.
  • flex-column-reverse: این کلاس باعث می‌شود، اشیا از پایین به بالا قرار بگیرند.
  • flex-wrap: اندازه آیتم‌های داخل باکس flex را حفظ می کند و اگر فضا کافی نباشد و جا نشوند می شکند و بقیه آیتم‌ها را در سطر بعد نمایش می‌دهد.
  • flex-nowrap: برعکس flex-wrap می‌باشد.
  • justify-content-*: از این کلاس برای تراز افقی اشیا استفاده می‌شود. دارای مقادیر :
  • justify-content-start: این حالت پیش فرض می‌باشد و اشیا از چپ به راست قرار می‌گیرند.
  • justify-content-end:  اشیا از راست به چپ قرار می‌گیرند.
  • justify-content-center: اشیا در وسط قرار می‌گیرند.
  • justify-content-between: فضای اضافی بین اشیا تقسیم می‌شود. اشیا اول و آخر به سمت راست و چپ صفحه می‌چسبند.
  • justify-content-around: فضای خالی را اطراف اشیا اضافه می‌کند.
  • align-items-*: برای تراز عمودی استفاده می‌شود. دارای مقادیر زیر می‌باشد:
  • align-items-streach: حالت پیش فرض می‌باشد. کل فضا را اشغال می‌کند.
  • align-items-start: عناصر در بالا صفحه قرار می‌گیرند.
  • align-items-end: عناصر در پایین صفحه قرار می‌گیرند.
  • align-items-center: عناصر در وسط صفحه قرار می‌گیرند.
  • align-self-*: برای تراز بندی آیتم‌های داخل باکس flex استفاده می‌شود. مقادیر آن مانند مقادیر align-item می‌باشد.
  • align-content-*: مانند align-item می‌باشد، با این تفاوت که فقط برای خاصیت flex-wrap استفاده می‌شود. در واقع زمانی که می‌خواهیم مجوعه‌ایی از چند سطر را باهم موقعیتشان را مشخص کنیم از این کلاس استفاده می‌کنیم.
  • order-*: با استفاده از این کلاس ترتیب قرار گرفتن آیتم‌های داخل باکس flex را مشخص می‌کنیم. به طور پیش فرض مقدار این کلاس برای همه آیتم‌ها 0 است. با اعدادی بین 0 تا 12 مقداردهی می‌شود.

 

برای یادگیری این مبحث مثال‌ها و نکته‌های متعددی را در فایل ویدئویی آورده‌ایم که با تهیه این درس و مشاهده ویدئوها به طور کامل به این مبحث مسلط خواهید شد.


امیدواریم که این آموزش، برای شما دوستان درسمنی عزیز مفید باشد، درصورت سوال و یا مشکل می‌توانید به انجمن پرسش و پاسخ درسمن مراجعه کنید. پیشنهادات و انتقادات خود را در بخش نظرات برای ما ارسال کنید.smiley

انجمن برنامه نویسان وب

 


نظر بدهید نشانی ایمیل شما منتشر نخواهد شد .
برای ارسال نظر نیاز است وارد سایت شوید. در صورت نداشتن حساب کاربری عضو شوید.


مشخصات دوره


مدرس دوره : مهدی عباسی
تعداد جلسات 24 جلسه
مدت زمان 661 دقیقه
حجم دوره 2/76 گیگابایت
سطح مهارت مقدماتی تا پیشرفته
وضعیت دوره پایان یافته
تعداد دانشجویان 615
: میانگین امتیاز

175,000تومان
برای دسترسی به این دوره وارد یا عضو شوید.
مهدی عباسی

مهدی عباسی


درباره مدرس :

مهدی عباسی هستم، مسلط به حداقل ۲۰ زبان مطرح برنامه نویسی به صورت پیشرفته، مدیر عامل شرکت آریا نرم افزار و بنیانگذار آکادمی آنلاین درسمن، مسلط به تدریس دروس تخصصی کاردانی و کارشناسی کامپیوتر، پایگاه داده ... ده ها، برنامه نویسی پیشرفته، مبانی برنامه نویسی، مباحث ویژه طراحی وب و ....
بیشتر بدانید

آموزش جاوا پیشرفته
4.40
541
1332
900,000 25% تخفیف 1,200,000
جزئیات دوره
آموزش سی شارپ مقدماتی تا متوسط
4.38
1736
1119

رایگان

جزئیات دوره
آموزش جاوا مقدماتی تا متوسط، کاملا رایگان
4.40
2566
742

رایگان

جزئیات دوره
آموزش سی شارپ پیشرفته، ویژه ورود به بازار کار

آموزش سی شارپ پیشرفته

مدرس : مهدی عباسی


4.75
743
1091
475,000
جزئیات دوره
آموزش سی پلاس پلاس پیشرفته
4.71
475
621
135,000
جزئیات دوره