Шпаргалка по сетке grid bootstrap 3

Создано: 02 августа 2018Автор: Егор Астапов1249 просмотровСложность: легкий

Хочу поговорить о сетке бутстрап 3. Тут есть тонкости. Я читал руководство и оно немного запутывает начинающих пользователе. Я решил сделать шпаргалку по сетке бутстрап 3. Размер блока для xs не совсем верно указан. В документации написано: Extra small devices Phones (<768px). Тут нет точности. Блок с классом col-xs-6 заработает только когда размер длинны экрана будет меньше 480 пикселов. Ширина класса xs <768px - это расплывчатый ответ. Взгляните на таблицу.

Классы	xs	sm	md	lg
Ширина в px	0-479	480-767	768-991	992-1199

Вы можете скрывать блоки при определённом размере экрана по ширине.

Класс	Описание
hidden-xs	Скрывает элемент на устройствах xs (ширина viewport >= 0px и < 480px).
hidden-sm	Скрывает элемент на устройствах sm (ширина viewport >= 480px и < 768px).
hidden-md	Скрывает элемент на устройствах md (ширина viewport >= 768px и < 992px).
hidden-lg	Скрывает элемент на устройствах lg (ширина viewport >= 992px и < 1200px).
hidden	Скрывает элемент на устройствах xs, sm, md, lg (ширина viewport > 0px).

Выложил код для того чтобы вы смогли быстро скопировать нужный блок и вставить куда надо.



/* less */
.box {
   /* некий код */

  @media (max-width: (@screen-xs-min - 1)) {
    border: 1px solid red;
  }
}

.box {
  @media (max-width: (@screen-sm-min - 1)) {
    border: 1px solid green;
  }
}

.box {
  @media (max-width: (@screen-md-min - 1)) {
    border: 1px solid black;
  }
}

.box {
  @media (max-width: (@screen-lg-min - 1)) {
    border: 1px solid magenta;
  }
}


/* css */
@media (max-width: 479px) {
  .box {
    border: 1px solid red;
  }
}
@media (max-width: 767px) {
  .box {
    border: 1px solid green;
  }
}
@media (max-width: 991px) {
  .box {
    border: 1px solid black;
  }
}
@media (max-width: 1199px) {
  .box {
    border: 1px solid magenta;
  }
}

Помните, что минимальный экран 320px в ширину! Для разрешений < 320 px нет смысла что-нибудь придумывать.

Шпаргалка по сетке grid bootstrap 3

Комментарии