Статья, в которой рассматриваются адаптивные (responsive) классы и классы, предназначенные для настройки видимости элементов при отправке веб-страницы на печать.

Адаптивные классы - это классы платформы Twitter Bootstrap 4, которые предназначены для управления видимостью элементов на определённых устройствах. Т.е. они позволяют переключать видимость указанных элементов в зависимости от текущей ширины рабочей области окна браузера (xs, sm, md, lg, xl). Принцип работы данных классов основан на использовании CSS-свойства display и media-запросов.

Адаптивные (responsive) классы обычно находят применение при создании сайтов, у которых макет на различных устройствах довольно сильно отличается и не может быть разработан только с помощью сетки платформы Twitter Bootstrap 4.

Адаптивные классы в Twitter Bootstrap 4 представлены в виде 2 групп.

К первой группе относятся классы .hidden-*-up (где *: xs, sm, md, lg или xl), которые предназначены для скрытия элемента на указанном устройстве, и на всех остальных, которые больше его.

Bootstrap 4 - Класс hidden-*-up

Например, класс .hidden-md-up скрывает элемент на средних (md), больших (lg), и очень больших (xl) устройствах.


Вторую группу составляют классы .hidden-*-down (где *: xs, sm, md, lg или xl), которые наоборот скрывают элемент на указанном устройстве, и на всех остальных, которые меньше его.

Bootstrap 4 - Класс hidden-*-down

Например, класс .hidden-md-down скрывает элемент на очень маленьких (xs), маленьких (sm), и средних (md) устройствах.


Twitter Bootstrap 4 позволяет комбинировать один класс .hidden-*-up с одним классом .hidden-*-down для того, чтобы отображать элемент на заданном интервале размеров рабочей области окна браузера.

Например, комбинация классов .hidden-sm-down (скрывает элемент на xs и sm) и .hidden-xl-up (скрывает элемент на xl) показывает элемент только на средних (md) и больших (lg) устройствах.

Bootstrap 4 - Комбинация классов hidden-sm-down и hidden-xl-up

Внимание: Использование нескольких .hidden-*-up классов или нескольких .hidden-*-down классов является избыточным и бессмысленным.
Примечание: в Twitter Bootstrap 4 нет адаптивных классов, предназначенных для скрытия элемента на определённом устройстве. Для того чтобы это выполнить необходимо использовать комбинацию классов .hidden-*-up и .hidden-*-down.
Устройство, на котором блок виден Адаптивные классы (класс)
xs .hidden-sm-up
sm .hidden-xs-down .hidden-md-up
md .hidden-sm-down .hidden-lg-up
lg .hidden-md-down .hidden-xl-up
xl .hidden-lg-down

Рассмотрим создание адаптивной разметки состоящей из 3 блоков с использованием классов .hidden-*-up и .hidden-*-down.

Bootstrap 4 - Пример создания адаптивной сетки с использованием классов hidden-*-down и hidden-*-up

<div class="container">
  <div class="row">
    <!-- A (скрыт на md, sm и xs) -->
    <div class="col-lg-3 hidden-md-down">...</div>
    <!-- 1 -->
    <div class="col-sm-12 col-md-8 col-lg-6">...</div>
    <!-- B (скрыт на md, sm и xs) -->
    <div class="col-lg-3 hidden-md-down">...</div>
    <!-- Контейнер для A* и B* (скрыт на lg и xl) -->
    <div class="col-sm-12 col-md-4 hidden-lg-up">
      <div class="row">
        <!-- A* -->
        <div class="col-sm-6 col-md-12">...</div>
        <!-- B* -->
        <div class="col-sm-6 col-md-12">...</div>
      </div>
    </div>
  </div>
</div>

Платформа Twitter Bootstrap 4 содержит специальные классы, с помощью которых можно настроить страницу (видимость элементов) для печати.

Первые три класса из этого набора (.visible-print-block, .visible-print-inline, .visible-print-inline-block) предназначены для скрытия элемента в браузере и отображения его в соответствующем виде (block, inline, inline-block) при печати.

Четвёртый класс .hidden-print выполняет обратное действие, он оставляет элемент видимым в браузере и скрывает его при печати.

Класс в браузере при печати
.visible-print-block скрыт виден (как display: block)
.visible-print-inline скрыт виден (как display: inline)
.visible-print-inline-block скрыт виден (как display: inline-block)
.hidden-print виден скрыт

Например, настроим видимость элементов для печати:

<!--Элемент виден в браузере, но скрыт при печати.-->
<nav class="hidden-print">...</nav>
<!--Элемент виден при печати и отображается как блочный. В браузере данный элемент скрыт.-->
<div class="visible-print-block">...</div>
<!--Элемент виден при печати и отображается как строчный. В браузере данный элемент скрыт.-->
<div class="visible-print-inline">...</div>