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

Пример

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

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

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </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. Добавьте любое количество бесклассовых классов для каждой необходимой точки разрыва, и каждый столбец будет иметь одинаковую ширину.

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-сетки также означает, что вы можете установить ширину одного столбца и иметь соседние столбцы, автоматически подстраивающиеся вокруг него. Вы можете использовать предопределённые классы сетки (как показано ниже), миксины сетки или ширины в строке. Обратите внимание, что другие столбцы изменят размер независимо от ширины центрального столбца.

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 классы для задания размеров столбцов на основе естественной ширины их содержимого.

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">
      Variable width content
    </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">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Адаптивные классы

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

Все точки разрыва

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

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).

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>

Сочетание

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

html

<div class="container text-center">
  <!-- 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 вы можете дать столбцам их естественную ширину.

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

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>

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>

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>

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>

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>

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>

END_OF_DOCUMENT_MARKER

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

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Вложенность

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

html

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

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 для отдельных колонок сетки.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

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

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

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `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">Main content</div>
    <div class="example-content-secondary">Secondary content</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 или %).

© 2011–2022 Twitter, Inc.
© 2011–2022 The Bootstrap Authors
Code licensed under the MIT License.
Documentation licensed under the Creative Commons Attribution License v3.0.
https://getbootstrap.com/docs/5.3/layout/grid/