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 v3 и v4

Апрель 6, 2019 г.

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

Читать

Bootstrap - показ произвольного html контента подсказки в popover

Июнь 14, 2021 г.

Один из компонентов Bootstrap - popover - создаёт оформление и показывает текст подсказки при нажатии на контейнер. Рассмотрим более сложный кейс использования этого компонента, а именно, создание контента для popover на лету. Стандартный шаблон ...

Читать

 

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

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



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