Отображение элементов. Утилиты · Bootstrap. Версия v4.0.0

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

Как это устроено

Изменяйте значение свойства display с помощью наших обычных отзывчивых классов отображения. Мы намеренно поддерживаем только поднабор всех возможных значений свойства display. Классы можно комбинировать для создания различных эффектов, как вам надо.

Обозначение

Классы отображения, которые подходят всем брейкпойнтам, от xs до xl, не имеют в своем названии аббревиатуры брейкпойнта, т.к. эти классы применяются, начиная от min-width: 0; и выше, и т.о., не «связаны» медиа-запросами. Оставшиеся брейкпойнты, однако, включают подобные аббревиатуры брейкпойнта.

Поэтому классы называются по формату:

  • .d-{value} для xs
  • .d-{breakpoint}-{value} для sm, md, lg и xl.

Где значение – это одно из:

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

Медиа-запросы влияют на ширину экрана, начиная с указаннного брейкпонта или больше. Например, .d-lg-none задает display: none; на обоих lg и xl.

Примеры

<div>d-inline</div>
<div>d-inline</div>

d-block d-block

<span>d-block</span>
<span>d-block</span>

Скрытие элементов

Для быстрой мобил-френдли веб-разработки используйте отзывчивые классы для показа и скрытия элементов на устройстве. Избегайте создания совершенно разных версий сайта, вместо того, чтобы просто «отзывчиво» прятать элемент для каждого размера экрана.

Чтобы скрыть элементы, используйте класс .d-none или один из классов .d-{sm,md,lg,xl}-none.

Для показа элемента только на определенном инвервале размеров экрана вы можете сочетать один класс .d-*-none с классом .d-*-*, например .d-none .d-md-block .d-xl-none скроет элемент на всех размерах экрана, кроме средних и больших.

Размер экрана Класс
Скрыт на всех .d-none
Скрыт только на xs .d-none .d-sm-block
Скрыт только на sm .d-sm-none .d-md-block
Скрыт только на md .d-md-none .d-lg-block
Скрыт только на lg .d-lg-none .d-xl-block
Скрыт только на xl .d-xl-none
Виден на всех .d-block
Виден только на xs .d-block .d-sm-none
Виден только на sm .d-none .d-sm-block .d-md-none
Виден только на md .d-none .d-md-block .d-lg-none
Виден только на lg .d-none .d-lg-block .d-xl-none
Виден только на xl .d-none .d-xl-block

Скрыто на экранах шире lg

Скрыто на экранах меньше lg

<div>Скрыто на экранах шире lg</div>
<div>Скрыто на экранах меньше lg</div>

Отображение при печати

Измените атрибут display элементов при печати с помощью наших классов. Сюда входит поддержка таких же значений display, как в наших отзывчивых классах .d-*.

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

Классы печати и отображения можно сочетать.

Только экран (Скрыто только для печати)

Только печать (Скрыто только на экране)

Скрыть до больших экранов, но всегда отображается для печати

<div>Только экран (Скрыто только для печати)</div>
<div>Только печать (Скрыто только на экране)</div>
<div>Скрыть до больших экранов, но всегда отображается для печати</div>

bootstrap-4.ru

Классы visible-** и hidden-** в Bootstrap 4 / Тяпк

Классы hidden-* и visible-* убраны в Bootstrap 4.

Чтобы скрыть элемент используйте d-none класс или d-{sm,md,lg,xl}-none класс для соответствующего брейкпоинта. Отдельного xs нет, так как он используется по-умолчанию.

Чтобы показать элемент но определённом брейкпоинте следует объеденить один из .d-*-none классов c .d-*-* классами, например .d-none .d-md-block .d-xl-none скроет элемент для всех размеров экрана, за исключением md и lg.

Размер экрана Классы
Скрыть на всех .d-none
Скрыть только на xs .d-none .d-sm-block
Скрыть только на sm .d-sm-none .d-md-block
Скрыть только на md .d-md-none .d-lg-block
Скрыть только на lg .d-lg-none .d-xl-block
Скрыть только на xl .d-xl-none
Показать на всех .d-block
Показать только на xs .d-block .d-sm-none
Показать только на sm .d-none .d-sm-block .d-md-none
Показать только на md .d-none .d-md-block .d-lg-none
Показать только на lg .d-none .d-lg-block .d-xl-none
Показать только на xl .d-none .d-xl-block

Соответствие классам из Bootstrap 3

