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

Тимур Машнин

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

Bootstrap Progress Bars

Bootstrap обеспечивает горизонтальный индикатор с помощью конструкции:

<div class=«progress»>

<div class=«progress-bar» role=«progressbar» aria-valuenow=«70» aria-valuemin=«0» aria-valuemax=«100» style=«width:70%»>

<span class=«sr-only»> 70% Complete </span> 70%

</div>

</div>

Здесь класс. sr-only обеспечивает информацию для людей с ограниченными возможностями.

Визуальное заполнение индикатора обеспечивает атрибут style=«width:70%».

С помощью Javascript заполнение индикатора меняется следующим образом:

$('.progress-bar’).css (’width’, value+'%').attr (’aria-valuenow’, value);

Дополнительно классы. progress-bar-success,.progress-bar-info,.progress-bar-warning,.progress-bar-danger изменяют цвет заполнения индикатора.

Конец ознакомительного фрагмента.