Skip to main content

Разметка

Варианты структурирования страниц с Bootstrap, включая глобальные стили, необходимые инструменты, блочная система и другие.

Адаптивные вспомогатели

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

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

Доступные классы

  • .hidden-*-up классы скрыть элемент, когда область просмотра на данном останова или шире. Например, .hidden-md-up скрывает элемент на средних, больших и сверхбольших экранах.
  • .hidden-*-down классы скрыть элемент, когда область просмотра на данном останова или меньше. Например, .hidden-md-down скрывает элемент на очень малых, малых и средних видовых экранов.
  • Нет явного “видимый”/”Показать” aдаптивный служебные классы; сделать элемент видимым, просто не скрывая его при этом размер точки останова.
  • Можно комбинировать один .hidden-*-up класс с .hidden-*-down класс, чтобы показать элемент только на заданном интервале размеров экрана. Например, .hidden-sm-down.hidden-xl-up показан элемент только на средних и больших экранах. Через несколько .hidden-*-up классы или нескольких .hidden-*-down занятия является излишним и бессмысленным.
  • Эти классы не пытайтесь вместить в менее распространенных случаях, когда видимость элемента не может быть выражено как один непрерывный диапазон размеров останова просмотра; вместо этого, вы должны использовать пользовательские CSS в таких случаях.
Дополнительные небольшие устройства Портрет телефонам (<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

Классы печати

Как и обычные адаптивные классы, используйте их для переключения содержания для печати.

Класс Браузер Печать
.visible-print-block Visible
(as display: block)
.visible-print-inline Visible
(as display: inline)
.visible-print-inline-block Visible
(as display: inline-block)
.hidden-print Visible

Тестовые сценарии

Измените размер вашего браузера или загрузки на различные устройствах для проверки реагирования служебных классов.

Зеленые галочки указывают, что элемент видимый в вашем текущем экране.

✔ Отображается на дополнительной небольшой Очень маленькие
✔ Видно на маленьких или узких Маленький или узкий
✔ Отображается на средний или узкий Средний или узкий
✔ Видимый на большие или узкие Большие или узкие

✔ Видно на маленьких или шире Небольшой или шире
✔ Отображается на средних или широких Средний или шире
✔ Видимый на большие или шире Большие или широкие
✔ Видны на очень большой Очень большая

✔ Ваши просмотра именно сверхмалые Вашего просмотра точно не очень маленькая
✔ Ваши просмотра именно небольшой Вашего просмотра точно не маленький
✔ Ваши просмотра именно средний Вашего просмотра точно не средний
✔ Ваши просмотра именно большие Вашего просмотра точно не большие
✔ Ваши просмотра точно очень большая Вашего просмотра точно не очень большой