Show/hide for breakpoint and down:

hidden-xs-down = d-none d-sm-block hidden-sm-down = d-none d-md-block hidden-md-down = d-none d-lg-block hidden-lg-down = d-none d-xl-block

Show/hide for breakpoint and up:

hidden-xl-down = d-none (same as hidden)
hidden-xs-up = d-none (same as hidden)
hidden-sm-up = d-sm-none
hidden-md-up = d-md-none
hidden-lg-up = d-lg-none
hidden-xl-up = d-xl-none

Show/hide only for a single breakpoint:

hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down)
hidden-sm (only) = d-block d-sm-none d-md-block
hidden-md (only) = d-block d-md-none d-lg-block
hidden-lg (only) = d-block d-lg-none d-xl-block
hidden-xl (only) = d-block d-xl-none
visible-xs (only) = d-block d-sm-none
visible-sm (only) = d-none d-sm-block d-md-none
visible-md (only) = d-none d-md-block d-lg-none
visible-lg (only) = d-none d-lg-block d-xl-none
visible-xl (only) = d-none d-xl-block

tyapk.ru

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

Bootstrap 4 — Пример адаптивной разметки блокаBootstrap 4 - Пример адаптивной разметки блока

<div>
    <div>
        <div>L</div>
        <div>M</div>
        <div>R</div>        
    </div>
</div>

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


<div>
    ...
</div>

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


<div>
    ...
</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>...</nav>

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

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

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

itchief.ru

Отображение элементов. Утилиты · Bootstrap. Версия v4.1.3

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

Как это устроено

Изменяйте значение свойства display с помощью наших обычных отзывчивых классов отображения. Мы намеренно поддерживаем только поднабор всех возможных значений свойства display. Классы можно комбинировать для создания различных эффектов, как вам надо.

Обозначение

Классы отображения, которые подходят всем брейкпойнтам, от xs до xl, не имеют в своем названии аббревиатуры брейкпойнта, т.к. эти классы применяются, начиная от min-width: 0; и выше, и т.о., не «связаны» медиа-запросами. Оставшиеся брейкпойнты, однако, включают подобные аббревиатуры брейкпойнта.

Поэтому классы называются по формату:

  • .d-{value} для xs
  • .d-{breakpoint}-{value} для sm, md, lg и xl.

Где значение – это одно из:

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

Медиа-запросы влияют на ширину экрана, начиная с указаннного брейкпонта или больше. Например, .d-lg-none задает display: none; на обоих lg и xl.

Примеры

<div>d-inline</div>
<div>d-inline</div>

d-block d-block

<span>d-block</span>
<span>d-block</span>

Скрытие элементов

Для быстрой мобил-френдли веб-разработки используйте отзывчивые классы для показа и скрытия элементов на устройстве. Избегайте создания совершенно разных версий сайта, вместо того, чтобы просто «отзывчиво» прятать элемент для каждого размера экрана.

Чтобы скрыть элементы, используйте класс .d-none или один из классов .d-{sm,md,lg,xl}-none.

Для показа элемента только на определенном инвервале размеров экрана вы можете сочетать один класс .d-*-none с классом .d-*-*, например .d-none .d-md-block .d-xl-none скроет элемент на всех размерах экрана, кроме средних и больших.

Размер экрана Класс
Скрыт на всех .d-none
Скрыт только на xs .d-none .d-sm-block
Скрыт только на sm .d-sm-none .d-md-block
Скрыт только на md .d-md-none .d-lg-block
Скрыт только на lg .d-lg-none .d-xl-block
Скрыт только на xl .d-xl-none
Виден на всех .d-block
Виден только на xs .d-block .d-sm-none
Виден только на sm .d-none .d-sm-block .d-md-none
Виден только на md .d-none .d-md-block .d-lg-none
Виден только на lg .d-none .d-lg-block .d-xl-none
Виден только на xl .d-none .d-xl-block

Скрыто на экранах шире lg

Скрыто на экранах меньше lg

<div>Скрыто на экранах шире lg</div>
<div>Скрыто на экранах меньше lg</div>

Отображение при печати

Измените атрибут display элементов при печати с помощью наших классов. Сюда входит поддержка таких же значений display, как в наших отзывчивых классах .d-*.

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

Классы печати и отображения можно сочетать.

Только экран (Скрыто только для печати)

Только печать (Скрыто только на экране)

Скрыть до больших экранов, но всегда отображается для печати

