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

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

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

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

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

<divclass="container"><divclass="row"><divclass="col-sm"> Один из трех столбцов </div><divclass="col-sm"> Один из трех столбцов </div><divclass="col-sm"> Один из трех столбцов </div></div></div>

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

Вот как это работает:

• Инструмент для центровки контента сайта. Используйте класс .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 на разных «ручных» устройствах.

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Максимальная ширина контейнера	Нет (авто)	540px	720px	960px	1140px
Префикс класса	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
Число колонок	12
Ширина отступа	30px (15px с каждой стороны столбца)
Может быть вложенным	Да
Упорядочивание колонок	Да

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

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

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

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

<divclass="container"><divclass="row"><divclass="col"> 1 of 2 </div><divclass="col"> 2 of 2 </div></div><divclass="row"><divclass="col"> 1 of 3 </div><divclass="col"> 2 of 3 </div><divclass="col"> 3 of 3 </div></div></div>

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

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

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

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

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

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

<divclass="container"><divclass="row"><divclass="col"> 1 из 3 </div><divclass="col-6"> 2 из 3 (шире) </div><divclass="col"> 3 из 3 </div></div><divclass="row"><divclass="col"> 1 из 3 </div><divclass="col-5"> 2 из 3 (шире) </div><divclass="col"> 3 из 3 </div></div></div>

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

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

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

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

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

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

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

<divclass="container"><divclass="row"><divclass="col">col</div><divclass="col">col</div><divclass="col">col</div><divclass="col">col</div></div><divclass="row"><divclass="col-8">col-8</div><divclass="col-4">col-4</div></div></div>

По горизонтали

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

<divclass="container"><divclass="row"><divclass="col-sm-8">col-sm-8</div><divclass="col-sm-4">col-sm-4</div></div><divclass="row"><divclass="col-sm">col-sm</div><divclass="col-sm">col-sm</div><divclass="col-sm">col-sm</div></div></div>

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

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

<divclass="container"><!-- Сложите столбцы на мобильном устройстве, сделав одну полную, а другую половинную --><divclass="row"><divclass="col-md-8">.col-md-8</div><divclass="col-6 col-md-4">.col-6 .col-md-4</div></div><!-- Ширина столбцов начинается с 50% на мобильных устройствах и увеличивается до 33,3% на компьютерах --><divclass="row"><divclass="col-6 col-md-4">.col-6 .col-md-4</div><divclass="col-6 col-md-4">.col-6 .col-md-4</div><divclass="col-6 col-md-4">.col-6 .col-md-4</div></div><!-- Столбцы всегда имеют ширину 50% на мобильных устройствах и компьютерах --><divclass="row"><divclass="col-6">.col-6</div><divclass="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.

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

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

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

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

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

<divclass="container"><divclass="row row-cols-2"><divclass="col">Столбец</div><divclass="col">Столбец</div><divclass="col">Столбец</div><divclass="col">Столбец</div></div></div>

<divclass="container"><divclass="row row-cols-3"><divclass="col">Столбец</div><divclass="col">Столбец</div><divclass="col">Столбец</div><divclass="col">Столбец</div></div></div>

<divclass="container"><divclass="row row-cols-4"><divclass="col">Столбец</div><divclass="col">Столбец</div><divclass="col">Столбец</div><divclass="col">Столбец</div></div></div>

<divclass="container"><divclass="row row-cols-4"><divclass="col">Столбец</div><divclass="col">Столбец</div><divclass="col-6">Столбец</div><divclass="col">Столбец</div></div></div>

<divclass="container"><divclass="row row-cols-1 row-cols-sm-2 row-cols-md-4"><divclass="col">Столбец</div><divclass="col">Столбец</div><divclass="col">Столбец</div><divclass="col">Столбец</div></div></div>

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

.element{// Три столбца для начала
@include row-cols(3);// Пять столбцов от средней контрольной точки вверх
@include media-breakpoint-up(md){@include row-cols(5);}}

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

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

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

<divclass="container"><divclass="row align-items-start"><divclass="col"> Один из трех столбцов </div><divclass="col"> Один из трех столбцов </div><divclass="col"> Один из трех столбцов </div></div><divclass="row align-items-center"><divclass="col"> Один из трех столбцов </div><divclass="col"> Один из трех столбцов </div><divclass="col"> Один из трех столбцов </div></div><divclass="row align-items-end"><divclass="col"> Один из трех столбцов </div><divclass="col"> Один из трех столбцов </div><divclass="col"> Один из трех столбцов </div></div></div>

