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

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

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

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

مثال : کد زیر ، نحوه ایجاد وخروجی هر یک از کادرهای هشدار Bootstrap را نشان می دهد :

Example
<div  class="alert alert-success">
    <strong>Success!</strong> پیام موفقیت
</div>


<div  class="alert alert-info">
<strong>Info!</strong> پیام جهت نمایش اطلاعات
</div>


<div  class="alert alert-warning">
<strong>Warning!</strong> پیام هشدار
</div>


<div  class="alert alert-danger">
<strong>Danger!</strong> پیام خطر
</div>
کد
خروجی

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

ممکن است بخواهید دکمه یا علامتی قرار داده تا کاربر بتواند با کلیک بر روی آن ، کادر پیام یا هشدار نمایش داده شده را ببندد .
برای این منظور بایستی یک تگ <a> یا دکمه Button ای را به عنصر خود اضافه کرده و خواص زیر را برای آن تعریف کنید :

  • کلاس آن  close باشد  .
  • مقدار   "data-dismiss="alert .
Example
<div class="alert alert-success">
      <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
      <strong>Success!</strong> پیام موفقیت.
</div>
کد
خروجی

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

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

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

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

Example
<div class="alert alert-success fade in">
      <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
      <strong>Success!</strong> پیام موفقیت.
</div>
کد
خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1 حمایت نمایید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟      
حمایت از سایت Developer1