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

empty-line/>

<button type=«button» class=«btn btn-success»> Messages <span class=«badge»> 3 </span> </button>

<a href=«#»> Message <span class=«badge»> new 10 </span> </a>

Класс. label, совместно с классами. label-default,.label-primary,.label-success,.label-info,.label-warning,.label-danger в контейнере <span> позволяет добавить разноцветные метки.

<span class=«label label-default»> Default Label </span>

<span class=«label label-primary»> Primary Label </span>

<h3> <span class=«label label-success»> Success Label </span> </h3>

<span class=«label label-info»> Info Label </span>

<span 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%»>

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