Ребята подскажите нужны ресурсы на которых можно подробной разобраться с версткой под мобильные девайсы и как работают разные разрешиения экранов сайты. На сайте bootstrap документация в принцепе ясна, но я не могу понять как это все в кучу склеять.
Цель поста: как сверстать так сайт что бы он работал и с мобильными девайсами? Так же под разные разришение экранов.
Буду признателен за ресурсы и если кто-то поделиться своим опытом.
Вітаю, дорогі web-розробники, не можу випробувати bootstrap
добавляю в head
jquery.min.js
bootstrap.js
bootstrap.css
потім в body добавляю простой bootstrap-код, а він не працює.
добавляю в head
А що саме туди додали?
потім в body добавляю простой bootstrap-код, а він не працює.
який саме код?
Спробуйте підключити CSS/JS з www.bootstrapcdn.com а не так як зараз.
responsive != adaptive BTW
т.е. responsive design это не верстка под разные разрешения?
и то, и то решает вопрос отображения контента вне зависимости от размеров и типа медиа.
responsive ака «резиновая верстка» — когда «тянется»
adaptive — когда меняется структура
и то, и то — может использовать resolution breakpoints явно(@media) и не явно(захардкодженные min/max width/height, flex-origin etc)
оно может не противоречит друг-другу. то есть, в пределах одного резолюшн брейкпоинта вполне может быть responsive design, а для разных брейкпоинтов использоваться разные структуры блоков на странице(одни скрываются совсем, другие начинают показываться только по кликам, третьи переезжают на другое место — adaptive layout)
ТС спрашивал конкретно про адптив.
responsive design в bootstrap’e — использование fluid разметки через соответствующие классы и всё.
а с адаптивностью никак не разобраться в режиме «меняем один класс на другой и всё». потому что сначала надо придумать, как будут различаться структурой страница в зависимости от разрешений. ну, чтоб этим было удобно пользоваться(показатели — прокрутка только в одном направлении, возможность чтения без зума, однозначность клика по ссылкам)
Learn by doing
www.codeschool.com/...ney-into-mobile
у гугл есть документация:
developers.google.com/...es/get-started
тут разные патерны как адаптировать сайт
developers.google.com/...s/rwd-patterns
То что нужно, спасибо.
Спасибо за инфу, ну а с less как работать в бутстрапе? куча туториалов с sass но с less практически нету...
— качайте исходники — Source code с их сайта,
getbootstrap.com/...etting-started
— в папке less лежат все их less-файлы.
копируете эту папку себе в проект в папку /less
— создаете свой less файл — /css/my.less и там подключаете bootstrap файлы:
@import «less/bootstrap.less»;
@import «variables.less»;
— создаете свой файл css/variables.less — копированием из /less папки бутстрапа.
меняете там переменные согласно вашего дизайна.
описание переменных — тут — getbootstrap.com/customize
— Компилируете свой my.less файл в обычный css.
В винде есть программка winless — winless.org
Блин. В доке бутстрапа все написано. В хроме включаешь режим эмуляции и получаешь любые разрешения экранов.
Или это из разряда — смотрю в книгу — фижу фигу?
почему б не сделать «мобильный вид» с совершенно другой версткой? ну, по ссылке переходишь и другой вариант.
адаптивная верстка — только концепт.
@media, min-height, min-width + responsive design == adaptive layout
что именно вас интересует? как в бутстрапе сделать из «полноразмерной» страницы «мобильную»? ну, например, через @media(который работает как if в плане стилей) поубирать ненужные блоки(display: none) — баннеры там, блок «о нас», картинки другого размера(только для этого либо picture + image set, либо перенос img -> background-image)
быстрого способа типа конфигурационной переменной нет, так как адаптивный дизайн — скорее вопрос структуры(меняется расположение, видимость блоков и их поведение при изменении размеров экрана), а не конфигурации(это не красную цветовую схему на зеленую заменить)
Советую прочитать книгу Responsive Web Design . Автор — Marcotte E — можно сказать положил начало адаптивным макетам. Вот ее краткое изложение, и перевод с хабра. Осилить можно и за день, дает возможность сложить все кусочки знаний об адпативной вёрстве в общую картину.
но вот еще вопрос, с чего начать работу в бутсрапе используя less процесор?
www.youtube.com/...5pwBQTHsU9T2mBq на русском
www.youtube.com/...029EEFC21D2DC58 на англ.
www.youtube.com/...tstrap tutorial еще на англ.
Как у вас с чистой версткой обстоят дела?
Не плохо, осталась только пдаптивная)
Попробуйте пока без бутстрапа, чистая верстка с медиа квери. Ну и книжка
Responsive Web Designв помощь.
а я бы еще флексы или гриды добавила, 12 колонок уже вчерашний день
Anton Katrus
Sergii Voloshyn
Anton Katrus
Ciemna noc
Vladislav Povedyuk
Євген Козлов
Vladislav Povedyuk
Dmitriy Luganskiy
Max I
Николай Белоус
NewOne NewOne
Max I
Nickolay Karnaukhov
Євген Козлов
Микола Кожухаренко
Sergii Nikolayev
Студент
Женя Годун
Roman Ron
27 коментарів
Додати коментар Підписатись на коментаріВідписатись від коментарів