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%»>
Конец ознакомительного фрагмента.
Текст предоставлен ООО «ЛитРес».
Прочитайте эту книгу целиком, купив полную легальную версию на ЛитРес.
Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.