Учебники

Bootstrap — оповещения

Октябрь 25, 2018

В этой главе будут обсуждаться оповещения и классы, которые 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> и добавив класс .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">
      &times;
   </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">
      &times;
   </button>
	
   Info! take this info.
</div>

<div class = "alert alert-warning alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Warning ! Dont submit this.
</div>

<div class = "alert alert-danger alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Error ! Change few things.
</div>

Обязательно используйте элемент <button> с атрибутом данных data-dismiss = «alert» .

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

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

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

Используйте служебный класс .alert-link для быстрого предоставления соответствующих цветных ссылок в любом предупреждении.

43
Share: