В этой статье поговорим о предупреждениях, оповещениях и классах 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>
    
    

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




Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok