Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 30
×

Адаптивная верстка на bootstrap

Усі статті, обговорення, новини про Mobile — в одному місці. Підписуйтеся на телеграм-канал!

Ребята подскажите нужны ресурсы на которых можно подробной разобраться с версткой под мобильные девайсы и как работают разные разрешиения экранов сайты. На сайте bootstrap документация в принцепе ясна, но я не могу понять как это все в кучу склеять.

Цель поста: как сверстать так сайт что бы он работал и с мобильными девайсами? Так же под разные разришение экранов.

Буду признателен за ресурсы и если кто-то поделиться своим опытом.

👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Вітаю, дорогі web-розробники, не можу випробувати bootstrap

добавляю в head
jquery.min.js
bootstrap.js
bootstrap.css

потім в body добавляю простой bootstrap-код, а він не працює.

добавляю в head

А що саме туди додали?

потім в body добавляю простой bootstrap-код, а він не працює.

який саме код?

Спробуйте підключити CSS/JS з www.bootstrapcdn.com а не так як зараз.

вы же тьютор))) и такая ерунда

т.е. responsive design это не верстка под разные разрешения?

и то, и то решает вопрос отображения контента вне зависимости от размеров и типа медиа.
responsive ака «резиновая верстка» — когда «тянется»
adaptive — когда меняется структура
и то, и то — может использовать resolution breakpoints явно(@media) и не явно(захардкодженные min/max width/height, flex-origin etc)
оно может не противоречит друг-другу. то есть, в пределах одного резолюшн брейкпоинта вполне может быть responsive design, а для разных брейкпоинтов использоваться разные структуры блоков на странице(одни скрываются совсем, другие начинают показываться только по кликам, третьи переезжают на другое место — adaptive layout)
ТС спрашивал конкретно про адптив.
responsive design в bootstrap’e — использование fluid разметки через соответствующие классы и всё.
а с адаптивностью никак не разобраться в режиме «меняем один класс на другой и всё». потому что сначала надо придумать, как будут различаться структурой страница в зависимости от разрешений. ну, чтоб этим было удобно пользоваться(показатели — прокрутка только в одном направлении, возможность чтения без зума, однозначность клика по ссылкам)

у гугл есть документация:
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 процесор?

Как у вас с чистой версткой обстоят дела?

Не плохо, осталась только пдаптивная)

Попробуйте пока без бутстрапа, чистая верстка с медиа квери. Ну и книжка

Responsive Web Design
в помощь.

а я бы еще флексы или гриды добавила, 12 колонок уже вчерашний день

Підписатись на коментарі