Система сетки

Используйте нашу мощную flexbox-сетку с мобильным приоритетом для создания макетов всех форм и размеров благодаря системе из двенадцати колонок, шести отзывчивым уровням по умолчанию, переменным и миксинам Sass, а также десяткам предопределенных классов.

На этой странице

Пример

Система сетки Bootstrap использует серию контейнеров, строк и колонок для верстки и выравнивания содержимого. Она построена на flexbox и полностью отзывчива. Ниже приведен пример и подробное объяснение того, как работает система сетки.

Новичок в flexbox или не знакомы с ним? Прочитайте это руководство по flexbox от CSS Tricks для ознакомления с основами, терминологией, рекомендациями и фрагментами кода.

Колонка

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      Колонка
    </div>
    <div class="col">
      Колонка
    </div>
    <div class="col">
      Колонка
    </div>
  </div>
</div>

Приведенный выше пример создает три колонки одинаковой ширины на всех устройствах и окнах просмотра, используя наши предопределенные классы сетки. Эти колонки центрируются на странице с помощью родительского .container.

Как это работает

Разбирая по частям, вот как работает система сетки:

Наша сетка поддерживает шесть отзывчивых контрольных точек. Контрольные точки основаны на медиа-запросах min-width, что означает, что они влияют на эту контрольную точку и все выше нее (например, .col-sm-4 применяется к sm, md, lg, xl и xxl). Это означает, что вы можете управлять размером и поведением контейнеров и колонок на каждой контрольной точке.
Контейнеры центрируют и добавляют горизонтальные отступы к вашему содержимому. Используйте .container для отзывчивой ширины в пикселях, .container-fluid для width: 100% на всех окнах просмотра и устройствах, или отзывчивый контейнер (например, .container-md) для комбинации плавной и пиксельной ширины.
Строки являются обертками для колонок. Каждая колонка имеет горизонтальные padding (называемые желобом) для управления пространством между ними. Эти padding затем компенсируются в строках отрицательными отступами, чтобы содержимое в ваших колонках было визуально выровнено по левому краю. Строки также поддерживают классы-модификаторы для единообразного применения размеров колонок и классы желобов для изменения расстояний вашего содержимого.
Колонки невероятно гибкие. На каждую строку доступно 12 шаблонных колонок, что позволяет создавать различные комбинации элементов, охватывающих любое количество колонок. Классы колонок указывают количество шаблонных колонок для охвата (например, col-4 охватывает четыре). width устанавливаются в процентах, так что у вас всегда одинаковые относительные размеры.
Желоба также отзывчивы и настраиваемы. Классы желобов доступны на всех контрольных точках с теми же размерами, что и наши отступы и поля. Изменяйте горизонтальные желоба с классами .gx-*, вертикальные желоба с .gy-* или все желоба с классами .g-*. .g-0 также доступен для удаления желобов.
Переменные, карты и миксины Sass питают сетку. Если вы не хотите использовать предопределенные классы сетки в Bootstrap, вы можете использовать наш исходный Sass сетки для создания собственной с более семантической разметкой. Мы также включаем некоторые пользовательские свойства CSS для использования этих переменных Sass для еще большей гибкости.

Помните об ограничениях и ошибках в flexbox, таких как невозможность использовать некоторые HTML-элементы в качестве flex-контейнеров.

Опции сетки

Система сетки Bootstrap может адаптироваться ко всем шести контрольным точкам по умолчанию и любым контрольным точкам, которые вы настроите. Шесть уровней сетки по умолчанию:

Очень маленькие (xs)
Маленькие (sm)
Средние (md)
Большие (lg)
Очень большие (xl)
Очень-очень большие (xxl)

Как отмечалось выше, каждая из этих контрольных точек имеет свой контейнер, уникальный префикс класса и модификаторы. Вот как сетка изменяется на этих контрольных точках:

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Контейнер `max-width`	Нет (авто)	540px	720px	960px	1140px	1320px
Префикс класса	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
Количество колонок	12
Ширина желоба	1.5rem (по .75rem слева и справа)
Пользовательские желоба	Да
Вложение	Да
Порядок колонок	Да

Колонки с автоматической версткой

Используйте классы колонок для конкретных контрольных точек для легкого изменения размера колонок без явного нумерованного класса, такого как .col-sm-6.

Одинаковая ширина

Например, вот два макета сетки, которые применяются ко всем устройствам и окнам просмотра, от xs до xxl. Добавьте любое количество классов без единиц для каждой нужной контрольной точки, и каждая колонка будет одинаковой ширины.

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Установка ширины одной колонки

Автоматическая верстка для колонок flexbox-сетки также означает, что вы можете установить ширину одной колонки и автоматически изменять размер соседних колонок вокруг нее. Вы можете использовать предопределенные классы сетки (как показано ниже), миксины сетки или встроенные ширины. Обратите внимание, что другие колонки будут изменять размер независимо от ширины центральной колонки.

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Переменная ширина содержимого

