Skip to content
Bootstrap

При выборе создания сайта на основе фреймворка bootstrap, оптимизированного под мобильные устройства, удобно использовать адаптивные классы для отображения и скрытия элементов в зависимости ширины экрана.

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

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

Официальный мануал — https://getbootstrap.com/docs/5.0/utilities/display/

Размер экрана Class
Скрыть везде .d-none
Скрыто только на xs
(смартфоны <576px)
.d-none .d-sm-block
Скрыто только на sm
(гориз. смартфоны ≥576px)
.d-sm-none .d-md-block
Скрыто только на md
(планшеты <768px)
.d-md-none .d-lg-block
Скрыто только на lg
(декстопы <992px)
.d-lg-none .d-xl-block
Скрыто только на xl
(декстопы <1200px)
.d-xl-none .d-xxl-block
Скрыто только на xxl
(декстопы <1400px)
.d-xxl-none
Показывать везде .d-block
Показывать только на xs
(смартфоны >576px)
.d-block .d-sm-none
Показывать только на sm
(гор. смартфоны >576px и <768px)
.d-none .d-sm-block .d-md-none
Показывать только на md
(планшеты >768px и <992px)
.d-none .d-md-block .d-lg-none
Показывать только на lg
(десктопы >992px и <1200px)
.d-none .d-lg-block .d-xl-none
Показывать только на xl
(десктопы >1200px и <1400px)
.d-none .d-xl-block .d-xxl-none
Показывать только на xxl
(десктопы >1400px)
.d-none .d-xxl-block

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Back To Top