<div>Только экран (Скрыто только для печати)</div>
<div>Только печать (Скрыто только на экране)</div>
<div>Скрыть до больших экранов, но всегда отображается для печати</div>

bootstrap-4.ru

Отображение элементов. Утилиты · Bootstrap

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

Как это устроено

Изменяйте значение свойства display с помощью наших обычных отзывчивых классов отображения. Мы намеренно поддерживаем только поднабор всех возможных значений свойства display. Классы можно комбинировать для создания различных эффектов, как вам надо.

Обозначение

Классы отображения, которые подходят всем брейкпойнтам, от xs до xl, не имеют в своем названии аббревиатуры брейкпойнта, т.к. эти классы применяются, начиная от min-width: 0; и выше, и т.о., не «связаны» медиа-запросами. Оставшиеся брейкпойнты, однако, включают подобные аббревиатуры брейкпойнта.

Поэтому классы называются по формату:

  • .d-{value} для xs
  • .d-{breakpoint}-{value} для sm, md, lg и xl.

Где значение – это одно из:

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

Медиа-запросы влияют на ширину экрана, начиная с указанного брейкпонта или больше. Например, .d-lg-none задает display: none; на обоих lg и xl.

Примеры

<div>d-inline</div>
<div>d-inline</div>

d-block d-block

<span>d-block</span>
<span>d-block</span>

Скрытие элементов

Для быстрой мобил-френдли веб-разработки используйте отзывчивые классы для показа и скрытия элементов на устройстве. Избегайте создания совершенно разных версий сайта, вместо того, чтобы просто «отзывчиво» прятать элемент для каждого размера экрана.

Чтобы скрыть элементы, используйте класс .d-none или один из классов .d-{sm,md,lg,xl}-none.

Для показа элемента только на определенном интервале размеров экрана вы можете сочетать один класс .d-*-none с классом .d-*-*, например .d-none .d-md-block .d-xl-none скроет элемент на всех размерах экрана, кроме средних и больших.

Размер экрана Класс
Скрыт на всех .d-none
Скрыт только на xs .d-none .d-sm-block
Скрыт только на sm .d-sm-none .d-md-block
Скрыт только на md .d-md-none .d-lg-block
Скрыт только на lg .d-lg-none .d-xl-block
Скрыт только на xl .d-xl-none
Виден на всех .d-block
Виден только на xs .d-block .d-sm-none
Виден только на sm .d-none .d-sm-block .d-md-none
Виден только на md .d-none .d-md-block .d-lg-none
Виден только на lg .d-none .d-lg-block .d-xl-none
Виден только на xl .d-none .d-xl-block

Скрыто на экранах шире lg

Скрыто на экранах меньше lg

<div>Скрыто на экранах шире lg</div>
<div>Скрыто на экранах меньше lg</div>

Отображение при печати

Измените атрибут display элементов при печати с помощью наших классов. Сюда входит поддержка таких же значений display, как в наших отзывчивых классах .d-*.

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

Классы печати и отображения можно сочетать.

Только экран (Скрыто только для печати)

Только печать (Скрыто только на экране)

Скрыть до больших экранов, но всегда отображается для печати

<div>Только экран (Скрыто только для печати)</div>
<div>Только печать (Скрыто только на экране)</div>
<div>Скрыть до больших экранов, но всегда отображается для печати</div>

bootstrap-4.ru

Адаптивные утилиты · Bootstrap на русском

Для более быстрой мобильных устройств развития, использовать эти классы для отображения и скрытия содержимого с устройства с помощью медиа запросов. Кроме того, включены утилиты классов для переключения содержимого при печати.

Попробовать использовать эти, а не создавать совершенно разные версии одного и того же сайта. Вместо этого используйте их, чтобы дополнить презентацию каждого устройства.

Доступные классы

  • .hidden-*-up классы скрыть элемент, когда область просмотра на данном останова или шире. Например, .hidden-md-up скрывает элемент на средних, больших и сверхбольших экранах.
  • .hidden-*-down классы скрыть элемент, когда область просмотра на данном останова или меньше. Например, .hidden-md-down скрывает элемент на очень малых, малых и средних видовых экранов.
  • Нет явного “видимый”/”Показать” aдаптивный служебные классы; сделать элемент видимым, просто не скрывая его при этом размер точки останова.
  • Можно комбинировать один .hidden-*-up класс с .hidden-*-down класс, чтобы показать элемент только на заданном интервале размеров экрана. Например, .hidden-sm-down.hidden-xl-up показан элемент только на средних и больших экранах. Через несколько .hidden-*-up классы или нескольких .hidden-*-down занятия является излишним и бессмысленным.
  • Эти классы не пытайтесь вместить в менее распространенных случаях, когда видимость элемента не может быть выражено как один непрерывный диапазон размеров останова просмотра; вместо этого, вы должны использовать пользовательские CSS в таких случаях.
