Основные правила разметки Bootstrap 3 - скрываем блоки

24.06.2020

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

Необходимо использовать эти классы, а не создавать свои. Используйте их, чтобы облегчить себе работу и получать преимущества инструментов Bootstrap.

 

  • .hidden-*-up классы скрыть элемент, когда область просмотра на данном устройстве шире. Например, .hidden-md-up скрывает элемент на средних, больших и сверхбольших экранах.
  • .hidden-*-down классы скрыть элемент, когда область просмотра на данном устройстве меньше. Например, .hidden-md-down скрывает элемент на очень малых, малых и средних устройствах.
  • Можно комбинировать один .hidden-*-up класс с .hidden-*-down класс, чтобы показать элемент только на заданном интервале размеров экрана. Например, .hidden-sm-down.hidden-xl-up показан элемент только на средних и больших экранах. Использование нескольких .hidden-*-up классов или нескольких .hidden-*-down это занятия является излишним и бессмысленным.

 

  Дополнительные небольшие устройства Портрет телефонам (<544px) Небольшие устройства Ландшафтный телефонов (≥544px - <768px по) Средние устройства Планшеты (≥768px по - <992px) Большие устройства Настольные компьютеры (≥992px - <1200px) Устройства с большим экраном Настольные (≥1200px)
.hidden-xs-down Visible Visible Visible Visible
.hidden-sm-down Visible Visible Visible
.hidden-md-down Visible Visible
.hidden-lg-down Visible
.hidden-xl-down
.hidden-xs-up
.hidden-sm-up Visible
.hidden-md-up Visible Visible
.hidden-lg-up Visible Visible Visible
.hidden-xl-up Visible Visible Visible Visible

 

Для удобства верстки можно использовать маленикй код, разместив его на сайте.

<div class="bootstrap-informer">
    <span class="d-block d-sm-none">XS</span>
    <span class="d-none d-sm-block d-md-none">SM</span>
    <span class="d-none d-md-block d-lg-none">MD</span>
    <span class="d-none d-lg-block d-xl-none">LG</span>
    <span class="d-none d-xl-block">XL</span>
</div>
<style>
    .bootstrap-informer {
        width: 50px;
        height: 50px;
        position: fixed;
        background: #de9452;
        bottom: 0;
        right: 0;
        text-align: center;
        line-height: 50px;
        font-weight: bold;
    }
</style>

Данный код выведет префикс используемого класса для текущего расширения.

Преимущества продвижения сайта у нас

Каждый третий клиент приходит по рекомендации
Каждый третий клиент
приходит по рекомендации
7 лет успешной работы
7 лет успешной работы
на рынке интернет-маркетинга и web-разработки
Более 70 клиентов
Более 70 клиентов
знают, что такое эффективная раскрутка
Более 800 000 посетителей
Более 800 000 посетителей
приходят на сайты ежемесячно