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

font-size: 50px;

}

Значки и метки

С помощью контейнера <span class=«badge»> [число] </span> Bootstrap позволяет добавить количество сообщений, комментарий, обновлений и др.

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

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

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

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

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

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

Класс. 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>

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

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>

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

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

Страницы: «« 123456

Читать бесплатно другие книги:

Сергей Беляков – историк, литературовед, автор биографии-бестселлера «Гумилев сын Гумилева» (премия ...
Издание содержит три романа: «Кулинарная книга», «Где валяются поцелуи», «В каждом молчании своя ист...
Каждый из нас с детства верит в мечты. Мы мечтали, что мама пораньше заберет нас из детского сада, ч...
От этих историй замирает сердце и мороз идет по коже!В запертой комнате произошло ужасное убийство. ...
Аэрогриль – это поистине чудо-помощник на нашей кухне. С его помощью без особого труда вы сможете св...
Главный герой — зло, воплощённое в портрете царя Герода, написанного гением Ариком Моше, одним из сп...