Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

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

21.09.2016


11:54


2638


пока нет


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

Уведомления для веб-страниц. Основы 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>

Результат:


Warning! Better check yourself, you're not looking too good.

 

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

Если хотите добавить ссылку на уведомлении, делается это вот так (для ссылки добавьте класс «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>

Результат:

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

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



Случайные записи:

  1. Вертикальное меню (панель). Основы bootstrap 3 для начинающих. Урок №11
  2. Тесты CSS онлайн. Основы CSS для начинающих
  3. Оператор условия if else Основы PHP с нуля Урок №9
  4. Как сделать фоновую музыку на сайте – HTML и HTML5
  5. Как вставить картинку в HTML. Основы HTML для начинающих. Урок №5

Последние записи рубрики:

  1. Бесплатный курс по основам Bootstrap3
  2. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  3. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  4. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
  5. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245