Bootstrap extra large — стили для сетки свыше 1600 точек

3я версия Bootstrap определяет 4 размера сетки: <768px, ≥768px, ≥992px, ≥1200px. Этих размерностей явно не достаточно.

В то время как на телефонах разрешение экрана быстро растет, и тестирование на устройствах с экраном менее 640 точек уже теряет смысл (xs хорошо адаптируется к данному размеру), то типовые десктопные мониторы — это 1600 и более точек, для которых lg (размерность large — от 1200 точек) подходит не очень  хорошо.

Компиляция кастомных размеров сетки

Исходники bootstrap позволяют скомпилировать стили с нужной вам сеткой размеров. Для этого нужно разобраться с .less исходниками, сформировать дополнительный код для нужных размеров.

open-source проекты хороши тем, что вы в 99% случаев найдете готовое решение вашей проблемы, но прежде взглянем, что там обещают в 4й версии.

Что в 4й версии?

В 4й версии не ожидается (пока) каких либо подвижек в сторону расширения линейки, хотя количественно интервал до 1200px пополнился ещё одной размерностью: <544px, ≥544px, ≥768px, ≥992px, ≥1200px. Т.е. разработчики сделали шаг в направлении поддержки более мелких, устаревающих разрешений.

Готовое решение

Для Bootstrap v3 есть готовое решение, которое вводит размерность с префиксом xl (extra-large), помогая с адаптивной версткой макета шириной 1600px и более.

BootstrapXL на Github

Уже готовый к использованию дополнительный файл .css занимает всего 5 кб. Остаётся только сказать автору спасибо за то, что все сделал за нас. :)

Написать комментарий

Мало букафф? Читайте есчо !

Переносы элементов сетки bootstrap разной высоты (фикс для версии 3.x)

Май 2, 2021 г.

В третей версии бутстрапа используется выравнивание элементов сетки col-* с помощью свойства float: left;. Пока элементы в сетке имеют одинаковую высоту, ...

Читать

Шпаргалка по размеру сетки bootstrap v3 и v4

Апрель 6, 2019 г.

Для тех кто использует с 3ю и 4ю версии бутстрапа и постоянно забывает размеры сетки (grid). Здесь приведены таблицы для сетки по-умолчанию (в общем ...

Читать

 

Комментарии к «Bootstrap extra large — стили для сетки свыше 1600 точек»

Понравилась статья? Есть вопросы? - пишите в комментариях.



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