پاپ اورها
مثال هایی برای افزودن پاپ اورهای بوت استرپ، مانند مواردی که در iOS پیدا می شوند، به هر عنصری در سایت شما.
مثال های پایه
برای مشاهده مثال پایه پاپ اور روی دکمه زیر کلیک کنید.
مثال استفاده
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="و در اینجا برخی از محتوای شگفت انگیز است. بسیار جذاب است. درسته؟"> <span>برای جابجایی پاپ اور کلیک کنید</span> </button>
چهار جهت
از مقدار data-bs-placement
برای جهت های: top، right، bottom
، وleft
استفاده کنید.
مثال استفاده
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ."> <span>پاپ اور در بالا</span> </button>
پاپ اور قابل صرف نظر
از راه انداز focus
برای صرف نظر کردن از پاپ اورها در کلیک بعدی کاربر روی عنصری متفاوت از عنصر تغییر وضعیت استفاده کنید.
مثال استفاده
<button tabindex="0" class="btn btn-danger btn-dim" data-bs-toggle="popover" data-trigger="focus" title="پاپ اور قابل صرف نظر" data-bs-content="و در اینجا برخی از محتوای شگفت انگیز است. بسیار جذاب است. درسته؟"> <span>پاپ اور قابل صرف نظر</span> </button>
پاپ اور قابل صرف نظر
از راه انداز focus
برای صرف نظر کردن از پاپ اورها در کلیک بعدی کاربر روی عنصری متفاوت از عنصر تغییر وضعیت استفاده کنید.
مثال استفاده
<span class="d-inline-block" data-bs-toggle="popover" data-bs-content="پاپ اور غیرفعال"> <button class="btn btn-gray" style="pointer-events: none;" type="button" disabled><span>دکمه غیرفعال</span></button> </span>