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

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

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

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

Если вы не знакомы с flexbox, то ознакомьтесь с руководством по флексбоксу CSS Tricks чтобы получить справочную информацию, термины, рекомендаций и фрагменты кода.

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

Вот небольшое объяснение работы Bootstrap 4:

• Инструмент для центровки контента сайта. Используйте класс .container для фиксированной ширины или .container-fluid для 100%-ной ширины.
• Ряды – это обертка для колонок. Каждая колонка имеет горизонтальный padding (называемый gutter) для контроля пространства между колонками. Этот padding (паддинг) влияет на ряды с отрицательным марджином. В этом случае все содержимое ваших колонок будет визуально центрировано внизу с левой стороны.
• Содержимое должно быть расположено в колонках, и только колонки могут быть расположены в рядах.
• Благодаря флексбоксу колонки сетки без установленного атрибута ширина автоматически получают равную ширину. Например, четыре экземпляра класса .col-sm автоматически (на малых контрольных точках) получат ширину одной колонки = 25%. Подробнее смотрите раздел Автоматическое расположение с помощью колонок.
• Цифры в наименовании классов колонок показывают, сколько колонок из 12-ти возможных в ряду вы бы хотели использовать. Так, если вы хотите использовать три колонки одной ширины, используйте .col-sm-4.
• Ширина колонок width задана в процентах, что позволяет колонкам быть гибкими и изменять размер относительно их родительского элемента.
• Колонки имеют горизонтальный паддинг padding для создания отступов между отдельными колонками, но вы можете удалить марджины margin из рядов и паддинги padding из колонок, добавив класс .no-gutters в .row.
• Есть 5 ярусов сеток, по одному для каждого «брейкпойнта»: все контрольные точки (экстра маленький), маленький, средний, большой и экстрабольшой.
• Ярусы сетки основаны на минимальной широте, т.е. они подходят для каждого вышестоящего яруса (т.е., .col-sm-4 подходит для маленьких, средних, больших и XL девайсов).
• Вы можете использовать предопределенные классы сетки (например .col-4) или препроцессоры Sass для создания своей разметки.

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

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

Бутстрап использует em и rem для задания большинства размеров, а пиксели px – для брейкпойнтов сетки и ширин контейнеров. Это происходит потому, что ширина зоны видимости на каждом устройстве измеряется в пикселях и не изменяется с размером шрифта.

Посмотрим, как действуют некоторые аспекты системы сеток Bootstrap на разных ручных устройствах.

Автоматическое расположение с помощью колонок

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

Равная ширина

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

<div class="container">
  <div class="row">
    <div class="col">
      1 из 2
    </div>
    <div class="col">
      2 из 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 из 3
    </div>
    <div class="col">
      2 из 3
    </div>
    <div class="col">
      3 из 3
    </div>
  </div>
</div>

Мультиряд одинаковой ширины

Чтобы создавать столбцы равной ширины, которые занимают несколько строк, добавьте .w-100 в любом месте, чтобы перенести столбцы на новую строку. Сделайте разрыв отзывчивым, смешав .w-100 с некоторыми адаптивными утилитами отображение элементов.

Столбцы одинаковой ширины могут быть разбиты на несколько строк, но была ошибка флексбокса Safari которая мешала этому работать без явного основания flex-basis или border. Есть обходные пути для более старых версий браузера, но они не не нужны, если вы обновили версию.

<div class="container">
  <div class="row">
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
    <div class="w-100"></div>
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
  </div>
</div>

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

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

<div class="container">
  <div class="row">
    <div class="col">
      1 из 3
    </div>
    <div class="col-6">
      2 из 3 (широкая)
    </div>
    <div class="col">
      3 из 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 из 3
    </div>
    <div class="col-5">
      2 из 3 (широкая)
    </div>
    <div class="col">
      3 из 3
    </div>
  </div>
</div>

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

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

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

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

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

Все брейкпойнты

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

<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-*, вы можете создать базовую сетку, которая вначале сложена по вертикали, а потом ее колонки становятся горизонтальными (на экстрамалых девайсах).

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

Ищите и создавайте нужное

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

<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 и соответствующие утилиты заполнения в .col. Родитель .container или .container-fluid, возможно, также необходимо настроить, чтобы избежать нежелательного переполнения, используя снова подходящую утилиту заполнения.

Вот пример настройки сетки Bootstrap на большой (lg) точке останова и выше. Мы увеличили заполнение .col с помощью .px-lg-5, противодействовали этому с .mx-lg-n5 на родительском .row, а затем скорректировали обертку .container с помощью .px-lg-5.

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Пользовательская вставка столбцов</div>
    <div class="col py-3 px-lg-5 border bg-light">Пользовательская вставка столбцов</div>
  </div>
