Скрытие элементов в адаптивных макетах Bootstrap

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

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

Видимые классы:

• .visible-xs-block: показывать на очень маленьких устройствах (телефонах)
• .visible-sm-block: показывать на маленьких устройствах (планшетах)
• .visible-md-block: показывать на средних устройствах (настольные компьютеры)
• .visible-lg-block: показывать на больших устройствах (настольные компьютеры)

Скрытые классы:

• .hidden-xs: скрыть на очень маленьких устройствах (телефонах)
• .hidden-sm: скрыть на маленьких устройствах (планшеты)
• .hidden-md: скрыть на средних устройствах (настольные компьютеры)
• .hidden-lg: скрыть на больших устройствах (настольные компьютеры)

Чтобы скрыть ваши навигационные таблетки на экранах меньшего размера, просто добавьте класс .hidden-xs в соответствующий контейнер.

...

В качестве альтернативы вы можете использовать класс "hidden-*-down", который скрывает элементы в указанной точке останова или меньше.

...

Не забудьте использовать «visible-*-up», если вы хотите отобразить элемент в указанной точке останова или шире.

Для получения дополнительной информации об адаптивных служебных классах Bootstrap обратитесь к их официальной документации по адресу http://getbootstrap.com. /css/#Response-Utilities.