CSS Bootstrap – основные и дополнительные классы

Краткая заметка-шпаргалка по основным и дополнительным классам. Каждый раз приходится собирать из разных источников, так что попытаемся собрать все необходимове в одном месте.

Будет дополнятся по мере необходимости. Все по-сути без лирических отступлений – предполагается знание основ – материал предназначен в первую очередь как шпаргалка а не учебное пособие.

Основные классы, чаще всего используемые в работе, а также полезные тонкости и примеры использования.

Bootstrap – основная разметка

Основные классы разметки для ранных устройств

Устройство Мобильные Планшет Десктоп Десктоп
Класс col-xs- col-sm- col-md- col-lg-
Разрешение  < 768 px ≥768px

<992px

 ≥992px  ≥1200px
 .container  750px  970px  1170px

Значения классов Bootstrap

Класс Значение (ширина)
.col-хх-1 width: 8.333333%;
.col-xx-2 width: 16.666667%;
.col-xx-3 width: 25%;
.col-xx-4 width: 33.333333%;
.col-xx-5 width: 41.666667%;
.col-xx-6 width: 50%;
.col-xx-7 width: 58.333333%;
.col-xx-8 width: 66.666667%;
.col-xx-9 width: 75%;
.col-xx-10 width: 83.333333%;
.col-xx-11 width: 91.666667%;
.col-xx-12 width: 100%;

 

Bootstrap – дополнительные классы (отображение на определенных устройствах)

Классы для отображения иили скрытия эллементов для разных устройств

 Классы  Мобильный  Планшет  Десктоп
.visible-phone +
.visible-tablet  –  +  –
.visible-desktop  – +
.hidden-phone  – + +
.hidden-tablet  + +
.hidden-desktop  + +

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *