Скрытие элементов в адаптивном Bootstrap: меню и nav-pills

Быстрый ответ

Эффективно скрывать элементы на малых экранах помогут CSS медиа-запросы. Примените свойство display: none; – это простое и надежное решение:

@media (max-width: 600px) {
    .hide-on-mobile {
        display: none; // "Я вернусь... никогда!" – Терминатор
    }
}

Добавьте класс .hide-on-mobile к элементам вашего HTML, чтобы они скрылись на экранах шириной менее 600 пикселей:

<div class="hide-on-mobile">Сейчас вы меня видите... и вдруг... пропал...</div>

Этот ясный и результативный фрагмент кода приблизит вас к освоению идеального адаптивного дизайна.

Использование Bootstrap для управления видимостью элементов

В Bootstrap 4+ используйте классы d-* для гибкого управления видимостью элементов. Комбинация d-none d-md-block скроет элемент на очень малых и небольших экранах, в то время как на средних и более крупных экранах он останется видимым:

<div class="d-none d-md-block">Я исчезаю на самых малых экранах, как волшебство</div>

В соответствии с этим d-block d-md-none будет действовать в обратном порядке:

<div class="d-block d-md-none">Как скромный гость, я появляюсь только на небольших экранах</div>

В Bootstrap 5 добавили дополнительный функционал: используйте d-{value} для очень малых экранов и d-{breakpoint}-{value} для более крупных экранов. Учтите: для широких экранов xl подразумеваются устройства с разрешением более 1200 пикселей. Подробности вы найдете в обзоре отзывчивых утилит Bootstrap в документации.

Создание продвинутых визуальных и интерактивных эффектов

Примените интерактивные классы для управления видимостью

Оживите ваш дизайн с помощью Bootstrap collapse. Он помогает создать выпадающее меню для отображения скрытых элементов:

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#moreContent" aria-expanded="false">
    Показать больше
</button>
<div class="collapse" id="moreContent">
    Здесь дополнительное содержимое, но без спойлеров!
</div>

Подробнее об этом расскажет наш спикер на видео

Познакомьтесь с классами для адаптивности

Пора забыть о устаревших классах .visible-* и .hidden-* из Bootstrap 3 и перейти на современные, отвечающие за видимость на разных экранах. Используя классы вроде hidden-sm-down и hidden-xl-up, вы сможете точно настроить отображение элементов.

Сочетание CSS медиа-запросов и утилит Bootstrap может помочь вам создать универсальную верстку. При этом отказ от старых методов поможет вам поддерживать свою работу в актуальности и предотвратить потенциальные проблемы с видимостью элементов.

Используйте лучшие практики адаптивного дизайна

Следуйте руководствам по Bootstrap, чтобы создавать мощные, понятные и визуально привлекательные макеты для любых размеров экранов. Избегайте использования устаревших классов, таких как .visible-phone, .visible-desktop, чтобы следовать за изменениями в Bootstrap.

Изучите документацию Bootstrap, следите за последними рекомендациями по использованию адаптивных утилит и забудьте о старых методах.

Визуализация

Представьте ваш сайт как сцены, которые можно сравнить со сценическими занавесами (🎭):

На десктопе (🖥️): [🎭🎭🎭🎭🎭]

Все занавесы раскрыты – весь контент доступен.

На мобильном (📱): [🎭🚫🚫🚫🎭]

Некоторые занавесы закрыты, скрывая не основные элементы и фокусируясь на ключевом содержании.

Медиа-запросы регулируют занавесы – они подгоняют объем отображаемого контента под размеры экрана.

Создание продвинутых функций в вашем адаптивном дизайне

Всроить следующее в ваш дизайн:

• Слои: Как художник, используйте слои классов Bootstrap и медиа-запросов как слои картины. Эти инструменты дают гибкость, позволяя контенту становиться видимым или исчезать в нужные моменты.
• Тестирование: Проверяйте макеты на различных устройствах, чтобы сайт выглядел стабильно. Эмуляторы и инструменты для проверки адаптивности помогут вам оценить свою работу.
• Производительность: Запомните, что скрыть элементы не значит выключить их для браузера – он их все равно будет загружать. Поэтому используйте методы на стороне сервера или условную загрузку для оптимизации производительности вашего сайта.

Преодолейте возможные препятствия:

• Перекрытие классов: Будьте внимательны, чтобы предотвратить конфликт классов, который может привести к нежелательному отображению элементов. Системное именование и детальное тестирование избавят вас от этих проблем.
• Доступность: Скрин-ридеры могут озвучивать и скрытые элементы. Используйте атрибут aria-hidden="true", чтобы они проигнорировали такой контент.
• Точки перелома медиа-запросов: Проверьте, что ваши точки перелома соответствуют настройкам в Bootstrap для плавных переходов между размерами экранов. Обеспечьте пользователям гладко и комфортно переключать интерфейс.

Полезные материалы

1. Media Queries for Standard Devices | CSS-Tricks — подробное руководство по отзывчивому дизайну с медиа-запросами.
2. Using media queries – CSS: Cascading Style Sheets | MDN — официальная документация MDN по медиа-запросам.
3. Responsive Web Design Introduction — отличный базовый курс по адаптивному веб-дизайну.
4. Responsive Web Design – A List Apart — влиятельная статья о современном отзывчивом дизайне.
5. Responsive Web Design: What It Is And How To Use It — Smashing Magazine — руководство по грациозному отказу и прогрессивному улучшению в разработке отзывчивых сайтов.
6. Responsive Web Design – Learn to Code Advanced HTML & CSS — углубленный курс для полного погружения в адаптивный дизайн.
7. Web Design Blog | WDD — полный обзор всех аспектов адаптивного дизайна.

(Примечание: Некоторые ссылки могут быть неактивными и вести к страницам 404, указывая на неправильное направление. Некорректные ссылки исключены.)