خانه تالار گفتگو دانلود خبرنامه سفارش سایت درباره ما ارتباط با ما حمایت از ما تبلیغات

آموزش ایجاد کادر های هشدار یا پیام ( Alerts ) در Bootstrap

آموزش ایجاد کادر های هشدار یا پیام ( Alerts ) در Bootstrap

با استفاده از کلاس alert. در Bootstrap می توانید کادرهای رنگی مختلفی را ایجاد کرده و باه وسیله آنها پیام یا هشدار مورد نظر خود را به کاربر نمایش دهید .
هر کدام از این کادر ها دارای یک رنگ متفاوت بوده که با مضمون پیام همخوانی دارند . مثلا برای کادر نمایش اطلاعات رنگ ملایم آبی و برای کادر پیام هشدار ، رنگ قرمز در نظر گرفته شده است .
برای ایجاد یک کادر هشدار ، ابتدا بایستی کلاس alert. را به عنصر مورد نظر خود داده و سپس یکی از کلاس های زیر را در ادامه آن اضافه نمایید :
  • alert-success. : این کادر برای نمایش پیام موفقیت ، پس از یک رخداد ، استفاده شده و به رنگ سبز ملایم است .
  • alert-info. : این کادر جهت نمایش اطلاعات به کار رفته و دارای رنگ آبی ملایم است .
  • alert-warnning. : این کادر جهت نمایش یک هشدار به کار رفته و رنگ آن نارنجی کم رنگ می باشد .
  • alert-danger. : این کادر نیز جهت نمایش یک پیام خطر به کار رفته و به رنگ قرمز است .
مثال : کد زیر ، نحوه ایجاد وخروجی هر یک از کادرهای هشدار Bootstrap را نشان می دهد :
کد مثال عملی
کد
                                    
خروجی

آموزش اضافه کردن یک دکمه جهت بستن کادر هشدار :

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

برای این منظور بایستی یک تگ < a> یا دکمه Button ای را به عنصر خود اضافه کرده و خواص زیر را برای آن تعریف کنید :
  • کلاس آن close باشد .
  • مقدار "data-dismiss="alert .
کد مثال عملی
کد
                                    
خروجی

نکته آموزشی نکته 1 :

برای کمک به افرادی که از دستگاه های مخصوص برای کم بینایان یا نا بینایان استفاده می کنند ( Screen Readers ) و سهولت استفاده آنها ، بایستی خاصیت " aria-label = " close را به دکمه یا لینک خود اضافه نمایید .


نکته آموزشی نکته 2 :

همچنین کاراکتر ;times& ، یک کاراکتر خاص HTML بوده که خروجی به صورت ( X ) تولید می کند و استفاده از آن به عنوان یک ICON بهتر از به کار بردن حرف x ، جهت ایجاد دکمه بستن کادر است .


ضافه کردن افکت ملایم برای بسته شدن کادر هشدار ( fade in )

به وسیله کلاس های fade. و in. می توانید یک افکت را به کادر هشدار خود اضافه کرده تا در هنگام بسته شدن توسط کاربر ، به آرامی از روی صفحه محو شود( نه به صورت یک باره ) .
مثال : نحوه استفاده از افکت fade in و خروجی آن را در مثال زیر نشان داده ایم :
کد مثال عملی
کد
                                    
خروجی