Bootstrap 4 скрыть блок в мобильной версии – Как спрятать блок на маленьких экранах?

Содержание

Отображение элементов. Утилиты · 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 — Пример адаптивной разметки блока


<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

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

Обозначение

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

.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`
Скрыт только на 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

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

Обозначение

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

.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>

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

.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 07 мар. ’17 в 13:06 источник поделиться

qaru.site

Bootstrap 4 скрыть блок в мобильной версии – Как спрятать блок на маленьких экранах? — Toster.ru

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

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

Обозначение

Примеры

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

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

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

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

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

Display-классы Bootstrap

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

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

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

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

Обозначение

Примеры

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

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

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

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

Обозначение

Примеры

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

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

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

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

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

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

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

Добавить комментарий Отменить ответ

Рубрики

Рубрики

Bootstrap 4 скрыть блок в мобильной версии – Как спрятать блок на маленьких экранах? — Toster.ru

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

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

Обозначение

Примеры

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

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

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

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

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

Display-классы Bootstrap

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

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

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

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

Обозначение

Примеры

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

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

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

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

Обозначение

Примеры

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

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

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

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

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

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

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

Добавить комментарий Отменить ответ

Рубрики

Рубрики

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