голосование
PHP
Javascript
BASH
HTML
Firebird
Программы
Хостинг
Майнинг
Ресурсы
GIT
SEO
Oracle
Python
Железо
Проголосуйте за категорию!
счётчик
Яндекс.Метрика

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

Хочу поговорить о сетке бутстрап 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 нет смысла что-нибудь придумывать.

просмотры: 39, уровень: лёгкий уровень, рейтинг: 0, дата: 2018-08-02 17:59:09
проголосовать:

Комментарии:






поиск
сайты друзей
банеры
домен RU всего за 99 рублей
http://www.2domains.ru домен RU домен RU всего за 99 рублей
http://trainingweb.ru/redirect/well_web_vps_kvm Аренда VPS KVM в Европе Мы предлагаем в аренду VPS серверы с выделенным IP-адресом, которые полностью эмулируют физический сервер.
http://ping-admin.ru/index_5659.html мониторинг сайтов сервис мониторинга работы сайта, мониторим HTTP, HTTPS, FTP, MYSQL, PostgreSQL, POP3, SMTP, IMAP