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

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

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

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

добавил(а): Ваня
дата: 2019-01-31 20:43:40
реклама на сайте





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