Система сеток
Мощная система гибких сеток, предоставляющая преимущества для пользователей мобильных устройств, для удобной верстки и расположения элементов любых видов и размеров. Используется система «12 колонок», 5-ти адаптивных ярусов, препроцессоров Sass и предустановленных классов.
Как это устроено
Система сеток Bootstrap 4 использует контейнеры, ряды и колонки, чтобы удобно располагать содержимое. Бутстрап реализован с помощью флексбокса и полностью адаптивен. Ниже приведен пример и глубокий взгляд на объединение сетки.
Вот небольшое объяснение работы Bootstrap 4:
Параметры сеток
Бутстрап использует em и rem для задания большинства размеров, а пиксели px – для «брейкпойнтов» сетки и ширин контейнеров. Это происходит потому, что ширина зоны видимости на каждом устройстве измеряется в пикселях и не изменяется с размером шрифта.
Посмотрим, как действуют некоторые аспекты системы сеток Bootstrap на разных «ручных» устройствах.
 Extra small .col- .col-sm- | .col-md- | .col-lg- | .col-xl- | | |
|---|---|---|---|---|---|
| Число колонок | 12 | ||||
| Ширина отступа | 30px (15px с каждой стороны столбца) | ||||
| Может быть вложенным | Да | ||||
| Упорядочивание колонок | Да | ||||
Автоматическое расположение с помощью колонок
Равная ширина
Система сеток
Мощная система гибких сеток для мобильных устройств, для удобной верстки и расположения элементов любых видов и размеров. Используется система «12 колонок», 5-ти адаптивных ярусов, препроцессоров Sass и десятков предустановленных классов.
Как это устроено
Система сеток Bootstrap 4 использует контейнеры, ряды и колонки, чтобы удобно располагать содержимое. Бутстрап реализован с помощью флексбокса и полностью адаптивен. Ниже приведен пример и глубокий взгляд на объединение сетки.
Вот небольшое объяснение работы Bootstrap 4:
Параметры сеток
Бутстрап использует em и rem для задания большинства размеров, а пиксели px – для «брейкпойнтов» сетки и ширин контейнеров. Это происходит потому, что ширина зоны видимости на каждом устройстве измеряется в пикселях и не изменяется с размером шрифта.
Посмотрим, как действуют некоторые аспекты системы сеток Bootstrap на разных «ручных» устройствах.
 Extra small .col- .col-sm- | .col-md- | .col-lg- | .col-xl- | | |
