Размеры экранов для 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 для графических редакторов

 

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

Замена капчи eForm на Google reCAPTCHA
20 отличных шаблонов для админ панелей
30 бесплатных адаптивных шаблонов

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