Skip to main content

Разметка

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

Обзор

Bootstrap включает в себя несколько компонентов и вариантов для создания вашего проекта, в том числе упаковочной тары, мощной блочная система, гибкий медиа объект и aдаптивные полезные классы.

Контейнеры

Контейнеры являются самыми основными элементом разметки Bootstrap и необходим при использовании нашей блочной системы. Выбрать из aдаптивных, контейнер фиксированной ширины (то есть max-width изменения в каждой контрольной точке) или fluid-width (то есть 100% ширины всегда).

Хотя контейнеры могут быть вложенными, большинство макетов не требуют вложенного контейнера.

<div class="container">
  <!-- Содержание здесь -->
</div>

Для того чтобы растянуть контейнер по всей ширине используйте .container-fluid

<div class="container-fluid">
  ...
</div>

Адаптивные точки прерывания

Поскольку Bootstrap разработан, чтобы быть mobile first, мы используем небольшое количество медиа запросы для создания разумной точки прерывания для нашей разметки и интерфейсов. Эти точки в основном на основе минимальной ширины области просмотра и позволяют масштабировать элементы при изменении области просмотра.

Bootstrap в первую очередь используются следующие медиа колеблется—или запрос точки останова—в нашем источнике Sass файлы для нашего разметка, блочная система, и компоненты.

// Дополнительные небольшие устройства (портрет телефонах, менее 544px)
// Нет медиа запросов, так как это по умолчанию в Bootstrap

// Небольших устройств (альбомной телефоны, 544px и вверх)
@media (min-width: 544px) { ... }

// Устройствах среднего (планшеты, 768px и выше)
@media (min-width: 768px) { ... }

// Крупных устройств (настольных компьютеров, 992px и выше)
@media (min-width: 992px) { ... }

// Очень больших устройств (большие компьютеры, 1200px и выше)
@media (min-width: 1200px) { ... }

Так как мы пишем наш источник CSS в Sass, Все медиа запросы доступны через Sass примеси:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Пример использования:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

Мы изредка используем медиа запросы, которые идут в другую сторону (данный Размер экрана or smaller):

// Очень малые устройства (портрет телефонов, менее 544px)
@media (max-width: 543px) { ... }

// Небольших устройств (альбомной телефонов, меньше, чем 768px по)
@media (max-width: 767px) { ... }

// Устройствах среднего (планшеты, меньше, чем 992px)
@media (max-width: 991px) { ... }

// Крупных устройств (настольных компьютеров, меньше 1200px)
@media (max-width: 1199px) { ... }

// Очень крупных устройств (большие компьютеры)
// No media query since the extra-large breakpoint has no upper bound on its width

В очередной раз эти медиа запросы через Sass примеси:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

Мы также имеем медиа от минимальной точки прерывания и максимальное значение только для данного размера экрана:

// Очень малые устройства (портрет телефонов, менее 544px)
@media (max-width: 543px) { ... }

// Небольших устройств (альбомной телефоны, 544px и вверх)
@media (min-width: 544px) and (max-width: 767px) { ... }

// Устройствах среднего (планшеты, 768px и выше)
@media (min-width: 768px) and (max-width: 991px) { ... }

// Крупных устройств (настольных компьютеров, 992px и выше)
@media (min-width: 992px) and (max-width: 1199px) { ... }

// Очень больших устройств (большие компьютеры, 1200px и выше)
@media (min-width: 1200px) { ... }

Эти медиа запросы через Sass примеси:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

И, наконец, медиа, Что охватывает несколько точек прерывания ширины:

// Пример
// Средних устройствах (планшеты, 768px и выше) и больших устройств (настольных компьютеров, 992px и выше)
@media (min-width: 768px) and (max-width: 1199px) { ... }

В Sass mixin Для приведенного выше примера выглядят, как показано ниже:

@include media-breakpoint-between(md, lg) { ... }