Cмотреть на GitHub

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

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

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

Пример

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

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

Одна из трёх колонок

<div class="container">
  <div class="row">
    <div class="col-sm">
      Одна из трёх колонок
    </div>
    <div class="col-sm">
      Одна из трёх колонок
    </div>
    <div class="col-sm">
      Одна из трёх колонок
    </div>
  </div>
</div>

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

Как это устроено

Разберём как работает сеточная система:

Наша сетка поддерживает шесть отзывчивых контрольных точек. Контрольные точки основаны на медиа-запросах min-width, то есть они влияют на эту точку останова и на все те, которые находятся над ней (например, .col-sm-4 и применяется к 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 в качестве гибких контейнеров.

Параметры сетки

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

Очень маленький - Extra small (xs)
Маленький - Small (sm)
Средний - Medium (md)
Большой - Large (lg)
Очень большой - Extra large (xl)
Огромный - Extra extra large (xxl)

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

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Контейнер `max-width`	None (auto)	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

<div class="container">
  <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>

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

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

1 of 3

2 of 3 (широкая)

3 of 3

1 of 3

2 of 3 (широкая)

3 of 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (широкая)
    </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 (широкая)
    </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

<div class="container">
  <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 включает 6 «ярусов» предопределенных классов, используемых для построения сложного адаптивного контента. Адаптируйте размеры своих колонок для правильного их отображения на всех видах и размерах устройств.

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

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

col

col-8

col-4

<div class="container">
  <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

<div class="container">
  <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

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <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>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <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>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <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 вы можете придать столбцам их естественную ширину.

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

Колонка

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

Колонка

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

Колонка

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

Колонка

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

Колонка

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Колонка</div>
    <div class="col">Колонка</div>
    <div class="col-6">Колонка</div>
    <div class="col">Колонка</div>
  </div>
</div>

Колонка

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Колонка</div>
    <div class="col">Колонка</div>
    <div class="col">Колонка</div>
    <div class="col">Колонка</div>
  </div>
</div>

Колонка

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Колонка</div>
    <div class="col">Колонка</div>
    <div class="col">Колонка</div>
    <div class="col">Колонка</div>
    <div class="col">Колонка</div>
    <div class="col">Колонка</div>
    <div class="col-4 col-lg-2">Колонка</div>
    <div class="col-4 col-lg-2">Колонка</div>
    <div class="col-4 col-lg-2">Колонка</div>
    <div class="col-4 col-lg-2">Колонка</div>
    <div class="col-4 col-lg-2">Колонка</div>
    <div class="col-4 col-lg-2">Колонка</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 возможных колонок).

Level 1: .col-sm-3

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Sass

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

Переменные

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

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

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

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

Примеси

Миксины используются в сочетании с переменными сеток для генерации семантического 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);
  }
}

Главное содержимое

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

<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-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

Уровни сетки

Вы может также настроить число ярусов сеток. Если вы хотите, к примеру, 4 яруса, настройте $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 или %).