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

Bootstrap Progress Bars

Bootstrap Progress Bars

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

<div>

<div role=«progressbar» aria-valuenow=«70» aria-valuemin=«0» aria-valuemax=«100»>

<span 70% Complete </span> 70%

</div>

</div>

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

Визуальное заполнение индикатора обеспечивает атрибут>

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

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

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

<div>

<div progress-bar-success» role=«progressbar» aria-valuenow=«70» aria-valuemin=«0» aria-valuemax=«100»>

Оглавление книги