Как правильно работать с сетками?

350

17 октября 2017, 02:21

Подскажите как распланировать сетку как на мекете до этого накидывал просто готовые варианты. Потом понял что сайт должен быть адаптивный поэтому решил сделать через bootstrap. Хотел совета гуру как правильно распланировать по сеткам шаблон. С шапкой немого понятно на картинке видно что jpg занимает 7 сеток h1 заголовок 5 в итоге получаем col-md-7 и 5. но есть непонятное для меня как сделать картинки которые выходят за шапку причем через сетку. проще было бы через позиционирование но потом не понятно как сделать адаптивность

Answer 1

Чтобы точно делать вывод правильно или нет, нужно знать, как будет выглядеть мобильная/планшетная версия. На твоем изображении схематично постарался отобразить row и col конкретно для данного разрешения + с учетом, что дальше будет адаптив.

Пройдемся по хэдеру: в 99% случаях, меню скрывается и появляется кнопка для меню, либо на след строку после логотипа, то есть, для более меньшего разрешения нужно написать аля col-xs-12 для обоих col.

Что касается блока для баннеров, видно две области, слева будет текст, справа изображение, но в мобильной версии скорее всего изображение будет под текстом или наоборот над, поэтому использую такое разбиение, а изображение в более меньших разрешениях скорее всего будет иметь width: 100%

Надеюсь тебе более-менее понятна моя мысль и ход рассуждений.