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 кб. Остаётся только сказать автору спасибо за то, что все сделал за нас. :)

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

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

Меняем отступы сетки (gutter-width) в Bootstrap

Октябрь 2, 2017 г.

Дефолтова сетка в bootstrap 3 имеет размер 30 пикс. Понятно, что рабочий макет может содержать произвольные отступы и, если вы хотите использовать преимущества работы с grid от бутстрапа, придется как то их менять и фиксить. Фактически нужно сделать ...

Читать

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

Май 2, 2021 г.

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

Читать

 

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

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



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