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>











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

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

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