Поясните про адаптивную верстку Bootstrap 3?

Question

[Dmitrii]

Случился у меня вопрос. Надо мне, скажем, для десктопа вывести одну версию меню, а для мобильника/планшета — другую версию меню, т.е. в целом они в принципе разные. Правильно ли я понимаю, что десктопной версии можно прописать class="hidden-xs hidden-sm", а мобильной — наоборот class="hidden-md hidden-lg"? Меня смущает, что получается для каждого устройства (коих может быть до 4, согласно логике бутстрапа) мне надо делать 4 версии, скажем, меню? Как на такое отреагируют поисковики? Ведь из кода никуда данные не деваются... Проясните, может на ночь глядя не понял чего...

Answer 1

[Антон]

Семантика - в html`е.
Отображение - в css.

Наиболее полно оценить возможности бутстрапа можно используя less/sass.
Конкретно насчет отображения одного и того же контента по разному в зависимости от типа устройств - это css media query.

Comments

[Dmitrii]

brud Прошу прощения, но я несколько не понял, можете более развернуто пояснить на примере того, что я указал выше?

[Антон]

Sass или Less поддерживают наследуемость css-классов, а описание одного и того же класса в разных медиа кверис и организует то, что вам нужно.

www.lesscss.ru/features
htmlbook.ru/css/value/media

Псевдо-пример на языке less для наглядности:

media screen and (device-width: 1280px) {
.menu-button {
.hidden-xs;
.hidden-sm;
}
}

media screen and (device-width: 1024px) {
.menu-button {
.hidden-md;
.hidden-lg;
}
}

[Антон]

Извиняюсь, парсер съел собаки перед media

[Dmitrii]

brud: я имел в виду дублирование кода не в CSS, а в HTML, т.е. грубо говоря вот так.

[Dmitrii]

brud: Да про парсер понял, суть не в том)

[Антон]

Дмитpий: я и описал, как избавиться от дублирования. Вы просто добавите к этим элементам класс .menu-button, и отображение этих элементов будет разным для устройств с разной шириной экрана.

[Dmitrii]

brud: Прошу прощения, вероятно я не до конца пояснил суть задачи. А если блоки разные? То есть, как я и написал в посте — "в ПРИНЦИПЕ разные"? Да, верно, LESS поможет на нужных устройствах показать одно и скрыть другое, но в HTML то эти блоки все равно останутся, т.к. они РАЗНЫЕ. Или нет?

[Dmitrii]

brud: pastebin.com/7YdMGVWV

[Антон]

Дмитpий: я ничего не скрывал в своем примере - блоки с классом menu-button никуда не деваются, просто при одной ширине экрана они выглядят как если бы к ним подставили классы hidden-xs и hidden-sm, а при большей - hidden-lg и hidden-md

[Dmitrii]

brud: Ну вот, а суть вопроса все же была в том, что именно в HTML-коде будет, скажем, два РАЗНЫХ меню (но с совпадающими ссылками), пользователю это будет все равно, а для поисковиков это норм? То, что информация задвоена/повторяется и т.д. Визуально у меня как раз таки вопросов не было, мне как раз понравилась эта штука, что на одних устройствах скрываем одно и показываем другое, а на других наоборот. Хотя за LESS спасибо, не пользовался. Но суть все же была именно в хтмле.

[Антон]

Дмитpий: я до сих пор не понял, зачем вам два РАЗНЫХ меню, если ссылки совпадают, то логически меню одинаковы, и дублировать их смысла нет.

Возможна ситуация, когда какой-то блок будет показываться только на мобильной версии, или наоборот, но ведь есть блок:

Текст или код, который нужно исключить из индексации

Я не очень силен в SEO, но мне кажется, это не настолько критичный вопрос, что бы заострять на нем внимение

[Антон]

Парсер опять издевается - вот ссылка https://ru.wikipedia.org/wiki/Noindex

[Dmitrii]

Антон: частично совпадают, но, в целом, да, как то я забыл про noindex. В любом случае спасибо за содействие!!! Отмечу как решение.