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

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

مهدی عباسی


درباره مدرس :

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

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

رایگان

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

رایگان

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

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

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


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