Bootstrap 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, а на остальных – скрыта.

<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 выполняет обратное действие, он оставляет элемент видимым в браузере и скрывает его при печати.

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

<!-- элемент виден в браузере, но будет скрыт при печати -->
<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>