آموزش کار با کامپوننت های 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 در سایزهای کوچک و بزرگ استفاده می شود.
برای یادگیری این مبحث مثالها و نکتههای متعددی را در فایل ویدئویی آوردهایم که با تهیه این درس و مشاهده ویدئوها به طور کامل به این مبحث مسلط خواهید شد.
امیدواریم که این آموزش، برای شما دوستان درسمنی عزیز مفید باشد،درصورت سوال و یا مشکل میتوانید به انجمن پرسش و پاسخ درسمن مراجعه کنید. پیشنهادات و انتقادات خود را در بخش نظرات برای ما ارسال کنید.
انجمن برنامه نویسان وب
جلسات دوره
مهدی عباسی
مهدی عباسی هستم، مسلط به حداقل ۲۰ زبان مطرح برنامه نویسی به صورت پیشرفته، مدیر عامل شرکت آریا نرم افزار و بنیانگذار آکادمی درسمن، مسلط به تدریس دروس تخصصی کاردانی و کارشناسی کامپیوتر، پایگاه داده ها، برنامه نویسی پیشرفته، مبانی برنامه نویسی، مباحث ویژه طراحی وب و .... مطالعه بیشتر رزومه
نظر شما در تصمیم دیگران اثرگذار است.
لطفا برای همراهان درسمن و بهتر شدن دوره نظر خود را بنویسید.