قسمت بیست و نهم bootstrap : نحوه ی ساخت Toast در بوت استرپ 4

خانه » مقالات اموزشی » css » بوت استرپ » قسمت بیست و نهم bootstrap : نحوه ی ساخت Toast در بوت استرپ 4
قسمت بیست و نهم bootstrap : نحوه ی ساخت Toast در بوت استرپ 4

نویسنده:

مرتضی افضلی

Statistics-rafiki

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

Calendar-amico (2)

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

۱۳۹۹-۱۱-۰۷

Work time-rafiki

زمان مطالعه:

5 دقیقه

برای بسیاری از ما پیش آمده در یک سایتی یک باکس شبیه به آلرت باکس داشته باشیم با این تفاوت که محاسبه زمانی که از باز شدن آن می گذرد در گوشه ای از باکس وجود داشته باشد.

Toast دقیقا شبیه به آلرت باکس یا جعبه هشدار دهنده است با تفاوت ذکر شده در پاراگراف بالا.

آموزش ساخت Toast

برای ساخت یک Toast کافی است از کلاس .toast استفاده کنیم . برای تقسیم بندی قسمت های مختلف مانند کد های HTML از کلاس های .toast-header و .toast-body باید استفاده شود.

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

نکته : به یاد داشته باشید که Toast باید با کد جی کوئری همراه باشد . برای فراخوانی کافی است تابع toast() را داخل جی کوئری استفاده کنیم .

قطعه کد زیر نمونه ای از فراخوانی کد جی کوئری را به ما نشان می دهد:

نمایش و عدم نمایش Toast

در صورت کلی Toast ها در حالت مخفی هستند. برای اینکه در حالت پیش فرض Toast فعال باشد کافی است از ویژگی data-autohide=”false” استفاده شود. برای بستن هم کافی است از تگ button به همراه ویژگی data-dismiss=”toast” استفاده شود.

برای درک بهتر قطعه کد زیر را اجرا کنید :

پیشنهاد می شود برای درک بهتر مطالب حتما کد ها را اجرایی کنید ، برای فراگیری آموزش های بیشتر هم می توانید به سایت getbootstrap مراجعه کنید.

همچنین می توانید از قسمت های پیشین دوره رایگان بوت استرپ 4 هم استفاده کنید.

مرتضی افضلی

مرتضی افضلی

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

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

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