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

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

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

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

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

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

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

Давайте разберёмся, как это работает:

• Контейнеры обеспечивают возможность центрирования и горизонтального отступа содержимого вашего сайта. Используйте .container для адаптивной ширины в пикселях или .container-fluid для width: 100% на всех размерах экрана и устройствах.
• Строки являются контейнерами для столбцов. Каждый столбец имеет горизонтальный padding (также называемый отступом) для управления пространством между ними. Этот padding затем компенсируется отрицательными отступами в строках. Таким образом, всё содержимое ваших столбцов визуально выравнивается по левой стороне.
• В макете сетки содержимое должно располагаться внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк.
• Благодаря flexbox, столбцы сетки без указанной width автоматически выстраиваются как столбцы одинаковой ширины. Например, четыре экземпляра .col-sm будут автоматически занимать по 25% ширины с малого экрана и выше. Дополнительные примеры см. в разделе Автоматическое выравнивание столбцов.
• Классы столбцов указывают количество столбцов, которые вы хотите использовать из возможных 12 в строке. Например, если вы хотите три столбца одинаковой ширины, вы можете использовать .col-4.
• Ширина столбцов width задаётся в процентах, поэтому они всегда гибкие и пропорциональны своему родительскому элементу.
• Столбцы имеют горизонтальные padding для создания отступов между отдельными столбцами. Тем не менее, вы можете удалить margin из строк и padding из столбцов с использованием .no-gutters в .row.
• Для адаптивности сетки существует пять точек перехода, по одной на каждый адаптивный прелом: все преломления (очень маленький экран), маленький, средний, большой и очень большой экран.
• Точки перехода сетки основаны на минимальных ширинах запросов media, что означает, что они применяются к этой точке перехода и всем точкам перехода выше её (например, .col-sm-4 применяется к маленькому, среднему, большому и очень большому экранам, но не к первой xs точке перехода).
• Вы можете использовать предопределенные классы сетки (например, .col-4) или миксины Sass для более семантической разметки.

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

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

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

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

Автоматическое выравнивание столбцов

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

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

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

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

Многострочные столбцы одинаковой ширины

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

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

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

Установка ширины одного столбца

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

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

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

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

<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">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

Столбцы строки

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

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

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

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

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

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

<div class="container">
  <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 {
  // Three columns to start
  @include row-cols(3);

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

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

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

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

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

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

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Без отступов

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

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

Нужен дизайн от края до края? Удалите родительский .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="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

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

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

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

    <!-- Force next columns to break to new line -->
    <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>

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

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

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <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>
</div>

Перестановка

Классы порядка

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

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Также есть адаптивные .order-first и .order-last классы, которые изменяют order элемента, применяя order: -1 и order: 13 (order: $columns + 1) соответственно. Эти классы также могут смешиваться с пронумерованными .order-* классами по мере необходимости.

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

Смещение колонок

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

Классы смещения

Смещайте колонки вправо, используя .offset-md-* классы. Эти классы увеличивают левый отступ колонки на * колонки. Например, .offset-md-4 смещает .col-md-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 в версии 4 вы можете использовать утилиты отступов, такие как .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 Bootstrap у вас есть возможность использовать 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 устанавливает ширину отступов колонки.

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