training-web.ruГлавнаяКатегорииО насКарта сайтаПоискТёмная тема

Категории

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

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

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

Классыxssmmdlg
Ширина в px0-479480-767768-991992-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 нет смысла что-нибудь придумывать.

Комментарии

Ваня: 31 января 2019 20:43:40
реклама на сайте

реклама