Bootstrap: Быстрое создание современных сайтов

Тимур Машнин

Bootstrap представляет собой свободный фреймворк интерфейсов для быстрой и простой Web-разработки. Bootstrap предоставляет шаблоны дизайна, основанные на HTML и CSS, для разметки, форм, кнопок, таблиц, навигации, диалоговых окон, каруселей изображений и многого другого, а также дополнительные плагины JavaScript. На основе Bootstrap можно легко создавать сайты с «отзывчивым дизайном», одинаково хорошо выглядящие на всех типах устройств, от небольших телефонов до настольных компьютеров.

Bootstrap Alerts

Bootstrap Alerts представляют собой не диалоговые окна с сообщениями, а выделенные цветом блоки текста на странице, которые, однако, имеют кнопку закрытия.

Для создания сообщения Bootstrap Alert используется класс. alert с одним из четырех классов. alert-success,.alert-info,.alert-warning или. alert-danger, которые обеспечивают соответствующий цвет фона и шрифта текста.

<div class=«alert alert-success»>

<a href=«#» class=«close» data-dismiss=«alert» aria-label=«close»> &times; </a>

<strong> Success! </strong> This alert box could indicate a successful or positive action.

</div>

<div class=«alert alert-info»>

<a href=«#» class=«close» data-dismiss=«alert» aria-label=«close»> &times; </a>

<strong> Info! </strong> This alert box could indicate a neutral informative change or action.

</div>

<div class=«alert alert-warning»>

<a href=«#» class=«close» data-dismiss=«alert» aria-label=«close»> &times; </a>

<strong> Warning! </strong> This alert box could indicate a warning that might need attention.

</div>

<div class=«alert alert-danger»>

<a href=«#» class=«close» data-dismiss=«alert» aria-label=«close»> &times; </a>

<strong> Danger! </strong> This alert box could indicate a dangerous or potentially negative action.

</div>

Кнопку закрытия при этом обеспечивает элемент <a href=«#» class=«close» data-dismiss=«alert» aria-label=«close»> &times; </a>.

Дополнительно класс class=«alert alert-success fade in» добавляет анимацию при закрытии сообщения.

Нажатие кнопки закрытия можно обрабатывать с помощью Javascript.

<div class=«alert alert-success» id=«myAlert»>

<a href=«#» class=«close»> &times; </a>

<strong> Success! </strong> This alert box could indicate a successful or positive action.

</div>

<script>

$(document).ready (function () {

$(".close").click (function () {

$("#myAlert").alert («close»);

});

});

</script>

С помощью класса. alert-link вместо текста сообщения можно вставлять ссылку.

<div class=«alert alert-info»>

<a href=«#» class=«close» data-dismiss=«alert» aria-label = «close»> &times; </a>

<a href = «#» class = «alert-link»> <strong> Info! </strong>

This alert box could indicate a neutral informative change or action.

</a>

</div>