Дополнительные небольшие устройства Портрет телефонам (<544px) Небольшие устройства Ландшафтный телефонов (≥544px — <768px по) Средние устройств Планшеты (≥768px по — <992px) Большие устройства Настольные компьютеры (≥992px — <1200px) Дополнительных устройств с большим Настольные (≥1200px)
.hidden-xs-down Hidden Visible Visible Visible Visible
.hidden-sm-down Hidden Hidden Visible Visible Visible
.hidden-md-down Hidden Hidden Hidden Visible Visible
.hidden-lg-down Hidden Hidden Hidden Hidden Visible
.hidden-xl-down Hidden Hidden Hidden Hidden Hidden
.hidden-xs-up Hidden Hidden Hidden Hidden Hidden
.hidden-sm-up Visible Hidden Hidden Hidden Hidden
.hidden-md-up Visible Visible Hidden Hidden Hidden
.hidden-lg-up Visible Visible Visible Hidden Hidden
.hidden-xl-up Visible Visible Visible Visible Hidden

Классы печати

Как и обычные адаптивные классы, используйте их для переключения содержания для печати.

Класс Браузер Печать
.visible-print-block Hidden Visible
(as display: block)
.visible-print-inline Hidden Visible
(as display: inline)
.visible-print-inline-block Hidden Visible
(as display: inline-block)
.hidden-print Visible Hidden

Тестовые сценарии

Измените размер вашего браузера или загрузки на различные устройствах для проверки реагирования служебных классов.

Зеленые галочки указывают, что элемент видимый в вашем текущем экране.

✔ Отображается на дополнительной небольшой Очень маленькие

✔ Видно на маленьких или узких Маленький или узкий

✔ Отображается на средний или узкий Средний или узкий

✔ Видимый на большие или узкие Большие или узкие


✔ Видно на маленьких или шире Небольшой или шире

✔ Отображается на средних или широких Средний или шире

✔ Видимый на большие или шире Большие или широкие

✔ Видны на очень большой Очень большая


✔ Ваши просмотра именно сверхмалые Вашего просмотра точно не очень маленькая

✔ Ваши просмотра именно небольшой Вашего просмотра точно не маленький

✔ Ваши просмотра именно средний Вашего просмотра точно не средний

✔ Ваши просмотра именно большие Вашего просмотра точно не большие

✔ Ваши просмотра точно очень большая Вашего просмотра точно не очень большой

getbootstrap.ru

Bootstrap 4 — скрытые классы — скрываются только на маленьких экранах — bootstrap-4

Существует следующее обновление для Bootstrap 4, которое позволит скрывать его в одном окне просмотра (hidden-x)..

https://github.com/twbs/bootstrap/pull/22113

В этом обновлении будут обновлены все классы видимости.


Обновление для бета-версии Bootstrap 4

Если вы хотите скрыть элемент на определенных уровнях (контрольных точках) в Bootstrap 4, используйте классы отображения d-* соответственно. Помните, что xs — это точка останова по умолчанию (всегда подразумеваемая), если она не переопределена большей точкой останова.

https://www.codeply.com/go/bRlHp8MxtJ

  • hidden-xs-down= d-none d-sm-block
  • hidden-sm-down= d-none d-md-block
  • hidden-md-down= d-none d-lg-block
  • hidden-lg-down= d-none d-xl-block
  • hidden-xl-down= d-none (так же, как hidden)
  • hidden-xs (only) = d-none d-sm-block (то же, что и hidden-xs-down)
  • hidden-sm (only) = d-block d-sm-none d-md-block
  • hidden-md (only) = d-block d-md-none d-lg-block
  • hidden-lg (only) = d-block d-lg-none d-xl-block
  • hidden-xl (only) = d-block d-xl-none

Демо всех скрытых/видимых классов в бета-версии Bootstrap 4

Также обратите внимание, что d-*-block можно заменить на d-*-inline, d-*-flex и т.д. в зависимости от типа отображения элемента. Подробнее о отображать классы в бета-версии

Zim источник поделиться

qaru.site