آموزش کار با کامپوننت های List-group و Modal در بوت استرپ 4


آموزش کار با کامپوننت های List-group و Modal در بوت استرپ 4
برای خرید این درس نیاز است وارد سایت شوید. در صورت نداشتن حساب کاربری عضو شوید.

یادگیری کامپوننت های List-group و Modal در بوت استرپ 4:


در این بخش ازآموزش، با کامپوننت‌های List-group و Modal آشنا می شوید. از list-gropها زمانی استفاده می کنیم، که لیستی از محتوا در اختیار داشته باشیم. Modalها یکی از دوست داشتنی‌ترین کامپوننت‌هایی هستند که بوت استرپ 4 اضافه کرد، در واقع پنجره‌هایی هستند، که به صورت پاپ آپ (pop up) باز می شوند.

 

کلاس‌های List-group:

  • List-group: برای ایجاد یک گروه لیست این کلاس را به تگ ul اضافه می کنیم.
  • List-group-item: برای ایجاد آیتم‌های لیست گروه، این کلاس را به تگ li اضافه می کنیم.
  • List-group-item-action: برای ایجاد لیست گروه هایی که قابل کلیک باشند، از تگ div به جای تگ ul و به جای li از تگ a    استفاده می کنیم. و برای اینکه هنگام hover رنگ پس زمینه خاکستری شود، از کلاس list-group-item-action استفاده می شود.
  • List-group-item-*(color): برای رنگی کردن آیتم‌های لیست استفاده می شود.
  • List-group-flush: برای حذف برخی حاشیه‌ها و گوشه‌های گرد اطراف لیست استفاده می شود.
  • active ,disabled: برای فعال و غیر فعال کردن آیتم‌ها در یک لیست گروه استفاده می شود.


کلاس‌های Modal:

  • modal-dialog: برای تنظیم عرض و حاشیه مناسب modal استفاده می شود.
  • modal-content: برای استایل دهی به modal استفاده می شود. مانند: رنگ پس زمینه، border و... استفاده میشود. header, body, title و footer برای modal در این قسمت اضافه می شود.
  • modal-header: برای ایجاد هدر modal استفاده می شود.
  • modal-title: برای ایجاد عنوان modal استفاده می شود.
  • modal-body: برای ایجاد بخش بدنه modal استفاده می شود.
  • modal-footer: برای ایجاد قسمت پایین modal یا پاورقی استفاده می شود.
  • modal-dialog-centered: برای قرار دادن modal در وسط صفحه به صورت عمودی استفاده می شود.
  • fade: برای ایجاد یک افکت هنگام باز و بسته شدن modal استفاده می شود. (به صورت باز و بسته شدن آهسته)
  • modal-lg, modal-sm: برای نمایش modal در سایزهای کوچک و بزرگ استفاده می شود.

 

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

 

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

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


نظر بدهید

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


مشخصات دوره


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

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

درباره مدرس :

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