На этом уроке Вы научитесь создавать различные виды сообщений с помощью платформы Twitter Bootstrap 3.

Создание сообщений с помощью Twitter Bootstrap 3

Сообщения используются на сайтах довольно часто для того, чтобы пользователь обратил на них внимание. Сообщения которые можно создавать с помощью Twitter Bootstrap можно отнести к нескольким категориям: предупреждающие сообщения (warning alerts), сообщения об ошибки (error или danger alerts), сообщения об успешном выполнении какого-либо действия (success alerts), сообщения требующие подтверждения (confirmation alerts) и информационные сообщения (information alerts).

Для создания любого вида сообщений необходимо текст сообщения поместить в контейнер <div>, добавить к нему класс .alert и дополнительный класс, отвечающий за вывод конкретного вида сообщения. Различные виды сообщений приведены ниже:

Предупреждающее сообщение

Дополнительный класс: .alert-warning.
<div class="alert alert-warning">
  <strong>Предупреждение!</strong> Обнаружены проблемы с сетевым соединением.
</div>
Предупреждение! Обнаружены проблемы с сетевым соединением.

Сообщение об ошибке

Дополнительный класс: .alert-danger.
<div class="alert alert-danger">
  <strong>Ошибка!</strong> Отправка данных не завершена.
</div>
Ошибка! Отправка данных не завершена.

Сообщение об успешном выполнении действия или подтверждающее сообщение

Дополнительный класс: .alert-success.
<div class="alert alert-success">
  Сообщение отправлено успешно.
</div>
Сообщение отправлено успешно.

Информационные сообщения

Дополнительный класс: .alert-info.
<div class="alert alert-info">
  Выпуск первой версии Twitter Bootstrap состоялся в августе 2011 года.
</div>
Выпуск первой версии Twitter Bootstrap состоялся в августе 2011 года.

Закрытие сообщений с помощью атрибутов data

Для закрытия сообщений можно воcпользоваться прикладным интерфейсом Bootstrap API Data. Для этого необходимо добавить атрибут data-dismiss="alert" к вашей кнопки, с помощью которой будет осуществляться закрытие сообщения. Кнопки "закрыть" можно создать с помощью элементов <a>, <button> или <span>. После этого применить к ним класс Bootstrap "close" для правильного стилевого оформления. Для демонстрации данной функциональности рассмотрим ниже расположенный пример:

<!-- Сообщение об ошибке -->
<div class="alert alert-danger">
  <!-- Кнопка для закрытия сообщения, созданная с помощью элемента a -->
  <a href="#" class="close" data-dismiss="alert">×</a>
  Неизвестная ошибка при передаче данных.
</div>

<!-- Сообщение об успешном выполнения действия -->
<div class="alert alert-success">
  <!-- Кнопка для закрытия сообщения, созданная с помощью элемента button -->
  <button type="button" class="close" data-dismiss="alert">×</button>
  Сообщение отправлено успешно.
</div>

<!-- Предупреждающее сообщение -->
<div class="alert alert-warning">
  <!-- Кнопка для закрытия сообщения, созданная с помощью элемента span -->
  <span class="close" data-dismiss="alert">×</span>
  Введённые пароли не совпадают!
</div>
× Неизвестная ошибка при передаче данных.
Сообщение отправлено успешно.
× Введённые пароли не совпадают!

Закрытие сообщений с помощью JavaScript

Для закрытия сообщений также можно воcпользоваться ниже расположенным синтаксисом на языке JavaScript, состоящего из идентификатора кнопки (#idbutton) и метода alert('close'). Метод alert('close') предназначен для закрытия сообщения.

$('#idbutton').alert('close');

На следующем примере продемонстрируем, как можно закрыть сообщение с помощью сценария на языке JavaScript:

<h4>Сообщения, для закрытия которых используется метод alert('close')</h4>
<div id="myAlert5" class="alert alert-success">
  <span class="close">&times;</span>
  Ваше действие выполнено успешно.
</div>
<div id="myAlert5" class="alert alert-warning">
  <span class="close">&times;</span>
  <strong>Предупреждение!</strong> Обнаружены проблемы с сетевым подключением.
</div>

<script type="text/javascript">
  $(function(){
    $(".close").click(function(){
      $("#myAlert5").alert('close');
    });
});
</script>

Сообщения, для закрытия которых используется метод alert('close')

× Ваше действие выполнено успешно.
× Предупреждение! Обнаружены проблемы с сетевым подключением.

События

Следующая таблица содержит список событий предназначенных для работы с сообщениями:

Событие Описание Пример
close.bs.alert Событие срабатывает перед закрытием сообщения $('#idalert').bind('close.bs.alert', function () { // сделать что-нибудь... })
closed.bs.alert Событие срабатывает после закрытия сообщения $('#myalert').bind('closed.bs.alert', function () { // сделать что-нибудь... })

Продемонстрируем работу с событиями с помощью ниже расположенного кода:

<script type="text/javascript">
$(document).ready(function(){
  $("#myAlert").bind('close.bs.alert', function(){
    alert("Действие перед закрытием сообщения.");
  });
  $("#myAlert").bind('closed.bs.alert', function(){
    alert("Действие после закрытия сообщения.");
  });
});  
</script>

...

<div id="myAlert" class="alert alert-info">
  <span class="close" data-dismiss="alert">×</span>
  HTML5 находится в разработке
</div>

Сообщение, появляющееся перед закрытием сообщения:

Событие перед закрытием сообщения

Сообщение, которое появляется после закрытия сообщения:

Событие после закрытия сообщения