|---|---|---|---|---|---|
| Число колонок | 12 | ||||
| Ширина отступа | 30px (15px с каждой стороны столбца) | ||||
| Может быть вложенным | Да | ||||
| Упорядочивание колонок | Да | ||||
Автоматическое расположение с помощью колонок
Равная ширина
Система сеток
Используйте нашу мощную мобильную сетку flexbox для создания макетов всех форм и размеров. Используется система «12 колонок», 5-ти адаптивных ярусов, препроцессоров Sass и предустановленных классов.
Пример
Система сетки Bootstrap использует серию контейнеров, строк и столбцов для размещения и выравнивания содержимого. Сетки построены на flexbox и полностью отзывчивы. Ниже приведен пример с подробным объяснением того, как работает система сеткок.
Как это устроено
Разберём как работает сеточная система:
Строки являются обертками для столбцов. Каждый столбец имеет горизонтальный padding для создания отступов между отдельными колонками. Этот padding нейтрализует строки с отрицательной полями для обеспечения визуального выравнивания содержимого в столбцах по левой стороне. Строки также поддерживают классы-модификаторы для равномерного распределения размера ширины колонок и изменения отступов вашего контента.
Большие возможности Sass переменных, карт и миксинов для использования в ситеме сеток. Если вы не хотите использовать предопределенные классы сеток в Bootstrap, то вы можете использовать исходники нашей Sass сетки для создания своей собственной с более семантической разметкой. Мы также включили некоторые пользовательские свойства CSS, чтобы использовать эти переменные Sass для большей гибкости в ваших проектах.
Параметры сетки
Система сеткок Bootstrap может адаптироваться ко всем шести контрольным точкам (брейкпойнтам) по умолчанию и любым точкам, которые вы настраиваете. Шесть уровней сетки по умолчанию следующие:
Как показано выше, каждая из этих контрольных точкек имеет свой собственный контейнер, уникальный префикс класса и модификаторы. Вот как определяется сетка на этих контрольных точках:
| xs | sm ≥576px | md ≥768px | lg ≥992px | xl ≥1200px | xxl ≥1400px | |
|---|---|---|---|---|---|---|
| Контейнер max-width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Префикс класса | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- | .col-xxl- |
| Число колонок | 12 | |||||
| Ширина отступа | 1.5rem (.75rem слева и справа) | |||||
| Переопределение отступа | Да | |||||
| Может быть вложенным | Да | |||||
| Упорядочивание колонок | Да | |||||
Авторазметка столбцов
Равная ширина
Система сеток
Используйте нашу мощную мобильную сетку flexbox для создания макетов всех форм и размеров. Используется система «12 колонок», 5-ти адаптивных ярусов, препроцессоров Sass и предустановленных классов.
Как это устроено
Система сеток Bootstrap 4 использует контейнеры, ряды и колонки, чтобы удобно располагать содержимое. Бутстрап реализован с помощью флексбокса и полностью адаптивен. Ниже приведен пример и глубокий взгляд на объединение сетки.
Если вы не знакомы с flexbox, то ознакомьтесь с руководством по флексбоксу CSS Tricks чтобы получить справочную информацию, термины, рекомендаций и фрагменты кода.
Вот небольшое объяснение работы Bootstrap 4:
Параметры сеток
Бутстрап использует em и rem для задания большинства размеров, а пиксели px – для «брейкпойнтов» сетки и ширин контейнеров. Это происходит потому, что ширина зоны видимости на каждом устройстве измеряется в пикселях и не изменяется с размером шрифта.
Посмотрим, как действуют некоторые аспекты системы сеток Bootstrap на разных «ручных» устройствах.
 Extra small .col- .col-sm- | .col-md- | .col-lg- | .col-xl- | | |
