Размеры экранов для bootstrap классов (col-md-*, col-xs-* и др.)

В данной статье рассмотрим сетку Bootstrap, классы для размещения элементов и классы для создания адаптивных страниц.

Классы Bootstrap сетки

Сетка bootstap имеет 4 основных класса:

  • xs - мобильные телефоны
  • sm - планшеты 
  • md - компьютеры
  • lg - компьютеры с большим монитором

Данные классы можнои нужно использовать вместе для создания более гибких макетов с полной поддержкой адаптивности, без написания болшого кода в css

Класс xs (очень маленькие телефоны < 768px)

  • Ширина контейнера - auto
  • Префикс класса - .col-xs-
  • Ширина колонки - auto
  • Ширина между колонками - 30px (по 15px с каждой стороны)

Класс sm (средние планшеты >= 768px)

  • Ширина контейнера - 750px
  • Префикс класса - .col-sm-
  • Ширина колонки - ~62px
  • Ширина между колонками - 30px (по 15px с каждой стороны)

Класс md (средние компьютеры >= 992px)

  • Ширина контейнера - 970px
  • Префикс класса - .col-md-
  • Ширина колонки - ~81px
  • Ширина между колонками - 30px (по 15px с каждой стороны)

Класс lg (большие компьютеры >= 1200px)

  • Ширина контейнера - 1170px
  • Префикс класса - .col-lg-
  • Ширина колонки - ~97px
  • Ширина между колонками - 30px (по 15px с каждой стороны)

На сайте собраны также модульные сетки для bootstrap3 для графических редакторов

 

Смотрите также

Почему стоит начать использовать flexbox
Мокап брошюры PSD
Получаем количество просмотров новости в 1С Битрикс

Группа Вконтакте