آموزش کار با کامپوننت های 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

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


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


مشخصات دوره


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

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