Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
قسمت بیست و هشتم bootstrap : نحوه ی ساخت Popover در بوت استرپ ۴

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

Calendar-amico (2)

تاریخ انتشار:

1399-10-07

Work time-rafiki

زمان تقریبی مطالعه:

5 دقیقه

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

پیشنهاد می شود در صورت نیاز به سایر قسمت های دوره رایگان بوت استرپ مراجعه فرمایید.

نحوه ساخت پاپ آپ

برای ساخت پاپ آپ کافی است تا المان data-toggle=”popover” را به عنصر خود اضافه کنید.

از المان title استفاده کنید تا عنصر مشخصی را برای پاپ اپ خود بسازید . از ویژگی data-content برای تعیین متنی که باید در بدنه پاپ آپ نمایش داده شود به شکل زیر استفاده کنید:

نکته : برای ساخت پاپ آپ باید از جی کوئری استفاده کرد . کافی است از متد popover() برای مشخص کردن المان ها استفاده کنید.

قطعه کد زیر نمایان گر پاپ آپ ها است :

موقعیت قرار گیری پاپ آپ

در حالت پیش فرض ، پاپ آپ ها در سمت راست قرار میگیرند.

برای تغییر قرار گیری کافی است data-placement استفاده کنید . برای درک بهتره به نمونه های زیر توجه کنید :

بستن پاپ آپ ها

درحالت پیش فرض پاپ آپ ها تنها زمانی بسته می شوند که روی دکمه کلیک کنید. شما می توانید از data-trigger=”focus” استفاده کنید تا با کلیک کردن هرجایی از صفحه پاپ آپ شما بسته شود.

نکته : اگر قصد دارید پاپ آپ ها با حرکت موس نمایان شود از المان data-trigger استفاده کنید :

پیشنهاد میشود در صورت تمایل به مطالعه بیشتر به سایت getbootstrap مراجعه فرمایید.

مرتضی افضلی

مرتضی افضلی

این روزها دیگر نیاز نیست کلی هزینه‌ی اجاره‌ی مغازه بدهید. با دنیای کسب‌وکار اینترنتی و دیجیتال مارکتینگ می‌توانیم کسب درامد داشته باشیم و من در مجموعه‌ی کدپز در این راه همراه شما هستم.

تا کنون 56 نفر در کدپز ثبت نام کرده اند.

0 پاسخ به "قسمت بیست و هشتم bootstrap : نحوه ی ساخت Popover در بوت استرپ ۴"

ارسال یک پیام

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *