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

Читать онлайн книгу Bootstrap: Быстрое создание современных сайтов - Тимур Машнин страница 14

СКАЧАТЬ style="font-size:15px;">      <button type = «button» class = «btn btn-default btn-sm»>

      <span class = «glyphicon glyphicon-user»> </span>

      User

      </button>

      <button type =«button» class = «btn btn-default btn-xs»>

      <span class = «glyphicon glyphicon-user»> </span>

      User

      </button>

      Изменить цвет и размер значка glyphicon также можно с помощью CSS.

      <span class=«glyphicon glyphicon-wrench logo-small»> </span>

      .logo-small {

      color: #f4511e;

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

      <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 Кошелек, бонусными картами или другим удобным Вам способом.

/9j/4AAQSkZJRgABAQIAJgAmAAD/4gxYSUNDX1BST0ZJTEUAAQEAAAxITGlubwIQAABtbnRyUkdCIFhZWiAHzgACAAkABgAxAABhY3NwTVNGVAAAAABJRUMgc1JHQgAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLUhQICAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABFjcHJ0AAABUAAAADNkZXNjAAABhAAAAGx3dHB0AAAB8AAAABRia3B0AAACBAAAABRyWFlaAAACGAAAABRnWFlaAAACLAAAABRiWFlaAAACQAAAABRkbW5kAAACVAAAAHBkbWRkAAACxAAAAIh2dWVkAAADTAAAAIZ2aWV3AAAD1AAAACRsdW1pAAAD+AAAABRtZWFzAAAEDAAAACR0ZWNoAAAEMAAAAAxyVFJDAAAEPAAACAxnVFJDAAAEPAAACAxiVFJDAAAEPAAACAx0ZXh0AAAAAENvcHlyaWdodCAoYykgMTk5OCBIZXdsZXR0LVBhY2thcmQgQ29tcGFueQAAZGVzYwAAAAAAAAASc1JHQiBJRUM2MTk2Ni0yLjEAAAAAAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAPNRAAEAAAABFsxYWVogAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z2Rlc2MAAAAAAAAAFklFQyBodHRwOi8vd3d3LmllYy5jaAAAAAAAAAAAAAAAFklFQyBodHRwOi8vd3d3LmllYy5jaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABkZXNjAAAAAAAAAC5JRUMgNjE5NjYtMi4xIERlZmF1bHQgUkdCIGNvbG91ciBzcGFjZSAtIHNSR0IAAAAAAAAAAAAAAC5JRUMgNjE5NjYtMi4xIERlZmF1bHQgUkdCIGNvbG91ciBzcGFjZSAtIHNSR0IAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZGVzYwAAAAAAAAAsUmVmZXJlbmNlIFZpZXdpbmcgQ29uZGl0aW9uIGluIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAALFJlZmVyZW5jZSBWaWV3aW5nIENvbmRpd СКАЧАТЬ