Вхід і реєстрація
Розробка · 17 січня 2015, 20:37 2490
Николай Белоус, Front-end developer

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

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

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

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

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

Теми: bootstrap, mobile, responsive
👍ПодобаєтьсяСподобалось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
Anton Katrus web, AVR(esp/arduino) 24.03.2019 13:56

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

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

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

Відповісти
Підтримати
Sergii Voloshyn Product Manager в DOU.ua 24.03.2019 13:59
добавляю в head

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

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

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

Відповісти
Підтримати
Anton Katrus
Sergii Voloshyn Product Manager в DOU.ua 25.03.2019 10:41

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

Відповісти
Підтримати
Anton Katrus
Ciemna noc 25.03.2019 12:06

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

Відповісти
Підтримати
Anton Katrus
Vladislav Povedyuk Java Developer 19.01.2015 10:57

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

Відповісти
Підтримати
Євген Козлов
Євген Козлов Front-end developer в SoftServe 19.01.2015 14:35

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

Відповісти
Підтримати
Vladislav Povedyuk
Max I CEO в FriendlyData 18.01.2015 19:10

у гугл есть документация:
developers.google.com/...es/get-started

тут разные патерны как адаптировать сайт
developers.google.com/...s/rwd-patterns

Відповісти
Підтримати
Николай Белоус Front-end developer 18.01.2015 23:53

То что нужно, спасибо.

Відповісти
Підтримати
Max I
Николай Белоус Front-end developer 18.01.2015 18:13

Спасибо за инфу, ну а с less как работать в бутстрапе? куча туториалов с sass но с less практически нету...

Відповісти
Підтримати
Max I CEO в FriendlyData 19.01.2015 01:24

— качайте исходники — 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

Відповісти
Підтримати
Николай Белоус
Nickolay Karnaukhov Senior full-stack / Architect в MWDN 18.01.2015 16:22

Блин. В доке бутстрапа все написано. В хроме включаешь режим эмуляции и получаешь любые разрешения экранов.
Или это из разряда — смотрю в книгу — фижу фигу?

Відповісти
Підтримати
Євген Козлов Front-end developer в SoftServe 18.01.2015 12:36

почему б не сделать «мобильный вид» с совершенно другой версткой? ну, по ссылке переходишь и другой вариант.
адаптивная верстка — только концепт.
@media, min-height, min-width + responsive design == adaptive layout
что именно вас интересует? как в бутстрапе сделать из «полноразмерной» страницы «мобильную»? ну, например, через @media(который работает как if в плане стилей) поубирать ненужные блоки(display: none) — баннеры там, блок «о нас», картинки другого размера(только для этого либо picture + image set, либо перенос img -> background-image)
быстрого способа типа конфигурационной переменной нет, так как адаптивный дизайн — скорее вопрос структуры(меняется расположение, видимость блоков и их поведение при изменении размеров экрана), а не конфигурации(это не красную цветовую схему на зеленую заменить)

Відповісти
Підтримати
Микола Кожухаренко mental health specialist в boryviter.org.ua 18.01.2015 01:55

Советую прочитать книгу Responsive Web Design . Автор — Marcotte E — можно сказать положил начало адаптивным макетам. Вот ее краткое изложение, и перевод с хабра. Осилить можно и за день, дает возможность сложить все кусочки знаний об адпативной вёрстве в общую картину.

Відповісти
Підтримати
Николай Белоус Front-end developer 18.01.2015 00:50

но вот еще вопрос, с чего начать работу в бутсрапе используя less процесор?

Відповісти
Підтримати
Женя Годун front-end dev в Preply.com 18.01.2015 11:01

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

Відповісти
Підтримати
Николай Белоус
Николай Белоус Front-end developer 18.01.2015 12:18

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

Відповісти
Підтримати
Женя Годун
Женя Годун front-end dev в Preply.com 18.01.2015 13:12

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

Responsive Web Design
в помощь.
Відповісти
Підтримати
Николай Белоус
Ciemna noc 25.03.2019 12:07

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

Відповісти
Підтримати
Женя Годун

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

Не підписуватись
Скористайтесь акаунтом
×
з умовами використання сайту і політикою конфіденційності.