جلسه ۲۶ : ویژگی Modal در Bootstrap 4

• جزئیات
• نوع محتواآموزش تصویری

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 4 ، را دنبال می کنند. در اغلب وب سایت ها، وقتی به عنوان مثال روی یک Button کیلک می کنید. پیغامی در بخش بالایی وب سایت نمایش داده می شود. که در  Bootstrap 4 ویژگی Modal اینکار را به راحتی انجام می دهد. همچنین می توانید Style و فونت متن پیغام را نیز تغییر دهید. برای آشنایی بیشتر و کار با ویژگی Modal در Bootstrap 4 یا قابلیت ماژول در بوت استرپ ۴ ، با ما در ادامه ی این آموزش، همراه باشید.

ویژگی Modal در Bootstrap 4

ویژگی Modal در Bootstrap 4 یک پیغام dialog box/popup را در قسمت بالای وب سایت، نمایش می دهد.

ویژگی Modal در Bootstrap 4

چگونگی ایجاد Modal در Bootstrap 4

مثال زیر چگونگی ایجاد یک modal پایه را در Bootstrap 4 نشان می دهد:

افزودن animation

با استفاده از کلاس .fade می توانید یک افکت محو شدن را به اسلایدها اضافه کنید:

تغییر دادن اندازه ی ویژگی modal

با افزودن کلاس .modal-sm از modal های کوچک استفاده کنید. و از کلاس .modal-lg نیز برای modal های بزرگ استفاده کنید. این کلاسها را به همراه کلاس .modal-dialog به عنصر <div> اضافه کنید:

مثال-اندازه کوچک:

مثال۲-اندازه بزرگ:

در حالت پیش فرض اندازه ی modal ها medium یا متوسط است.

قرار دادن modal  در مرکز

با استفاده از کلاس .modal-dialog-centered مرکز modal ر ابصورت عمودی یا افقی در مرکز صفحه وب تنظیم کنید:

کلام آخر

پس از مرور مباحث این بخش شما می توانید، پیغام های dialog box/popup را با Style های دلخواه خود در قالب وب سایت، پیاده سازی کنید. و ارتباط قالب وب سایت خود را با کاربران قوی تر کنید. امیدواریم که از آموزش کار با ویژگی Modal در Bootstrap 4 بخوبی استفاده کرده باشید.