Используйте классы col-{breakpoint}-auto для размещения колонок на основе естественной ширины их содержимого.

1 of 3

Содержимое переменной ширины

3 of 3

1 of 3

Содержимое переменной ширины

3 of 3

html

<div class="container text-center">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Содержимое переменной ширины
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Содержимое переменной ширины
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Отзывчивые классы

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

Все контрольные точки

Для сеток, которые одинаковы от самых маленьких до самых больших устройств, используйте классы .col и .col-*. Укажите нумерованный класс, когда вам нужна колонка определенного размера; в противном случае можете спокойно придерживаться .col.

col

col-8

col-4

html

<div class="container text-center">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

От вертикального к горизонтальному

Используя один набор классов .col-sm-*, вы можете создать базовую систему сетки, которая начинается с вертикального расположения и становится горизонтальной на маленькой контрольной точке (sm).

col-sm-8

col-sm-4

col-sm

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

Смешивание и сочетание

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

.col-md-8

.col-6 .col-md-4

.col-6

html

<div class="container text-center">
  <!-- Складываем колонки на мобильных устройствах, сделав одну полной ширины, а другую половинной ширины -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Колонки начинаются с 50% ширины на мобильных устройствах и увеличиваются до 33.3% на десктопе -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Колонки всегда 50% ширины как на мобильных устройствах, так и на десктопе -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Строчные колонки

Используйте отзывчивые классы .row-cols-* для быстрой установки количества колонок, которое лучше всего отображает ваше содержимое и макет. В то время как обычные классы .col-* применяются к отдельным колонкам (например, .col-md-4), классы строчных колонок устанавливаются на родительском .row как ярлык. С .row-cols-auto вы можете придать колонкам их естественную ширину.

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

Column

html

<div class="container text-center">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Column

html

<div class="container text-center">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Column

html

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Column

html

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Column

html

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Column

html

<div class="container text-center">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Вы также можете использовать сопутствующий миксин Sass row-cols():

.element {
  // Три колонки для начала
  @include row-cols(3);

  // Пять колонок начиная со средней контрольной точки
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Вложение

Чтобы вложить ваше содержимое с сеткой по умолчанию, добавьте новую .row и набор колонок .col-sm-* внутрь существующей колонки .col-sm-*. Вложенные строки должны включать набор колонок, которые в сумме составляют 12 или меньше (не обязательно использовать все 12 доступных колонок).

Уровень 1: .col-sm-3

Уровень 2: .col-8 .col-sm-6

Уровень 2: .col-4 .col-sm-6

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
      Уровень 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Уровень 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Уровень 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

CSS

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

Sass переменные

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

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

scss/_variables.scss

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

scss/_variables.scss

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Sass миксины

Миксины используются совместно с переменными сетки для генерации семантического CSS для отдельных колонок сетки.

// Создает обертку для серии колонок
@include make-row();

// Подготавливает элемент для сетки (применяет все, кроме ширины)
@include make-col-ready();

// Без опциональных значений размера миксин создаст равные колонки (аналогично использованию .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Смещение с отступами
@include make-col-offset($size, $columns: $grid-columns);

Пример использования

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

.example-container {
  @include make-container();
  // Обязательно определите эту ширину после миксина, чтобы переопределить
  // `width: 100%`, генерируемые `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Основное содержимое

Вторичное содержимое

html

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Основное содержимое</div>
    <div class="example-content-secondary">Вторичное содержимое</div>
  </div>
</div>

Настройка сетки

Используя наши встроенные переменные и карты Sass сетки, можно полностью настроить предопределенные классы сетки. Измените количество уровней, размеры медиа-запросов и ширину контейнеров — затем перекомпилируйте.

Колонки и желоба

Количество колонок сетки можно изменять через переменные Sass. $grid-columns используется для генерации ширин (в процентах) каждой отдельной колонки, а $grid-gutter-width устанавливает ширину желобов колонок. $grid-row-columns используется для установки максимального количества колонок .row-cols-*, любое число сверх этого лимита игнорируется.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

Уровни сетки

Выходя за пределы самих колонок, вы также можете настроить количество уровней сетки. Если вы хотите только четыре уровня сетки, вы должны обновить $grid-breakpoints и $container-max-widths примерно так:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

При внесении любых изменений в переменные или карты Sass вам нужно сохранить свои изменения и перекомпилировать. Это выведет совершенно новый набор предопределенных классов сетки для ширин колонок, смещений и упорядочивания. Утилиты отзывчивой видимости также будут обновлены для использования пользовательских контрольных точек. Обязательно устанавливайте значения сетки в px (не rem, em или %).