Сеточная система

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

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

Система сетки Bootstrap использует ряд контейнеров, строк и столбцов для компоновки и выравнивания содержимого. Он построен с помощью 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.
• Чтобы сделать сетку отзывчивой, существует пять точек останова сетки, по одной на каждую реагирующую точку останова : все точки останова (очень маленькие), маленькие, средние, большие и очень большие.
• Точки останова сетки основаны на медиа-запросах минимальной ширины, то есть они применяются к этой одной точке останова и всем вышестоящим (например, .col-sm-4применяются к малым, средним, большим и очень большим устройствам, но не к первой xsточке останова).
• Вы можете использовать предопределенные классы сетки (например .col-4) или миксины Sass для большей семантической разметки.

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

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

В то время как Bootstrap использует ems или rems для определения большинства размеров, pxs используются для точек останова сетки и ширины контейнера. Это связано с тем, что ширина окна просмотра указывается в пикселях и не зависит от размера шрифта .

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

<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и соответствующие утилиты заполнения в .cols. Чтобы избежать нежелательного переполнения, может также потребоваться отрегулировать родитель или, снова используя соответствующую утилиту заполнения .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 для вертикального и горизонтального выравнивания столбцов. Internet Explorer 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. Это удаляет отрицательные margins .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%вы хотите перенести столбцы на новую строку. Обычно это достигается с помощью нескольких .rows, но не каждый метод реализации может это учитывать.

<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или %).