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

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

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

Answer 1

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

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

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

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

READ ALSO
Непонятный сдвиг влево bootstrap 4

Непонятный сдвиг влево bootstrap 4

Установил bootstrap 4Заметил что есть сдвиг влево

261
Центрирование блока с дивами на флоате [требует правки]

Центрирование блока с дивами на флоате [требует правки]

В современных браузерах код ниже работает великолепно, однако на ie11, происходят баги с main'ом, в чем может быть причина??

202
Где хранить фото? [требует правки]

Где хранить фото? [требует правки]

Сайт создаётся для фотоотчетов, фотографий будет многоЗагружать по одному на сайт не удобно и очень долго

302