bootstrap 4 скрыть блок в мобильной версии

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

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

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

Обозначение

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

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

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

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

Примеры

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

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

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

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

Измените атрибут 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

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

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

Display-классы Bootstrap

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

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

Первый класс ( 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:

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

  • 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 — Пример адаптивной разметки блока

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

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

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

Во фреймворке 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 виден скрыт

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

При подключении bootstrap 4 текст разбивается на 2 колонки. Как сделать, чтобы при сжатии, например, к col-md вторая колонка пропадала и оставалась только первая.

2 ответа 2

Если хотите скрыть на xl, sm, md , то используйте .d-none .d-lg-block , что означает, что блок скрыт на разрешении xl, sm, md , но показан на lg

Понравилась статья? Поделиться с друзьями:
Vkontakte.INFO
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: