Уведомления для веб-страниц. Основы bootstrap 3 для начинающих. Урок №16

Всем привет!
В сегодняшнем уроке вы научитесь делать уведомления на сайте, используя различные штучки от bootstrap 3. Почему я решил внести в уроки тему «Уведомление для веб-страниц»? Это необычные уведомления, они способны закрываться, стоит только пользователю нажать на соответствующий значок закрыть «Х».
Начну с оформления.

Оформление уведомления.

Здесь уже подобраны все необходимые стили с цветом, с отступами и т.д. Пропишите тегу div класс «alert», а также стиль для блока в зависимости от статуса сообщения (alert-success, alert-info, alert-warning, alert-danger) .

<div class="alert alert-success">
Молодец! Вы успешно прочитали это важное сообщение
</div>
<div class="alert alert-info">
Внимание! Данное предупреждение необходимо Вашему вниманию, но это не супер важно.
</div>
<div class="alert alert-warning">
Предупреждение! Лучше проверь сам, ты не очень хорошо выглядишь.
</div>
<div class="alert alert-danger">
Упс! Изменить пару вещей и повторите попытку.
</div>

Результат:

Уведомления, которые можно закрыть.

Если вам нужно вывести на веб-странице уведомление, которое пользователь сможет закрыть, то это можно сделать при помощи добавления кнопки прямо в блок с уведомлением:

<div class="alert alert-warning">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Результат:

Ссылка с уведомлением

Если хотите добавить ссылку на уведомлении, делается это вот так (для ссылки добавьте класс «alert-link», чтобы подходила по цвету уведомления):

<div class="alert alert-success">
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
<div class="alert alert-info">
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
</div>
<div class="alert alert-danger">
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>

Результат:

Жду вас на следующих уроках по изучению Bootstrap 3.