Bootstrap: Быстрое создание современных сайтов Машнин Тимур
font-size: 50px;
}
Значки и метки
С помощью контейнера <span class=«badge»> [число] </span> Bootstrap позволяет добавить количество сообщений, комментарий, обновлений и др.
<a href=«#»> Comments <span class=«badge»> 10 </span> </a>
<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 изменяют цвет заполнения индикатора.
Читать бесплатно другие книги:
