Bootstrap 4 - Управление отображением элементов

Александр Мальцев
Александр Мальцев
54K
18
Bootstrap 4 - Управление отображением элементов
Содержание:
  1. Display-классы Bootstrap
  2. Примеры работы с display-классами
  3. Классы, управляющие видимостью элементов при печати
  4. Комментарии

В этой статье познакомимся с классами фреймворка Bootstrap 4, которые предназначены для адаптивного управления CSS свойством display HTML элементов.

Display-классы Bootstrap

В Bootstrap 4 имеется категория классов, с помощью которых можно не только адаптивно скрывать элементы, но и управлять тем как они должны быть показаны на странице.

Список display-классов Bootstrap 4:

  • d-none
  • d-inline
  • d-inline-block
  • d-block
  • d-table
  • d-table-cell
  • d-flex
  • d-inline-flex

Первый класс (d-none) предназначен для скрытия элемента на странице. Осуществляет это он посредством установки HTML элементу CSS свойства display со значение none.

Остальные классы управляют тем, как элемент должен быть представлен на странице. Класс d-inline представляет элемент строчным (display: inline), d-block – блочным (display: block), d-inline-block - строчно-блочным (display: inline-block), d-table – таблицой (display: table), d-table-cell – ячейкой таблицы (display: table-cell), d-flex – блочным flex-контейнером (display: flex), d-inline-flex - строчным flex-контейнером (display: inline-flex).


Кроме этого фреймворк Bootstrap 4 позволяет управлять CSS свойством display HTML элементов адаптивно. Это означает, что HTML элемент при одной ширине viewport может отображаться одним образом, а при другой – по-другому.

Синтаксис display-класса Bootstrap 4:

d{-breakpoint}-?

В данном классе нужно вместо:

  • breakpoint указать название контрольной точки (sm, md, lg, xl), начиная с которой будет применяться указанное CSS свойство display к HTML элементу (без обозначения - начиная с самых крохотных устройств).
  • ? задать одно из значений: none, inline, inline-block, block, table, table-cell, flex, inline-flex.

Список всех display-классов Bootstrap 4:

  • d-none
  • d-inline
  • d-inline-block
  • d-block
  • d-table
  • d-table-cell
  • d-flex
  • d-inline-flex
  • d-sm-none
  • d-sm-inline
  • d-sm-inline-block
  • d-sm-block
  • d-sm-table
  • d-sm-table-cell
  • d-sm-flex
  • d-sm-inline-flex
  • d-md-none
  • d-md-inline
  • d-md-inline-block
  • d-md-block
  • d-md-table
  • d-md-table-cell
  • d-md-flex
  • d-md-inline-flex
  • d-lg-none
  • d-lg-inline
  • d-lg-inline-block
  • d-lg-block
  • d-lg-table
  • d-lg-table-cell
  • d-lg-flex
  • d-lg-inline-flex
  • d-xl-none
  • d-xl-inline
  • d-xl-inline-block
  • d-xl-block
  • d-xl-table
  • d-xl-table-cell
  • d-xl-flex
  • d-xl-inline-flex

Примеры работы с display-классами

1. Создадим адаптивную разметку, состоящую из 3 секций (L, M и R). Секция L должна отображаться только на контрольной точке xl, а на остальных – скрыта.

Bootstrap 4 - Пример адаптивной разметки блока
Bootstrap 4 - Пример адаптивной разметки блока
<div class="container">
    <div class="row">
        <div class="col-xl-3 d-none d-xl-block">L</div>
        <div class="col-md-8 col-xl-6">M</div>
        <div class="col-md-4 col-xl-3">R</div>        
    </div>
</div>

2. Например, скроем некоторый HTML элемент на xs (крохотных устройствах), md и lg. На остальных контрольных точках (sm и xl) данный элемент будем отображать как блочный (display: block).

<div class="d-none d-sm-block d-md-none d-lg-block d-xl-none">
    ...
</div>

3. Например, рассмотрим, как можно осуществить скрытия элемента только на устройствах md.

<div class="d-md-none d-lg-block">
    ...
</div>

Классы, управляющие видимостью элементов при печати

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

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

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

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

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

<!-- элемент виден в браузере, но будет скрыт при печати -->
<nav class="d-print-none">...</nav>

<!-- элемент будет отображаться при печати как блочный (в браузере данный элемент скрыт) -->
<div class="d-print-block">...</div>

<!-- элемент будет отображаться при печати как строчный (в браузере данный элемент скрыт) -->
<div class="d-print-inline">...</div>

<!-- элемент будет отображаться при печати как строчно-блочный (в браузере данный элемент скрыт) -->
<div class="d-print-inline-block">...</div>

Комментарии:

  1. Вадим
    08 февраля 2020, 15:07
    Доброго времени суток Вам, добрый самаритянин!
    Делаю сайт на WP через плагин WPBakery
    Помогите пожалуйста в решении 3х вопросов:
    1. Там очень ограничена возможность адаптации через конструктор и при определенной величине экрана (sm) у меня три колонки очень неприятно «налазят» друг на друга и появляется нижний горизонтальный скролл:


    При этом, при дальнейшем уменьшении, все они «перескакивают» как нужно — в одну колонку.
    Нужно, чтобы они начали «перескакивать» раньше.

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


    Но проблема в том, что они начали также «налазить» друг на друга, но значительно раньше, чем в примере выше.



    Как можно средствами css сделать так, чтобы они «упирались» друг в друга и «перескакивали» одна под одну только тогда, когда полностью «скукожится» третья (пустая) колонка?

    3. Есть последовательность рядов с 2 колонками в каждом. Контент размещается так:



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



    т.е. в некоторых рядах (через один) менял свой стандартный порядок переноса?

    Заранее ОЧЕНЬ благодарю за помощь!
    1. Александр Мальцев
      08 февраля 2020, 15:39
      Привет! Чтобы детально разобраться с этой темой желательно почитать статью про CSS Flexbox и медиа-запросы.

      В персвом примере не используйте колонки, или позвольте им уменьшаться, добавив к ним класс flex-shrink-1.
      Например:
      <div class="d-flex">
        <div class="flex-shrink-1">1</div>
        <div class="flex-shrink-1">2</div>
        <div class="flex-shrink-1">3</div>
      </div>
      
      2. Если вёрстка сделана на CSS Flexbox, то нужно просто к этим элементам добавить CSS-свойство flex-shrink: 0 или бутстраповский класс flex-shrink-0.
      3. Использовать селектор, с помощью которого выбрать нужные ряды и добавить к ним определённые стили, например: «flex-direction: column».
      1. Вадим
        08 февраля 2020, 17:11
        А 3й вопрос можно подробнее? Пример какой-нибудь…
        1. Александр Мальцев
          18 февраля 2020, 07:34
          Пример, в котором показано как можно решить 3 вопрос:
          <style>
          /* на маленьких экранах распологаем блоки друг под другом */
          .row {
            flex-direction: column;
          }
          
          @media (min-width: 576px) {
            /* на больших экранах распологаем блоки друг за другом */
            .row {
              flex-direction: row;
            }
          
            /* выберем нечетные .row и изменим порядок 2 элемента, расположенного в нём */
            .row:nth-child(odd) > .col:nth-child(2) {
              order: -1;
            }
          }
          </style>
          ...
          
          <div class="container">
            <div class="row">
              <div class="col">Картинка</div>
              <div class="col">Текст</div>
            </div>
            <div class="row">
              <div class="col">Картинка</div>
              <div class="col">Текст</div>
            </div>
            ...
          </div>
          
    2. Олег
      03 февраля 2020, 17:08
      Здравствуйте, подскажите, как сделать так, чтобы таблица при печать на принтере не резалась внутри строки, а только по границе строк.

      1. Александр Мальцев
        04 февраля 2020, 13:46
        Здравствуйте! Попробуй использовать CSS-свойство page-break-inside, которое управляет разрывом страницы внутри элемента при печати.
        @media print {
          tr {
            page-break-inside: avoid;
          }
        }
        
      2. Гоша
        03 февраля 2020, 13:18
        Добрый день,
        подскажите как называется такая фишка:
        Есть длинный список (ul, p, div — неважно!) и показывают например первые 5 элементов списка, а остальные скрывают за ссылкой «Показать больше...». Нажимаешь и открывается полный список.
        Есть ли такое в Bootstrap? Или как это воплотить?
        1. Александр Мальцев
          03 февраля 2020, 16:00
          Здравствуйте! В Bootstrap есть такой компонент Collapse. Он позволяет переключать видимость контента.
          Для реализации этой задачи с помощью Collapse необходимо добавить стили, т.к. вам необходимо не полностью скрывать контент, а отображать некоторую его часть.
          Решение с помощью Collapse будет выглядеть следующим образом:
          <style>
          /* CSS */
          #more:not(.show) {
            display: block !important;
            max-height: 200px;
            overflow: hidden;
            position: relative;
          }
          
          #more.show {
            max-height: none;
          }
          </style>
          
          <button type="button" data-toggle="collapse" data-target="#more" class="btn btn-primary">
            Показать больше...
          </button>
          <div id="more" class="alert alert-info collapse">
            ...
          </div>
          
          Пример: b4-more

          Т.е. в этом примере мы ограничиваем видимость контента высотой в 200px с помощью max-height, а остальное скрываем с помощью «overflow: hidden». Далее при нажатии на кнопку отключаем ограничение по высоте с помощью «max-height: auto» (контент отображается полностью).

          Это решение на Bootstrap и добавлением нескольких стилей. Так необходимо или как-то по-другому?
          1. Гоша
            04 февраля 2020, 15:18
            ВАУ! Спасибо большое!
            Пару вопросов:
            1. Только логичнее после нажатия на «Показать больше...» эта надпись должна меняться на «Скрыть меньше...».
            2. Очень интересная и необычная для меня запись в style, а именно #more:not(.show)
            В стилях знаю что после точки указывают class="...", а тут явно не класс, а больше на метод объекта похож в ООП. Где про это почитать можно?
            1. Александр Мальцев
              05 февраля 2020, 15:24
              Пожалуйста! Обновил пример, приведённый выше. Изменение надписи в нем организовано без написания дополнительного JavaScript с использованием псевдоэлемента ::after и функции attr для CSS-свойства content.
              :not — это псевдокласс, более подробно познакомиться с ним и другими селекторами можете в этой статье.
              Ну это просто пример, Collapse предназначен для полного скрытия и отображения элемента, и наоборот. Поэтому его лучше не использовать для решения этой задачи.

              Эту задачу можно очень просто решить самостоятельно, для этого потребуется написать совсем небольшой скрипт.
              <button type="button" data-toggle="more" data-target="#more" class="btn btn-primary">Показать больше...</button>
              <div id="more" class="alert alert-info more">
                ...
              </div>
              
              <script>
                $(function () {
                  $(document).on('click', '[data-toggle="more"]', function () {
                    var target = $($(this).attr('data-target'));
                    target.toggleClass('show');
                    if (target.hasClass('show')) {
                      $(this).text('Показать меньше...');
                    } else {
                      $(this).text('Показать больше...');
                    }
                  })
                });
              </script>
              
              Пример: b4-more-2
        2. Антон
          04 октября 2018, 15:26
          Как через js определить отображен элемент или нет?
          1. Александр Мальцев
            06 октября 2018, 15:55
            Определение видимости элемента на jQuery осуществляется так:
            $(selector).is(':visible') 
            
            А проверить, скрыт ли элемент (display: none) можно так:
            $(selector).is(':hidden')
            
          2. Иван
            24 декабря 2017, 07:52
            Здравствуйте! Возникла необходимость в одной из колонок (col) на каждом разрешении экрана (sm, md, lg, xl) показывать разное изображение. Подскажите, пожалуйста, как решить данный вопрос?
            1. Александр Мальцев
              25 декабря 2017, 14:39
              Добрый день!
              Это можно выполнить разными способами.
              Например, с помощью вышеприведенных классов:
              <!-- Изображение для xs -->
              <img class="d-sm-none" src="img_for_xs.png">
              <!-- Изображение для sm -->
              <img class="d-none d-sm-inline-block d-md-none" src="img_for_sm.png">
              <!-- Изображение для md -->
              <img class="d-none d-md-inline-block d-lg-none" src="img_for_md.png">
              <!-- Изображение для lg -->
              <img class="d-none d-lg-inline-block d-xl-none" src="img_for_lg.png">
              <!-- Изображение для xl -->
              <img class="d-none d-xl-inline-block" src="img_for_xl.png">
              
              Но, этот пример не рекомендуется использовать. Т.к. в этом случае будут подгружены все изображения.

              Лучше воспользоваться одним из следующих способов.
              1 Способ (с помощью элемента picture):
              <picture>
                <source srcset="img_for_sm.png" media="(min-width:576px) and (max-width:767px)">
                <source srcset="img_for_md.png" media="(min-width:768px) and (max-width:991px)">
                <source srcset="img_for_lg.png" media="(min-width:992px) and (max-width: 1199px)">
                <source srcset="img_for_xl.png" media="(min-width:1200px)">
                <source srcset="img_for_xs.png">
                <img src="img_for_xs.png" alt="...">
              </picture>
              
              2 Способ (с помощью background):
              <div class="container">
                  <div class="row">
                      <div class="col-6 img-resp"></div>
                  </div>
              </div>
              
              CSS:
              .img-resp {
                  background-image: url('img_for_xs.png');
                  background-repeat: no-repeat;
                  background-size: cover;
                  height: 200px;
              }
              @media (min-width: 576px) {
                  .img-resp {
                      background-image:url('img_for_sm.png');
                  }
              }
              @media (min-width: 768px) {
                  .img-resp {
                      background-image:url('img_for_md.png');
                  }
              }
              @media (min-width: 992px) {
                  .img-resp {
                      background-image:url('img_for_lg.png');
                  }
              }
              @media (min-width: 1200px) {
                  .img-resp {
                      background-image:url('img_for_xl.png');
                  }
              }
              
              Можно также это ещё выполнить с помощью JavaScript.
            2. ctac
              07 ноября 2017, 11:40
              не писал бы в тему, но контактов не нашел.
              шапка на этой странице явно «поломана». Может стоит проверить?!
              1. Александр Мальцев
                07 ноября 2017, 18:14
                Пришлите пожалуйста скриншот шапки на admin@itchief.ru.
              2. ctac
                07 ноября 2017, 11:38
                Как обычно спасибо за статью. Но пару вопросов

                <div class="container">
                    <div class="row">
                        <div class="col-xl-3 d-none <s>d-xl-block</s>">L</div>
                        <div class="col-md-8 col-xl-6">M</div>
                        <div class="col-md-4 col-xl-3">R</div>        
                    </div>
                </div>
                чем будут примеры отличаться от этого и того что написали вы? не совсем понимаю что дал этот атрибут.

                это предложение точно правильное?
                2. Например, скроем некоторый HTML элемент на xs (крохотных устройствах), md и lg. На остальных контрольных точках (sm и xl) данный элемент будем отображать как блочный (display: block).

                ведь extrasmall ex в бс4 уже не используют!?
                1. Александр Мальцев
                  07 ноября 2017, 18:10
                  В Bootstrap 4 extra small никуда не исчез. Просто классы, ассоциированные с ним, указываются вообще без префикса. Например, класс d-none скрывает
                  элемент для extra small и выше. А, например, класс d-sm-none скрывает
                  элемент для small и выше.

                  Пример:
                  <div class="col-xl-3 d-none d-xl-block">L</div>
                  В этом примере класс d-xl-block нужен для того, чтобы этот адаптивный блок был виден на контрольной точке XL. Если его не указать, то он не будет отображаться, не на каких контрольных точках (т.к. установлен d-none). Класс col-xl-3 устанавливает ему ширину, но не управляет его видимостью.
                Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.