Twitter Bootstrap: оповещения

Текущая заметка содержит несколько примеров разметки HTML, которая необходима для оформления оповещений (alerts) в CSS-фреймворке Twitter Bootstrap.

Оформление информационных уведомлений в Twitter Bootstrap

1. В <HEAD> согласно стандартам W3C добавляем к веб-странице необходимые для работы фреймворка стили и JavaScript-скрипты, обратите внимание на подключение JQuery плагина bootstrap-alert.js:

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="http://yandex.st/jquery/1.8.3/jquery.min.js">
</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-alert.js"></script>
<!--[if lt IE 9]>
  <script src="js/html5.js"></script>
<![endif]-->

2. Теперь дело за малым: нужно всего лишь создать правильную разметку на HTML, как показано далее, — смотрим несколько примеров.

.alert + .fade + .in = желтое «окно» с плавным исчезновением по нажатию на крестик справа, — за плавность отвечает «fade in»:

<div class="alert fade in">
<button data-dismiss="alert" class="close" type="button">×
</button>
<strong>Внимание!</strong> Это уведомление будет 
оформлено оттенками желтого и плавно закроется.
</div>

.alert + .alert-error = красное «окно», — за красный отвечает «alert-error»:

<div class="alert alert-error">
<button data-dismiss="alert" class="close" type="button">×
</button>
<strong>Ошибка!</strong> Это уведомление будет 
оформлено оттенками красного.
</div>

Продолжение ищите на второй странице статьи.

Скачать
Опубликовано 20-03-2013 в 11:35


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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Свежие комментарии

  • Администратор: к записи Спросите на сайте сообщества - http://modx.ru/nast »
  • Григорий: к записи помогите. установил mod x revo на xampp. вроде бы »
  • Дмитрий: к записи Довольно интересно »
  • Валерий: к записи Моё личное мнение - хороший хостинг. На нём уже да »
  • DeKoS: к записи Робит всё. »
  • Администратор: к записи Что-то слишком дешево, подозрительно... »
  • Валерий: к записи Лучше, конечно, платный хостинг. Бесплатных полноц »

Статистика спама

Последние твиты