|---|---|---|---|---|---|
| Число колонок | 12 | ||||
| Ширина отступа | 30px (15px с каждой стороны столбца) | ||||
| Может быть вложенным | Да | ||||
| Упорядочивание колонок | Да | ||||
Автоматическое расположение с помощью колонок
Равная ширина
В этой статье разберём сетку Bootstrap 4. Сетка – это базовая часть этого фреймворка, которая позволяет очень быстро и достаточно просто верстать адаптивные шаблоны.
Сетку Bootstrap 4 можно использовать отдельно (без других компонентов). Этот вариант применения фреймворка тоже используется веб-разработчиками, т.к. не всегда готовые Bootstrap элементы, такие как кнопки, навигационные панели, таблицы и прочие компоненты можно использовать в рамках того или иного проекта. Зачастую это касается проектов с уникальным дизайном. В этом случае нужные элементы проще написать с нуля самостоятельно, вместо того чтобы переписывать готовые компоненты Bootstrap.
В этом случае к проекту достаточно подключить из архива только файл «bootstrap-grid.min.css».
Назначение Bootstrap сетки. Контрольные точки
Сетка Bootstrap 4 – это основная часть фреймворка. Она предназначена для создания адаптивных шаблонов.
Сетка Bootstrap 4 основывается на CSS Flexbox и медиа-запросах (CSS media queries). Чтобы понять, как она работает более точно, рекомендуется сначала изучить эти CSS технологии.
Следующий шаг – это разобраться с тем, что такое адаптивный макет сайта.
Если кратко, адаптивный макет – это такой макет, вид которого может изменяться в зависимости от того, какую ширину viewport имеет браузер. Это означает, что при одних значениях ширины viewport адаптивный макет может выглядеть одним образом, а при иных – совершенно по-другому.
Более подробно почитать про адаптивные макеты можно в этой статье.
На схеме приведены основные контрольные точки, которые Bootstrap 4 имеет по умолчанию:
Это означает что до 576px макет сайта может отображаться одним образом, от 576px до 768px – другим образом и т.д. Таким образом, можно создать макет, который на каждом из этих участков может выглядеть по-разному.
| Ширина viewport браузера | Контрольная точка (название устройства) |
|---|---|
| >=0 | без обозначения (xs) |
| >=576px | sm |
| >=768px | md |
| >=992px | lg |
| >=1200px | xl |
Если вы знакомы с сеткой Bootstrap 3, то в ней количество контрольных точек равнялось четырём.
Из чего состоит сетка?
Сетка Bootstrap 4 состоит из:
Все эти части сетки – это обычные HTML элементы, к которым просто добавлены определённые классы.
| Ширина viewport браузера | Контрольная точка (название устройства) | Ширина адаптивно-фиксированного контейнера (container) |
|---|---|---|
| >=0 | без обозначения (xs) | 100% |
| >=576px | sm | 540px |
| >=768px | md | 720px |
| >=992px | lg | 960px |
| >=1200px | xl | 1140px |
Это означает, что адаптивно-фиксированный контейнер будет иметь :
| Ширина viewport браузера | Контрольная точка (название устройства) | Ширина адаптивно-резинового контейнера (container-fluid) |
|---|---|---|
| >=0 | без обозначения (xs) | 100% |
| >=576px | sm | |
| >=768px | md | |
| >=992px | lg | |
| >=1200px | xl |
При верстке макета не следует одни обёрточные контейнеры помещать внутрь других.
Ряды (.row)
Ряд – это элемент бутстрап сетки, который выступает в роли непосредственного контейнера для адаптивных блоков (других элементов сетки, которые мы рассмотрим ниже).
С точки зрения CSS Flexbox, ряд – это flex-контейнер, а адаптивные блоки – это flex-элементы.
Компенсация внутренних padding полей осуществляется так же как и в Bootstrap 3, за счёт отрицательных левых и правых внешних отступов, равных 15px ( margin-left:-15px и margin-right:-15px ).
Пример, в котором показано, что вне зависимости от того, как на каком уровне вложенности непосредственно находится некоторый контент, его отступ от левого и правого края при правильной HTML структуре всегда будет равняться 15px:
Адаптивные блоки (.col)
Создание адаптивного блока осуществляется очень просто посредством добавления одного или нескольких классов col-?-? к необходимому HTML элементу, расположенному непосредственно в ряду.
Данное число определяет, какую часть ширины будет занимать адаптивный блок начиная с указанной контрольной точки от ширины родительского блока, т.е. ряда. При этом ширина ряда в числовом выражении (колонках Bootstrap) по умолчанию равна 12.
Например, блок с классом col-md-4 начиная с контрольной точки md будет занимать 4/12 ширины ряда, т.е. 33,3% (т.е. 4/12*100% = 33.3%).
| Ширина viewport | Контрольная точка | Класс | Ширина адаптивного блока |
|---|---|---|---|
| Крохотная ширина (>=0) | без обозначения (xs) | col-? | от col-1 до col-12 |
| Маленькая ширина (>=576px) | sm | col-sm-? | от col-sm-1 до col-sm-12 |
| Средняя ширина (>=768px) | md | col-md-? | от col-md-1 до col-md-12 |
| Большая ширина (>=992px) | lg | col-lg-? | от col-lg-1 до col-lg-12 |
| Очень большая ширина (>=1200px) | xl | col-xl-? | от col-xl-1 до col-xl-12 |
Например, рассмотрим, какую ширину будет иметь следующий адаптивный блок:
Список, объясняющий какую ширину адаптивный блок, будет иметь на разных контрольных точках:
При указании ширины адаптивному блоку мы указываем класс, содержащий контрольную точку, начиная с которой данная ширина будет действовать. Эту ширину данный блок будет иметь до тех пор, пока она будет переопределена с помощью другого класса, действие которого начинается с более большой ширины viewport.
Адаптивные блоки без указания количества колонок
Рассмотрим несколько примеров.
1. Создание в ряду 5 адаптивных блоков с одинаковой шириной.
2. Ширина блоков с классом col при наличии в линии адаптивного блока с количеством колонок.
В некоторых версиях браузерах Safari есть ошибка при использовании такой разметки, она может быть разбита на несколько линий.
Исправить это можно 2 способами:
Кроме этого, сетка Bootstrap 4 позволяет располагать адаптивные блоки без указания количества колонок на нескольких линиях.
Если данное действие необходимо использовать только для некоторых контрольных точек, то к нему (классу w-100 ) дополнительно нужно ещё добавить служебные отзывчивые классы Bootstrap 4.
В этом примере переноситься на новую линию адаптивные блоки будут только до действия контрольной точки md :
Расположение адаптивных блоков в ряду
Адаптивные блоки в ряду по умолчанию располагаются горизонтальными линиями. В пределах горизонтальной линии адаптивные блоки выстраиваются последовательно слева направо. В одну горизонтальную линию могут поместиться адаптивные блоки с суммарным числом колонок не более 12. Адаптивные блоки, которые не помещаются в текущую линию переходят на следующую.
Рассмотрим ещё один пример, в котором адаптивные блоки имеют различную ширину на различных контрольных точках:
Основной принцип верстки макета
Основной принцип верстки макета веб-страницы на сетке Bootstrap 4 заключается во вкладывании одних адаптивных блоков в другие.
При этом ширина адаптивных блоков это всегда относительная величина, которая задаётся в колонках Bootstrap и зависит только от ширины родителя, т.е. ряда.
Размещать контент веб-страницы следует только в адаптивных блоках.
Например, в имеющийся макет, а именно в адаптивный блок col-8 вложим ещё 2 блока:
Для этого предварительно необходимо в блок col-8 положить ряд (контейнер для адаптивных блоков):
После этого добавим 2 адаптивных блока в ряд:
Выравнивание адаптивных блоков
Выравнивания адаптивных блоков в горизонтальном и вертикальном направлении осуществляется в Bootstrap 4 с помощью служебных flex-классов.
Вертикальное выравнивание адаптивных блоков
Выравнивание адаптивных блоков в пределах линии ряда по вертикали осуществляется посредством одного из следующих классов, который необходимо дополнительно добавить к row :
Например, выровняем все адаптивные блоки по центру линии ряда:
По умолчанию адаптивные элементы занимают всю высоту линии ряда, в которой они расположены.
Выравнивание какого-то определённого адаптивного блока по вертикали в пределах линии может осуществляться одним из следующих классов:
Данные классы необходимо добавлять к адаптивным блокам, а не к ряду.
Например, выравниваем адаптивный блок 2 по нижнему краю линии:
Горизонтальное выравнивание адаптивных блоков
Для выравнивания адаптивных блоков в горизонтальном направлении предназначены следующие классы:
Например, распределим адаптивные блоки в горизонтальном направлении равномерно:
Адаптивная разметка без полей
Обратите внимание, что данный класс ( no-gutters ) действует только на адаптивные блоки, которые непосредственно размещены в этом ряду. Т.е. на адаптивные блоки, которые не имеют в качестве родителя данный ряд, CSS свойства по убиранию padding не распространятся.
Смещение адаптивных блоков
В Bootstrap 4 смещение адаптивных блоков можно выполнить с помощью:
Классы offset
Классы offset предназначены для смещения адаптивных блоков вправо на определённое количество колонок.
Данные классы имеют следующий синтаксис:
<2>– величина смещения, указываемая с помощью количества колонок Bootstrap.
В качестве примера установим смещение адаптивным блокам так, как это показано на рисунке.
Смещение с помощью margin классов
Изменение визуального порядка следования адаптивных блоков
По умолчанию адаптивные блоки визуально отображаются в том порядке, в котором они расположены в HTML коде.
Вместо
Например, изменим порядок следования двух адаптивных блоков:
Ещё один пример (с использованием адаптивных классов order ):
Пример с использованием классов order как с числом, так и со словами first и last :
Пример адаптивной вёрстки на сетке Boostrap 4
Создадим адаптивную разметку блока веб-страницы, приведённого на рисунке, с помощью сетки Bootstrap 4.
1. Создаём разметку блока для мобильных устройств ( xs ).
2. Настраиваем разметку для контрольной точки sm :
3. Устанавливаем блокам количество колонок, которые они должны иметь на устройствах md и lg :
4. Создаём разметку для xl :
Убираем ненужные контрольные точки у адаптивных блоков:
Кроме этого, изначально в Bootstrap 4 адаптивный блок имеет ширину, равную 100%. Это позволяет при создании адаптивных блоков не указывать количество колонок, если их первоначальная ширина должна быть равна 12 колонок (100%).
