ایجاد پنجره alert در Bootstrap

تاریخ انتشار: 26 دی 1394

تعداد بازدید: 32 نفر

در این بخش نحوه ایجاد پیام های هشدار (alert) را در بوت استرپ خواهید آموخت.

پنجره های هشدار ( alert ) معمولاً برای نشان دادن اطلاعات مهم که نیاز به توجه فوری کاربر دارند مانند هشدار، خطا یا پیام های تأیید، به کار میروند.
با استفاده از بوت استرپ به راحتی میتوان پنجره های زیبا برای پیام های alert ایجاد کرد. همچنین میتوانید دکمه بستن ( close ) هم به آن اضافه نمایید.

پیام های هشدار :

با اضافه کردن کلاس alert-warning. به کلاس پایه alert. ، میتوانید یک پیام هشدار ساده ایجاد نمایید.

خروجی مثال بالا به شکل زیر خواهد بود :

نکته : چنانچه میخواهید هنگام بسته شدن پنجره افکت fade هم به آن اعمال شود، کلاس های fade. و in. را در کنار کلاس alert-warning. به آن ها اعمال کنید.

پیام های خطر یا خطا :

کلاس alert-danger. را به کلاس پایه alert. اضافه کنید تا پیام های خطر یا خطا ایجاد نمایید.

خروجی مثال بالا به شکل زیر خواهد بود :

پیام های موفقیت یا تأیید :

برای ایجاد پیام های موفقیت و تأیید کافیست کلاس alert-success. را به کلاس پایه alert. اضافه کنید.

خروجی مثال بالا به شکل زیر خواهد بود :

پیام های اطلاعاتی :

برای ایجاد این پیام ها کلاس alert-info. را به کلاس پایه alert. اضافه کنید.

خروجی مثال بالا به شکل زیر خواهد بود :

بستن alert با استفاده از ویژگی -data :

با استفاده از ویژگی -data میتوانیم به راحتی قابلیت بستن را به پنجره های alert اضافه نماییم. برای این کار، "data-dismiss="alert را به دکمه close اضافه کنید. به طور اتوماتیک عملکرد بستن روی پنجره alert فعال خواهد شد.

بستن alert با استفاده از جاوا اسکریپت :

همچنین میتوانید این کار را با استفاده از جاوا اسکریپت انجام دهید.

توابع :

توابع زیر، توابع استاندارد بوت استرپ برای پیام های هشدار ( alert ) میباشند.

( )alert.( )$

این تابع قابلیت بسته شدن (close) را به کلیه پنجره های alert اضافه می نماید.

(' tooltip ('close.

این تابع یک پنجره alert را می بندد.

رویدادها (Event):

رویداد	توضیحات
close.bs.alert	این رویداد به محض فراخوانی تابع close ، فعال میشود.
closed.bs.alert	این رویداد زمانی که پنجره alert کاملاً بسته شد، فعال میشود. این رویداد تا پایان کامل عملیات transition در CSS منتظر میماند و بعد فعال میشود.

مثال زیر زمانی که عملیات fade out یک پنجره alert پایان می یابد، یک پیام هشدار به کاربر نشان میدهد.

مطلب بعدی -> ایجاد دکمه های trigger و دکمه های رادیویی در Bootstrap

اشتراک گذاری:

مشاهده نمونه های بیشتر

24 تیر 1403

ثبت مکان در گوگل مپ: آموزش ثبت رایگان مکان کسب و کارتان تنها در ۵ گام

20 تیر 1403

اینفوگرافیک چیست؟ انواع، کاربرد ها و مراحل ساخت Infographic

2 خرداد 1402

راهنمای جامع طراحی سایت فروشگاهی

این راهنما شما را با دانش و استراتژی های مورد نیاز طراحی سایت فروشگاهی استثنایی مجهز می کند. برای کشف قدرت طراحی در فروش آنلاین و ایجاد یک برند دیجیتال موفق آماده شوید.

31 اردیبهشت 1402

تایپوگرافی چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

با استفاده از قدرت تایپوگرافی، طراحان می توانند تجربیات دیجیتالی فریبنده و فراموش نشدنی ایجاد کنند که مجذوب، اطلاع رسانی و تأثیر ماندگاری بر روی کاربران می شود. در این مقاله قصد داریم به صورت کامل مفهموم تایپوگرافی در طراحی سایت را برای شما شرح دهیم.

25 اردیبهشت 1402

طرح رنگ چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

در این مقاله، ما به پیچیدگی‌های طرح‌های رنگی در طراحی وب‌ سایت، بررسی اصول تئوری رنگ‌ها، تأثیرات روان‌شناختی رنگ‌ها و ملاحظات عملی برای انتخاب پالت رنگ مناسب می‌پردازیم.

23 اردیبهشت 1402

همه چیز در مورد چیدمان و ناوبری در طراحی سایت

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