Bootstrap: Быстрое создание современных сайтов. Тимур Машнин

class=«label label-warning»> Warning Label </span>

      <span class=«label label-danger»> Danger Label </span>

      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 изменяют цвет заполнения индикатора.

      <div class=«progress»>

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