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


Alerts

بوت استرپ یک راه ساده برای ساخت پیغام های از پیش تعریف شده فراهم آورده است :


alert1

 

پیغام ها با استفاده از کلاس alert. که به دنبال آن هرکدام از چهار کلاس alert-success ، .alert-info ، .alert-warning. و alert-danger. قرار دارند ، ایجاد میشود:

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert alert-info">
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert alert-warning">
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

خودتان امتحان کنید


لینک های پیغام

برای ساخت پیغام های لینکی میتوان از کلاس alert-link استفاده کرد :

alert

 

<div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>

خودتان امتحان کنید 


بستن پیغام ها

برای بستن پیغام ها باید بر روی علامت ضربدر (x) در انتهای پیغام کلیلک کرد. برای بسته شدن یک پیغام باید کلاس  alert-dismissible. را به container پیغام افزود. سپس کلاس "class="close و "data-dismiss="alert را به لینک یا دکمه ی مربوطه اضافه کرد.(وقتی روی علامت ضربدر کلیک میشود باکس مربوطه پنهان میشود)

<div class="alert alert-success alert-dismissible">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

خودتان امتحان کنید


افکت های پیغام

کلاس های fade. و in. افکت fading را موقعی که پیغام در حال بسته شدن است فعال میکنند :

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

خودتان امتحان کنید