В этой статье поговорим о предупреждениях, оповещениях и классах Bootstrap. Оповещения предоставляют способ стилизации сообщений пользователю. Они предоставляют контекстные сообщения обратной связи для типичных действий пользователя.

Вы можете добавить опцию закрытия значка для предупреждения. Для встроенного оповещения используйте плагин Alerts jQuery.

Вы можете добавить базовое предупреждение, создавая оболочку div и добавление класса в .alert и один из четырех контекстных классов (например, .alert-success, .alert-info, .alert-warning, .alert-danger).

Следующий пример демонстрирует это -

<div class = "alert alert-success">Success! Well done its submitted.</div>
<div class = "alert alert-info">Info! take this info.</div>
<div class = "alert alert-warning">Warning ! Dont submit this.</div>
<div class = "alert alert-danger">Error ! Change few things.</div>

Оповещения

Чтобы создать предупреждение - оповещение,

  • Добавить основное предупреждение путем создания оболочки div и добавления класса в .alert и один из четырех контекстных классов (например, .alert-success, .alert-info, .alert-warning, .alert-danger)
  • Кроме того, добавить по желанию .alert-dismissable выше к div классу.
  • Добавить кнопку закрытия.

Следующий пример демонстрирует это -

<div class = "alert alert-success alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      ×
   </button>
           
   Success! Well done its submitted.
</div>
 
<div class = "alert alert-info alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      ×
   </button>
           
   Info! take this info.
</div>
 
<div class = "alert alert-warning alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      ×
   </button>
           
   Warning ! Dont submit this.
</div>
 
<div class = "alert alert-danger alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      ×
   </button>
           
   Error ! Change few things.
</div>

Обязательно используйте элемент button с data-dismiss = "alert" атрибутом.

Ссылки в оповещениях

Чтобы получать ссылки в оповещениях -

  • Добавить основное предупреждение путем создания оболочки div и добавления класса в .alert и один из четырех контекстных классов (например, .alert-success, .alert-info, .alert-warning, .alert-danger)
  • Используйте класс утилиты .alert-link, чтобы быстро предоставлять соответствующие цветные ссылки в любом предупреждении.
  • <div class = "alert alert-success">
       <a href = "#" class = "alert-link">Success! Well done its submitted.</a>
    </div>
     
    <div class = "alert alert-info">
       <a href = "#" class = "alert-link">Info! take this info.</a>
    </div>
     
    <div class = "alert alert-warning">
       <a href = "#" class = "alert-link">Warning ! Dont submit this.</a>
    </div>
     
    <div class = "alert alert-danger">
       <a href = "#" class = "alert-link">Error ! Change few things.</a>
    </div>
    
    

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!



We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok