При выборе создания сайта на основе фреймворка 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