Bootstrap 4 - Адаптивные (responsive) классы

Статья, в которой рассматриваются адаптивные (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>


   Bootstrap 0    6773 0

Комментарии (6)

  1. Илья # 0
    У меня вопрос — смотрю на BS4 и думаю — стоит ли переводить сайт с BS3, или в этом нет смысла, если сайт нормально работает на BS3.
    Ни у кого не было проблем с индексацией сайта на BS3?
    1. Александр Мальцев # 0
      Торопиться не стоит, тем более что Bootstrap 4 находится пока в состоянии alpha.
      Смысл будет, если в нём появятся очень хорошие компоненты, которых не будет хватать в Bootstrap 3.
    2. Виталий # 0
      А как включать видимость блока на устройстве? Ситуация такая:
      <div class="col-xs-12 hidden-sm-up hidden-lg-up">
      Мне нужно, чтобы блок был виден на устройствах с шириной «md». Какой класс включает видимость по аналогии с .visible-md-block в BS3?
      1. Александр Мальцев # 0
        В статье приведена эта табличка.
        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
        
        Т.е. чтобы скрыть класс на устройствах с блоком md, то необходимо:
        <div class="col-xs-12 hidden-sm-down hidden-lg-up">
          ...
        </div>
        
        А если необходимо перевести проект, то необходимо учитывать то, что в Bootstrap 4 больше классов, и md в Bootstrap 4 не соответсвует md в Bootstrap 3. Т.е. в Bootstrap 4 немного отличаются классы.
        xs (Bootstrap 3) == xs + sm (Bootstrap 4), sm (Bootstrap 3) == md (Bootstrap 4), и т.д. Это необходимо иметь в виду.
        Bootstrap 4: xs (<544px), sm (>=544px и <768px), md (>=768px и <992px), lg (>=992px и <1200px), xl (>=1200px).
        Bootstrap 3: xs (<768px), sm(>=768px и <992px), md (>=992px и <1200px), lg (>=1200px).

        Слева приведено название класса в Bootstrap 3, а в правой ему аналог в Bootstrap 4:
        visible-xs-block == hidden-md-up
        visible-sm-block == hidden-sm-down hidden-lg-up
        visible-md-block == hidden-md-down .hidden-xl-up
        visible-lg-block == hidden-lg-down
        
        1. Виталий # 0
          Большое спасибо за разъяснение. Но мне нужно включать видимость блока на устройствах xs и md, так что
          <div class="col-xs-12 hidden-sm-down hidden-lg-up">
          тоже не катит. На данный момент я решил задачу таким образом:
          <div class="col-xs-12 hidden-sm-up">
           <img src="whitebluelineXL.png">
          </div>
          <div class="col-md-12 hidden-lg-up hidden-sm-down">
           <img src="whitebluelineXL.png">
          </div>
          1. Александр Мальцев # 0
            Контент лучше не дублировать.
            Если такие ситуации на сайте встречаются довольно часто, то можно, например, в свой CSS добавить стили и скрывать блоки на каких угодно устройствах:
            @media (max-width: 543px) {
              .hidden-xs {
                display: none!important;
              }
            }
            @media (max-width: 767px) and (min-width: 544px) {
              .hidden-sm {
                display: none!important;
              }
            }
            @media (max-width: 991px) and (min-width: 768px) {
              .hidden-md {
                display: none!important;
              }
            }
            @media (max-width: 1199px) and (min-width: 992px) {
              .hidden-lg {
                display: none!important;
              }
            }
            @media (min-width: 1200px) {
              .hidden-xl {
                display: none!important;
              }
            }
            
            Тогда:
            <div class="col-xs-12 hidden-sm hidden-lg hidden-xl">
            

      Вы должны авторизоваться, чтобы оставлять комментарии.