قسمت بیست و ششم bootstrap : نحوه ی ساخت مودال ( modal ) در بوت استرپ ۴

نویسنده:

مرتضی افضلی

Statistics-rafiki

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

Calendar-amico (2)

تاریخ به‌روزرسانی:

1399-09-16

Work time-rafiki

زمان مطالعه:

5 دقیقه

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

پیشنهاد می شود قبل از خواندن ادامه مقاله ، قسمت های پیشین دوره رایگان بوت استرپ 4 را مطالعه فرمایید.

اعلان راهنما

اعلان راهنما یک باکس کوچک بازشو است .هنگامی که شما موس را بر روی یک عنصر حرکت دهید این اعلان برای شما نمایش داده می شود.

نحوه ی ساخت اعلان راهنما

برای ساخت اعلان راهنما کافی است تا از ویژگی data-toggle=”tooltip” در تگ مورد نظر استفاده کنید و سپس ویژگی title برای متنی که قرار است نمایش داده شود استفاده کنید.

برای درک بهتر این موضوع به قطعه کد زیر دقت کنید :

Hover over me

نکته : به یاد داشته باشید که اعلان راهنما به واسطه جی کوئری باید مقدار دهی اولیه شود ، برای این کار کافی است تا المان خاص tooltip() را در جی کوئری به قطعه کد خود مقدار دهیم.

برای درک بهتر قطعه کد زیر را مورد بررسی قرار دهید :

< script >
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();
});

موقعیت قرارگیری اعلان راهنما

در حالت کلی اعلان راهنما در بالای المان ظاهر می شود. برای تغییر موقعیت قرارگیری کافی است از ویژگی data-placement استفاده کنید.

برای درک بهتر به نمونه های زیر دقت کنید :

Hover
Hover
Hover
Hover

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

پایدار باشید.

Picture of مرتضی افضلی

مرتضی افضلی

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

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

دیدگاهتان را بنویسید

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