Скрытие элемента в Bootstrap на малых экранах: col-sm-3

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

Для скрытия контента на экранах с разрешением менее 576 пикселей в Bootstrap используйте комбинацию классов: d-none d-sm-block. Класс d-none делает элемент невидимым, в то время как d-sm-block снова отображает его на экранах размером small (≥576px) и более.

Пример:

<div class="d-none d-sm-block">Этот элемент невидим на экранах менее 576px</div>

Таким образом, ваш элемент становится невидимым на экранах меньшей ширины и видимым на больших устройствах.

Управление видимостью элементов в зависимости от размера устройства

Ваш сайт может отображаться на устройствах самых различных размеров. Поэтому важно знать, как можно управлять видимостью элементов:

• Очень маленькие (xs): Используйте d-none, чтобы скрыть элементы на мобильных устройствах.
• Маленькие (sm): Воспользуйтесь d-sm-none, чтобы скрыть элементы на устройствах до 768 пикселей.
• Средние (md): С помощью d-md-none можно скрыть элементы на планшетах.
• Большие (lg) и очень большие (xl): Для скрытия элементов на крупных экранах используйте d-lg-none или d-xl-none.

Следование 12-колоночной сетке Bootstrap оказывается полезным для поддержания профессионального дизайна на различных экранах.

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

Давайте взглянем на иллюстрацию, показывающую, как работает скрытие элементов на маленьких устройствах при использовании Bootstrap:

🖥️ Большой экран:
["🌟 Видимый элемент", "🌟 Видимый элемент", "🌟 Видимый элемент"]

📱 Маленький экран:
["🌟 Видимый элемент", "🚫 Скрытый элемент", "🚫 Скрытый элемент"]

Обозначения:

• 🌟 свидетельствует о том, что элемент остаётся видимым.
• 🚫 указывает на элемент, который был скрыт на маленьких экранах.

Это позволяет понять, как это выглядит в Bootstrap:

**Применение**: 
- .d-none .d-sm-block (🚫 на 📱, 🌟 на 🖥️)
- .d-sm-none        (🚫 только на 📱)

Заключаем: Некоторые элементы "скрываются" на маленьких экранах.

Мастер-класс по адаптивным шаблонам

Для создания идеальной адаптивности важно уметь не только скрывать элементы, но и масштабировать содержимое таким образом, чтобы оно гармонично размещалось на экране.

Динамическое изменение размера и распределение пространства

Когда элементы скрыты, оставшимся элементам необходимо эффективно использовать доступное пространство:

<div class="col-6 col-sm-4">Этот элемент адаптивен на любых устройствах, кроме xs</div>
<div class="col-6 col-sm-4">Этот элемент всегда остаётся видимым</div>
<div class="col-sm-4 d-none d-sm-block">Скрыт на экранах xs, отображается начиная со sm</div>

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

Избегание неожиданного смещения

Для предотвращения нежелательного смещения элементов на устройствах различного размера следует правильно распределить колонки:

<div class="col-12 col-sm-6 col-lg-3">Размер этого элемента изменяется в зависимости от размера экрана</div>

Метод преобразования структуры

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

Что учитывать при миграции

В каждой версии Bootstrap существуют свои рекомендации и классы для управления отображением элементов. Версия 3 использует .hidden-xs, а версия 4 предпочитает .d-none. Руководства по миграции помогают выбрать подходящие классы.

Доступность для экранных читалок

Даже когда элементы становятся невидимыми для глаза, экранные читалки могут их "увидеть". Не забывайте использовать атрибуты ARIA или другие методы для контроля взаимодействия читалок с скрытым контентом.

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

1. Свойство отображения · Bootstrap v4.6
2. Сетка Bootstrap
3. Медиа-запросы для стандартных устройств | CSS-Tricks
4. Использование медиа-запросов – CSS: Каскадные таблицы стилей | MDN
5. Понимание работы модальных окон Bootstrap — SitePoint
6. Адаптивный веб-дизайн: что это такое и как его использовать — Smashing Magazine
7. Тестер дизайна адаптивных веб-сайтов | Media Genesis