Info@Afragraphic.ir
0912 22 460 22
خدمات و مطالب آموزشی

آموزش Bootstrap--کار با کلاس هشدار (Alerts) در بوت استرپ

 

کانون تبلیغاتی افرا گرافیک در نظر دارد به صورت گام به گام bootstrap را به شما عزیزان آموزش دهد. لذا قسمت سیزدهم آموزش در زیر قرار داده شده است.

 

کار با کلاس هشدار (Alerts)  در بوت استرپ                                   قسمت 13

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

هشدارهای بوت استرپ با کلاس alert. ایجاد می شوند

همچنین میتوانید در ایجاد هشدار ها از کلاس های متنی alert-success.alert-info.alert-warning.  یا

  alert-danger. نیز استفاده کنید

در مثال زیر هشدارها را با استفاده از چهار کلاس بالا نوشته ایم :

 

<div class="container">

  <h2>Alerts</h2>

  <div class="alert alert-success">

    <strong>Success!</strong> This alert box could indicate a successful or positive action.

  </div>

  <div class="alert alert-info">

    <strong>Info!</strong> This alert box could indicate a neutral informative change or action.

  </div>

  <div class="alert alert-warning">

    <strong>Warning!</strong> This alert box could indicate a warning that might need attention.

  </div>

  <div class="alert alert-danger">

    <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.

  </div>

</div>

نتیجه اجرای کد بالا :

 

6358277167544793671.png

 

 

 

 

 

 

 

 

 

برای بستن پیام هشدار به لینک هایمان (button و a) کلاس "class="close  و "data-dismiss="alert  را اضافه می کنیم

<div class="container">

  <h2>Alerts</h2>

  <div class="alert alert-success">

    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>

    <strong>Success!</strong> This alert box could indicate a successful or positive action.

  </div>

  <div class="alert alert-info">

    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>

    <strong>Info!</strong> This alert box could indicate a neutral informative change or action.

  </div>

  <div class="alert alert-warning">

    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>

    <strong>Warning!</strong> This alert box could indicate a warning that might need attention.

  </div>

  <div class="alert alert-danger">

    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>

    <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.

  </div>

</div>

 

6358277178493419902.png

 

 

 

 

 

 

 

 

 

برای انمیشن دادن به هشدارهایمان در زمانی که بسته می شوند می توانیم  از کلاس fade. و in. استفاده کنیم

<div class="alert alert-success fade in">

 

پایان قسمت 13

 

 ادامه آموزش در قسمت  چهاردهم و از طریق مطالب آموزشی سایت افراگرافیک - www.afragraphic.ir خواهید دید.

 

منبع : https://www.w3schools.com

 

نظــرات شما

نام :
وب سایت :
ایمیل :
پیغام :  

تمامی حقوق مادی و معنوی این سایت متعلق به شرکت طراحی و چاپ افراگرافیک  می باشد.