</div>

Строка столбцов

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

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

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

Вы также можете использовать прилагаемый Sass mixin, 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);
  }
}

Выравнивание

Используйте утилиты выравнивания flexbox для выравнивания столбцов по вертикали и горизонтали. Internet Explorer 10-11 не поддерживает вертикальное выравнивание элементов Flex, когда контейнер Flex имеет min-height, как показано ниже. Смотрите Flexbugs # 3 для более подробной информации.

Вертикальное выравнивание

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

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

Горизонтальное выравнивание

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      Одна из двух колонок
    </div>
    <div class="col-4">
      Одна из двух колонок
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      Одна из двух колонок
    </div>
    <div class="col-4">
      Одна из двух колонок
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      Одна из двух колонок
    </div>
    <div class="col-4">
      Одна из двух колонок
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      Одна из двух колонок
    </div>
    <div class="col-4">
      Одна из двух колонок
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      Одна из двух колонок
    </div>
    <div class="col-4">
      Одна из двух колонок
    </div>
  </div>
</div>

Без пробелов между колонками

Пробелы между колонками в наших предустановленных классах можно удалить с помощью класса .no-gutters, который удаляет отрицательный марждин margin из .row и горизонтальный паддинг padding из всех колонок.

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

Нужно создать дизайн «edge-to-edge» (контент плотно прилегает к краям девайса)? Уберите родительский класс .container или .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Вот как это работает на практике. Заметьте, что вы можете продолжить использовать это со всеми остальными предустановленными классами сеток (включая ширину колонок, отзывчивые ярусы, переопределения и прочее).

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Обертка колонки

Если больше 12-ти колонок разместить в одном ряду, каждая дополнительная колонка обернется в новую строку.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Поскольку 9 + 4 = 13 &gt; 12, этот div шириной 4 колонки обернется в новую строку как смежный юнит.</div>
  <div class="col-6">.col-6<br>Последующие столбцы продолжаются вдоль новой строки.</div>
</div>

Разрывы колонок

Чтобы сместить колонки на новую строку в гибком контейнере, нужно сделать следующее: добавьте элемент с width: 100% туда, где вы хотите обернуть ваши колонки новой строкой. В норме это достигается с помощью множественных .row, но не каждый исполнительный метод может это поддержать.

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Заставит следующие столбцы переходить на новую строку -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

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

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Заставит следующие колонки перейти на следующую строку на брейкпойнте md и выше -->
  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>

Изменение порядка элементов

Гибкий порядок

Используйте классы .order- - для контроля над визуальным порядком вашего контента. Эти классы отзывчивы, так что вы можете задать порядок с помощью order брейкпойнта (например, .order-1.order-md-2). Он поддерживает 1 для 12 через все 5 ярусов.

<div class="container">
  <div class="row">
    <div class="col">
      Первый в DOM, но неупорядоченный
    </div>
    <div class="col order-12">
      Второй в DOM, но последний
    </div>
    <div class="col order-1">
      Третий в DOM, но первый
    </div>
  </div>
</div>

Также существует отзывчивый класс .order-first, который быстро изменяет порядок одного элемента применением свойства order: -1. Этот класс также может применяться с нумерованными классами order-*.

<div class="container">
  <div class="row">
    <div class="col order-last">
      Первый в DOM, но последний
    </div>
    <div class="col">
      Второй в DOM, но неупорядоченный
    </div>
    <div class="col order-first">
      Третий в DOM, но первый
    </div>
  </div>
</div>

Смещающиеся колонки

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

Смещающиеся классы

Двигайте колонки вправо, используя классы .offset-md-*. Они увеличивают левый марджин колонки на * колонок. Например, класс .offset-md-4 двигает .col-md-4 на 4 колонки.

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

В дополнение к сбросу колонок на брейкпойнтах, вам может понадобиться сброс офсетов. Смотрите пример с разметкой.

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Отодвигая колонки

С переходом на flexbox в v4 вы можете использовать утилиты margin, такие как .mr-auto, чтобы принудительно отделять однотипные столбцы друг от друга.

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Вложенность

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

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .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 препроцессоров БС, вы имеете возможность использования переменных и примеси Sass для создания понятных и отзывчивых страниц. Наши предустановленные классы сеток используют эти же файлы и миксины, получая готовые классы для быстрой адаптивной верстки.

Переменные

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

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

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

Примеси

Миксины используются в сочетании с переменными сеток для генерации семантического 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();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@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);
  }
}

<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 позволяет создавать особые ширины для точек брейкпойнтов отступов колонок, которые разделены ровно через padding-left и padding-right.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !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 и не в %).