آموزش فوق کاربردی 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 جلسه
مدت زمان 601 دقیقه
حجم دوره 2/76 گیگابایت
سطح مهارت مقدماتی تا پیشرفته
وضعیت دوره پایان یافته
: میانگین امتیاز

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

درباره مدرس :

مدیر‌ عامل‌ شرکت آریا‌ نرم‌‌ افزار دارنده مدرک کارشناسی‌ ارشد مهندسی کامپیوتر 12‌ سال سابقه تدریس دروس کامپیوتر را در دانشگاههای دولتی، آزاد، پیام‌نور ملایر، شهیدشمسی‌پور تهران و تدریس برنامه‌نویسی در ... ر انیستیتو ایزایران، مجتمع فنی و موسسه راه‌آینده تهران دارا میباشد و تا به حال راهنمایی انجمنهای علمی دانشگاه و صدها پروژه دانشجویی را برعهده داشته است. تخصص اصلی: با داشتن گواهی‌نامه‌های معتبر تدریس از انیستیتو‌ ایزایران، راه آینده‌تهران و سازمان‌فنی‌حرفه‌ای، تدریس و آموزش‌ دروس کامپیوتر، ‌برنامه‌نویسی کامپیوتر و کلاسهای کنکور کارشناسی و کارشناسی‌ارشد میباشد.همچنین تجربه داوری و نظارت مسابقات برنامه‌نویسی کشوری‌ACM را در سالهای متعدد داشته و تیم مورد رهبری ایشان در 3سال متوالی مقام اول مسابقات کشوری را از آن خود کرده است.ایشان مقالاتی در زمینه شبکه‌های کامپیوتری، تکنیک‌های وزارت دفاع و ... به ثبت رسانده و مشاور و کارشناس در طراحی و برنامه نویسی بیش از 50‌برنامه کاربردی تحت وب و ویندوز و موبایل میباشد. افتخارات دیگر:کسب مقام دوم ایده‌های برتر در مسابقات استارت‌آپ و بکند کشوری را نام برد.بیشتر بدانید