<divclass="container"><divclass="row"><divclass="col align-self-start"> Один из трех столбцов </div><divclass="col align-self-center"> Один из трех столбцов </div><divclass="col align-self-end"> Один из трех столбцов </div></div></div>

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

<divclass="container"><divclass="row justify-content-start"><divclass="col-4"> Один из двух столбцов </div><divclass="col-4"> Один из двух столбцов </div></div><divclass="row justify-content-center"><divclass="col-4"> Один из двух столбцов </div><divclass="col-4"> Один из двух столбцов </div></div><divclass="row justify-content-end"><divclass="col-4"> Один из двух столбцов </div><divclass="col-4"> Один из двух столбцов </div></div><divclass="row justify-content-around"><divclass="col-4"> Один из двух столбцов </div><divclass="col-4"> Один из двух столбцов </div></div><divclass="row justify-content-between"><divclass="col-4"> Один из двух столбцов </div><divclass="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;}}

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

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

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

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

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

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

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

<divclass="container"><divclass="row"><divclass="col-6 col-sm-3">.col-6 .col-sm-3</div><divclass="col-6 col-sm-3">.col-6 .col-sm-3</div><!-- Заставить следующие столбцы переходить на новую строку --><divclass="w-100"></div><divclass="col-6 col-sm-3">.col-6 .col-sm-3</div><divclass="col-6 col-sm-3">.col-6 .col-sm-3</div></div></div>

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

<divclass="container"><divclass="row"><divclass="col-6 col-sm-4">.col-6 .col-sm-4</div><divclass="col-6 col-sm-4">.col-6 .col-sm-4</div><!-- Заставит следующие колонки перейти на следующую строку на брейкпойнте md и выше --><divclass="w-100 d-none d-md-block"></div><divclass="col-6 col-sm-4">.col-6 .col-sm-4</div><divclass="col-6 col-sm-4">.col-6 .col-sm-4</div></div></div>

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

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

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

<divclass="container"><divclass="row"><divclass="col"> Первый в DOM, порядок не применяется </div><divclass="col order-12"> Второй в DOM, с большим порядком </div><divclass="col order-1"> Третий в DOM, порядка 1 </div></div></div>

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

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

Смещение столбцов

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

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

Переместите столбцы вправо, используя классы .offset-md-*. Эти классы увеличивают левое поле столбца на столбцы *. Например, .offset-md-4 перемещает .col-md-4 на четыре столбца.

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

В дополнение к очистке столбца в ответных контрольных точках Вам может потребоваться сбросить смещения. См. это в действии в примере сетки.

<divclass="container"><divclass="row"><divclass="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div><divclass="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><divclass="row"><divclass="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div><divclass="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 Вы можете использовать утилиты полей, такие как .mr-auto, чтобы отодвинуть одноуровневые столбцы друг от друга.

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

Вложенность

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

<divclass="container"><divclass="row"><divclass="col-sm-9"> Уровень 1: .col-sm-9 <divclass="row"><divclass="col-8 col-sm-6"> Уровень 2: .col-8 .col-sm-6 </div><divclass="col-4 col-sm-6"> Уровень 2: .col-4 .col-sm-6 </div></div></div></div></div>

«Примеси» SASS

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

Переменные

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

$grid-columns:12;$grid-gutter-width:30px;$grid-breakpoints:(// Очень маленький экран / телефонxs:0,// Маленький экран / телефонsm:576px,// Средний экран / планшетmd:768px,// Большой экран / настольныйlg:992px,// Очень большой экран / широкий настольныйxl:1200px);$container-max-widths:(sm:540px,md:720px,lg:960px,xl:1140px);

«Примеси»

Миксины используются в сочетании с переменными сеток для генерации семантического CSS для колонок индивидуальных сеток.

// Создает оболочку для серии столбцов
@include make-row();// Подготовьте элемент к сетке (применив все, кроме ширины)
@include make-col-ready();@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);}}

<divclass="example-container"><divclass="example-row"><divclass="example-content-main">Главое содержимое</div><divclass="example-content-secondary">Вторичное содержимое</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 или %).