Сетка является базовой частью фреймворка Bootstrap. Она позволяет быстро и просто верстать адаптивные шаблоны. Сетка Bootstrap оказалась настолько удачна, что ее зачастую используют отдельно (без других компонентов).
Такой вариант применения фреймворка используется веб-разработчиками для создания проектов с уникальным дизайном. Когда нужные элементы проще написать с нуля, чем переписывать готовые компоненты Bootstrap. В этом случае к проекту достаточно подключить всего лишь один файл - bootstrap-grid.min.css.
В основе работы сетки Bootstrap 4 лежат медиа-запросы (CSS media queries) и CSS Flexbox. Они позволяют с легкостью создавать разнообразные адаптивные шаблоны для сайтов.
Стоит напомнить, что адаптивный шаблон – это шаблон, вид которого меняется в зависимости от ширины viewport браузера (видимая пользователю область веб-страницы). То есть, при одних значениях ширины viewport адаптивный шаблон будет выглядеть одним образом, а при других – совершенно по-другому.
Как уже было сказано, в Bootstrap адаптивность шаблонов реализована через медиа-запросы. Медиа-запросы строятся на основании минимальной ширины viewport браузера. Ключевое значение ширины viewport в медиа-запросе называется breakpoint (контрольная точка). Иными словами, контрольная точка (или breakpoint) это своего рода точка в которой происходит переключение внешнего вида сайта.
Каждая контрольная точка имеет свое название и обозначение. Первая контрольная точка (breakpoint) не имеет обозначения, вторая называется – sm, третья – md, четвёртая – lg и пятая – xl. Эти обозначения используются в классах, которые добавляются к элементам.
В таблице ниже приведены названия, обозначения, значения контрольных точек и префикс класса:
| Название контрольной точки (обозначение) | Ширина viewport браузера | Префикс класса |
|---|---|---|
| Extra small (без обозначения) | ≥0 | .col- |
| Small (sm) | ≥576px | .col-sm- |
| Medium (md) | ≥768px | .col-md- |
| Large (lg) | ≥992px | .col-lg- |
| Extra large (xl) | ≥1200px | .col-xl- |
В сосвтав сетки Bootstrap 4 входят следующие элементы:
По сути, все части сетки - обычные html элементы, которым присвоены определенные классы.
Разберем подробнее
Они необходимы для правильной работы всей сетки. Используются для размещения в них содержимого. Хотя контейнеры могут быть вложенными - большинство макетов не требуют создания вложенных контейнеров.
В Bootstrap используется три разных типа контейнеров:
В таблице указано, как меняется ширина каждого контейнера в контрольных точках:
| <576px | ≥576px | ≥768px | ≥992px | ≥1200px | |
|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px |
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
Адаптивно-фиксированный контейнер .container
По умолчанию класс .container является отзывчивым контейнером фиксированной ширины, что означает, что его максимальная ширина max-width изменяется в кождой контрольной точке.
Стоит помнить, что адаптивно-фиксированный контейнер (.container) кроме установления ширины макета ещё выравнивает его по центру страницы и задаёт внутренние поля (padding) слева и справа по 15px.
<div class="container">
здесь содержимое контейнера
</div>
Адаптивно-резиновый или адаптивно-изменчивый контейнер .container-fluid
Класс .container-fluid задает контейнер полной ширины, охватывающего всю ширину области просмотра.
<div class="container-fluid">
здесь содержимое контейнера
</div>
Отзывчивый контейнер .container-{breakpoint}
Отзывчивые контейнеры появились в Bootstrap начиная с версии 4.4. Они позволяют указывать класс шириной 100%, пока не будет достигнута указанная контрольной точка, после чего будет применено max-width для каждой из более высоких точек переключения. Например, .container-sm будет иметь ширину в 100% до тех пор, пока не будет достигнута контрольная точка sm, где он будет масштабироваться уже с помощью md, lg и xl.
По сути, отзывчивый контейнер совмещает в себе свойства адаптивно-фиксированного и адаптивно-резинового контейнеров одновременно. До контрольной точки контейнер ведет себя как адаптивно-резиновый, после, как адаптивно-фиксированный.
<div class="container-sm">ширина 100% до контрольной точки (sm) </div>
<div class="container-md">ширина 100% до контрольной точки (md) </div>
<div class="container-lg">ширина 100% до контрольной точки (lg) </div>
<div class="container-xl">ширина 100% до контрольной точки (xl) </div>
Кроме контейнеров в сетке Bootstrap 4 используются ряды и колонки.
Ряды (класс .row) в Bootstrap 4 являются контейнерами для колонок. Они не только задают отрицательные отступы, но и выполняет ещё функцию flex-контейнера. Если данный элемент не установить, то адаптивные блоки не будут работать как надо.
Класс .row всегда должен выступать родителем для адаптивных блоков. Если какой-то элемент необходимо разметить с помощью адаптивных блоков, предварительно его необходимо обернуть в .row, а уже в нём создавать блоки.
<div class="container">
<div class="row">
здесь, внури контейнера .container и ряда .row размещаются адаптивные блоки
</div>
</div>
Колонки или адаптивные блоки (класс .col) - это основные строительные элементы сетки. Они имеют адаптивную ширину, которая принимает разное значение на различных диапазонах viewport. Поведением адаптивного блока управляют с помощью одного или нескольких классов col.
Синтаксис класса .col: col-{breakpoint}-{number_columns}
где:
{breakpoint} - контрольная точка, которая определяет минимальную ширину viewport, начиная с которой этот класс будет действовать.
{number_columns} - количество колонок (по умолчанию от 1 до 12), которое будет занимать адаптивный блок, начиная с этой контрольной точки. Данное число определяет, какую часть ширины будет занимать блок относительно содержащего его элемента (ряда). Минимальная ширина адаптивного блока - это 1/12 (8.3%), а максимальная - 12/12 (100%).
Для примера рассмотрим, какую ширину будет иметь следующий адаптивный блок на разных контрольных точкаx:
<div class="container">
<div class="row">
<div class="col-12 col-sm-8 col-md-6 col-lg-5 col-xl-3">
этот адаптивный блок будет иметь разную ширину на разных контрольных точках
</div>
</div>
</div>
Стоить помнить, что если контрольную точку не указать, то на следующие контрольные точки распростронится действие указанного ранее класса. Соответственно, если ни один класс не указан, колонки будут использовать breakpoint соответсвуюший минимальной ширине.
Рассмотрим это на примерах:
Адаптивный блок <div class="col-12 col-sm-8 col-xl-4">
в контрольных точках md и lg будет иметь ширину, такую же как и в контрольной точке sm, то есть равную 8 колонкам.
Адаптивный блок <div class="col-9 col-md-3"> в контрольной точке sm будет иметь ширину, равную 9 колонкам, а в точках lg и xl - ширину, равную 3 колонкам.
Адаптивный блок <div class="col-6"> во всех контрольных точках будет иметь ширину, равную 6 колонкам
В данном примере мы рассмотрели элементы составляющие основу сетки bootstrap 4 (обёрточные контейнеры, ряды и колонки) и лишь базовую часть того функционала, который позволяет создавать по настоящему адаптивные шаблоны. Особенно это касается свойств колонок (адаптивных блоков), описание которых необходимо выделить в отдельный материал.