как верстать по сетке?

497

24 ноября 2016, 10:08

Ребята, есть макет PSD, в нем направляющие разделены на 12 колонок, насколько я понимаю это "сетка", задача стоит сделать адаптивный сайт, адаптивно я никогда не верстал и слабо понимаю в этом деле. Так вот вопрос "Как верстать по этой сетке?" я два дня смотрю ютуб, лофт блоги всякие и прочее, не понимаю, создал он сетку из 12 колонок, у каждой свой размер в %, добавил он в html код пару дивов с определенными классами и крутит вертит размер браузера, все сужается, переходит на другие строки, вроде бы инфу дали а я все равно не понимаю, например мне надо логотип слева, по средине строка поиска она шире чем логотип, справа корзина какая нибудь тоже определенных размеров, а колонок 12, как быть? что куда пихать и что чему давать? :(

Answer 1

посмотрите о бутстрапе видео..смысл в том что экран по ширине разбит на 12 блоков.. ты должен разбить свои колонки так, чтоб в итоге они имели в сумме 12. Например есть col-md-8..md - размер экрана обозначает, 8 - количество "блоков" в колонке. Вот пример более подробен и визуально отображен бутстрап

Answer 2

Просто посмотрев видео не можно это все сделать..Можешь попробовать bootstrap http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp Grid System нужно понять смысл и сначала попробовать самому сделав очень простые задачи а когда на 100% будешь понимать Grid System тогда и начинай верстать )).