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

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

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

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

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

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

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

<992px

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

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

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

 

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

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

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

 

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

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