Варианты структурирования страниц с 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 |
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 |
Измените размер вашего браузера или загрузки на различные устройствах для проверки реагирования служебных классов.
Зеленые галочки указывают, что элемент видимый в вашем текущем экране.