Задача: прятать блок div
на маленьких экранах (расширение ниже <768px). Например, нам нужно спрятать большую картинку в мобильной версии сайта.
В предыдущей версии Twitter Bootstrap 2 для этого использовались классы .hidden-phone
, .hidden-tablet
и т.д. Но они устарели и в новой версии бутстрапа не доступны.
Для скрытия элементов при различных расширениях нужно использовать следующие классы:
Мобильные устройства (<768px) — .visible-xs
, .hidden-xs
Планшеты (768px — 992px) — .visible-sm
, .hidden-sm
Десктопы (992px — 1200px) — .visible-md
, .hidden-md
Большие экраны (>1200px) — .visible-lg
, .hidden-lg
Подробнее о классах в документации: http://getbootstrap.com/css/#responsive-utilities
Пример сокрытия блока с картинкой на устройствах с маленьким экраном:
<div class='hidden-xs hidden-sm'> <div class='big-image>...</div> </div>