Bootstrap 4 - Сетка

MyTetra Share

Делитесь знаниями!

Bootstrap 4 - Сетка

Ссылка на оригинал

Время создания: 04.11.2019 12:29

Автор: Александр Мальцев

Текстовые метки: bootstrap, bootstrap 4, css, html, верстка, сайт, макет, сетка

Раздел: Компьютер - Программирование - HTML и CSS - Bootstrap

Запись: xintrea/mytetra_syncro/master/base/1572859740r1hy0o4f1c/text.html на raw.github.com

В этой статье разберём сетку Bootstrap 4. Сетка – это базовая часть этого фреймворка, которая позволяет очень быстро и достаточно просто верстать адаптивные шаблоны.

Перед тем, как начать, следует знать, что:

Сетку Bootstrap 4 можно использовать отдельно (без других компонентов). Этот вариант применения фреймворка тоже используется веб-разработчиками, т.к. не всегда готовые Bootstrap элементы, такие как кнопки, навигационные панели, таблицы и прочие компоненты можно использовать в рамках того или иного проекта. Зачастую это касается проектов с уникальным дизайном. В этом случае нужные элементы проще написать с нуля самостоятельно, вместо того чтобы переписывать готовые компоненты Bootstrap.

В этом случае к проекту достаточно подключить из архива только файл «bootstrap-grid.min.css».

Назначение Bootstrap сетки. Контрольные точки

Сетка Bootstrap 4 – это основная часть фреймворка. Она предназначена для создания адаптивных шаблонов.

Сетка Bootstrap 4 основывается на CSS Flexbox и медиа-запросах (CSS media queries). Чтобы понять, как она работает более точно, рекомендуется сначала изучить эти CSS технологии.

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

Если кратко, адаптивный макет – это такой макет, вид которого может изменяться в зависимости от того, какую ширину viewport имеет браузер. Это означает, что при одних значениях ширины viewport адаптивный макет может выглядеть одним образом, а при иных – совершенно по-другому.

Более подробно почитать про адаптивные макеты можно в этой статье.

В Bootstrap изменения вида макета реализовано через медиа-запросы. Каждый медиа-запрос в Bootstrap строится на основании минимальной ширины viewport браузера. В Bootstrap ключевое значение ширины viewport в медиа-запросе называется breakpoint (контрольной точкой, или более просто классом устройства).

На схеме приведены основные контрольные точки, которые Bootstrap 4 имеет по умолчанию:

Это означает что до 576px макет сайта может отображаться одним образом, от 576px до 768px – другим образом и т.д. Таким образом, можно создать макет, который на каждом из этих участков может выглядеть по-разному.

Контрольные точки имеют обозначение. Первый breakpoint не имеет обозначения (xs), второй называется – sm, третий – md, четвёртый – lg и пятый – xl. Эти обозначения необходимо запомнить, т.к. они используются в классах, которые мы будем добавлять к элементам. Эти обозначения в имени класса будут указывать на то с какой ширины viewport стили, определённые в нём, будут применяться к элементу.

Ширина viewport браузера	Контрольная точка (название устройства)
>=0	без обозначения (xs)
>=576px	sm
>=768px	md
>=992px	lg
>=1200px	xl

При этом, контрольные точки задают только минимальную ширину. Т.е., например, если вы определили макет, используя в нём классы без обозначения контрольной точки (xs) и с использованием md, то он на sm будет иметь такую же структуру как на xs, а на lg и xl - как на md.

Если вы знакомы с сеткой Bootstrap 3, то в ней количество контрольных точек равнялось четырём.

Из чего состоит сетка?

Сетка Bootstrap 4 состоит из:

обёрточных контейнеров (элементов с классом container и container-fluid);
рядов (элементов с классом row):
адаптивных блоков (элементов, имеющих один или несколько классов, равных col или начинающихся с col).

Все эти части сетки – это обычные HTML элементы, к которым просто добавлены определённые классы.

Обёрточные контейнеры (.container и .container-fluid)

Обёрточный контейнер — это элемент сетки Bootstrap 4, с которого обычно начинается создание макета страницы или её части. Другими словами, это базовый элемент, в котором необходимо размещать все другие элементы сетки (ряды и адаптивные блоки). Его основная цель — это установить шаблону ширину и выровнять его по центру страницы.

В четвёртом бутстрапе имеются два вида обёрточных контейнеров: адаптивно-фиксированный и резиновый.

Адаптивно-фиксированный контейнер предназначен для создания контейнера с постоянной шириной, которая будет оставаться постоянной только в пределах действия определённой контрольной точки. Т.е., например, на контрольной точке sm до действия контрольной точки md, он будет иметь одну фиксированную ширину, а на md до действия lg – другую фиксированную ширину. Единственная контрольная точка, на которой данный контейнер не будет иметь фиксированную ширину это breakpoint без обозначения. Здесь контейнер будет занимать 100% ширину.

Таблица, в которой наглядно показано какую максимальную фиксированную ширину может занимать .container:

Ширина viewport браузера	Контрольная точка (название устройства)	Ширина адаптивно-фиксированного контейнера (container)
>=0	без обозначения (xs)	100%
>=576px	sm	540px
>=768px	md	720px
>=992px	lg	960px
>=1200px	xl	1140px

Это означает, что адаптивно-фиксированный контейнер будет иметь:

100% ширину при ширине viewport до 576px;
540px при ширине viewport от 576 до 768px;
720px при ширине viewport от 768 до 992px и т.д

В горизонтальном направлении контейнер располагается по центру. Осуществляется это посредством установки ему CSS свойств margin-left: auto и margin-right: auto в файле «bootstrap.css».

Второй вид контейнера – это резиновый. Он применяется тогда, когда вам необходимо создать полностью гибкий макет целой страницы или её части. Данный контейнер имеет на любых контрольных точках 100% ширину.

Ширина viewport браузера	Контрольная точка (название устройства)	Ширина адаптивно-резинового контейнера (container-fluid)
>=0	без обозначения (xs)	100%
>=576px	sm
>=768px	md
>=992px	lg
>=1200px	xl

Кроме этого, контейнеры (.container и .container-fluid) имеют ещё внутренние отступы слева и справа по 15px. Установка внутренних отступов контейнеров задаётся в «bootstrap.css» посредством CSS-свойств padding-left: 15px и padding-right: 15px.

При верстке макета не следует одни обёрточные контейнеры помещать внутрь других.

Ряды (.row)

Ряд – это элемент бутстрап сетки, который выступает в роли непосредственного контейнера для адаптивных блоков (других элементов сетки, которые мы рассмотрим ниже).

Это означает что ряд – это просто родительский элемент для адаптивных блоков. Т.е. адаптивные блоки всегда должны быть размещены непосредственно в нём.

С точки зрения CSS Flexbox, ряд – это flex-контейнер, а адаптивные блоки – это flex-элементы.

HTML-разметка ряда:

В отличие от Bootstrap 3, в которой ряд выступал только для компенсации левых и правых внутренних padding полей обёрточных контейнеров или адаптивных блоков, в Bootstrap 4 он играет очень важную роль. Это связано с тем, что данная сетка построена на CSS Flexbox. В этой сетки он выступает в роли flex-контейнера для flex-элементов (адаптивных блоков). Т.е. если вы будете использовать адаптивные блоки вне ряда, они работать не будут. В Bootstrap 4 адаптивные блоки должны обязательно находиться в блоке с классом row.

Компенсация внутренних padding полей осуществляется так же как и в Bootstrap 3, за счёт отрицательных левых и правых внешних отступов, равных 15px (margin-left:-15px и margin-right:-15px).

Пример, в котором показано, что вне зависимости от того, как на каком уровне вложенности непосредственно находится некоторый контент, его отступ от левого и правого края при правильной HTML структуре всегда будет равняться 15px:

container (+15px) -> row (-15px) -> col (+15px) -> контент

container-fluid (+15px) -> row (-15px) -> col (+15px) -> row (-15px) -> col (+15px) -> контент

Кроме этого, адаптивные блоки (рассмотрим их ниже) логически не связанные между собой не обязательно помещать в один ряд. Наиболее корректно их разбить на отдельные логические группы и поместить каждую из них в отдельный ряд (.row).

</div>

</div>

Адаптивные блоки (.col)

Адаптивные блоки – это основные строительные элементы сетки. Именно от них будет зависеть, как макет веб-страницы будет отображаться на разных контрольных точках (без обозначения, sm, md, lg и xl).

Если простыми словами, то адаптивные блоки – это блоки, ширина которых (в процентном отношении от родителя) на разных breakpoint может быть различной. Т.е., например, адаптивный блок на sm может иметь ширину, равную 50% от родительской, а на md – 25%.

Создание адаптивного блока осуществляется очень просто посредством добавления одного или нескольких классов col-?-? к необходимому HTML элементу, расположенному непосредственно в ряду.

В классе col-?-? вместо первого знака вопроса указывается название контрольной точки (без обозначения, sm, md, lg или xl). Вместо второго знака вопроса указывается ширина адаптивного блока, которую он должен иметь на указанной контрольной точке. Ширина адаптивного блока задаётся в относительной форме по умолчанию с помощью числа от 1 до 12 (колонок Bootstrap).

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

Адаптивные блоки как обёрточные контейнеры имеют внутренние отступы слева и справа по 15px. Данные отступы адаптивным блокам в фреймворке Bootstrap 4 устанавливаются с помощью CSS свойств padding-left: 15px и padding-right: 15px.

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

Например, рассмотрим, какую ширину будет иметь следующий адаптивный блок:

...

</div>

Список, объясняющий какую ширину адаптивный блок, будет иметь на разных контрольных точках:

класс col-12 будет задавать ширину, которую блок будет иметь по умолчанию; она будет равна 12 колонкам Bootstrap (т.е. 12/12*100%=100% от ширины ряда); эту ширину этот блок будет иметь начиная с xs;
класс col-sm-9 переопределит ширину блока начиная с действия контрольной точки sm; начиная с sm этот блок будет иметь ширину, равную 9 колонкам Bootstrap (т.е. 9/12*100%=75% от ширины ряда);
класс col-md-7 установит ширину блока, равную 7 колонкам Bootstrap (т.е. 7/12*100%=58,3% от ширины ряда), начиная с md;
класс col-lg-5 установит начиная с действия контрольной точки lg ширину блоку, равную 5 колонкам Bootstrap (т.е. 5/12*100%=41,6% от ширины ряда);
класс col-xl-3 задаст блоку, на экранах с шириной viewport больше xl, ширину равную 3 колонкам Bootstrap (т.е. 3/12*100%=25% от ширины ряда).

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

Примеры:

Адаптивный блок <div class="col-12 col-sm-6 col-xl-3"> на устройствах md и lg будет иметь ширину, равную 6 колонкам Bootstrap: (12) -> sm(6) -> md -> lg -> xl(3).
Адаптивный блок <div class="col-8 col-md-4"> на устройстве sm будет иметь ширину, равную 8 колонкам Bootstrap, а на устройствах lg и xl - ширину, равную 4 колонкам Bootstrap: (8) -> sm -> md(4) -> lg -> xl.
Адаптивный блок <div class="col-6"> на всех устройствах будет иметь ширину, равную 6 колонкам Bootstrap: (6) -> sm -> md -> lg -> xl.

Адаптивные блоки без указания количества колонок

В сетке Bootstrap 4 имеются специальные классы col, col-sm, col-md, col-lg, col-xl, col-auto, col-sm-auto, col-md-auto, col-lg-auto и col-xl-auto.

Первая группа классов (col, col-sm, col-md, col-lg, col-xl) предназначена для создания адаптивных блоков, ширина которых будет зависеть от свободного пространства в линии. Распределение незанятой ширины (свободного пространства) линии между всеми такими блоками осуществляется равномерно. Кроме этого, данные адаптивные блоки перед распределением свободного пространства линии (по умолчанию) имеют нулевую ширину.

Рассмотрим несколько примеров.

1. Создание в ряду 5 адаптивных блоков с одинаковой шириной.

</div>

Расчёт ширины:

свободное пространство линии - 100% (т.к. их ширина равна 0);
ширина каждого адаптивного блока - 20% (100%/5);

2. Ширина блоков с классом col при наличии в линии адаптивного блока с количеством колонок.

<div class="col-7"> 7 колонок </div>

</div>

Расчёт ширины:

свободное пространство линии - 41,67% ((12-7)/12*100%);
ширина каждого адаптивного блока, которые заданы без указания ширины - 13,89% (41,67%/3).

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

Исправить это можно 2 способами:

посредством установки адаптивным блокам границы

.col { border: 1px solid transparent; }

с помощью задания адаптивным блокам CSS-свойства flex-basis

.col { flex: 1 0 20%; }

Кроме этого, сетка Bootstrap 4 позволяет располагать адаптивные блоки без указания количества колонок на нескольких линиях.

</div>

Данное действие осуществляется посредством добавления в разметку перед адаптивным блоком, который должен начинаться с новой линии, пустого div элемента с классом w-100.

Если данное действие необходимо использовать только для некоторых контрольных точек, то к нему (классу w-100) дополнительно нужно ещё добавить служебные отзывчивые классы Bootstrap 4.

В этом примере переноситься на новую линию адаптивные блоки будут только до действия контрольной точки md:

</div>

Вторая группа классов (col-auto, col-sm-auto, col-md-auto, col-lg-auto и col-xl-auto) предназначена для создания адаптивных блоков, ширина которых будет определяться в соответствии с их содержимым.

Например:

<div class="col-md-auto"> (2) - ширина на контрольных точках md, lg и xl будет определяться на основании содержимого</div>

</div>

В результате:

на xs и sm адаптивные блоки будут располагаться вертикально (один под другим) и занимать всю ширину ряда;
на md адаптивный блок 2 будет иметь ширину, необходимую для отображения своего содержимого; если блок 2 не будет занимать всю ширину ряда, то адаптивные блоки 1 и 3 поделят его между собой поровну; если же блок 2 будет занимать всю ширину линии, то картина будет такая же, как на контрольных точках xs и sm;
на lg и xl адаптивный блок 2 будет иметь ширину, необходимую для отображения своего содержимого; если блок 2 не будет занимать всю ширину ряда, то блок 3 будет занимать ширину, равную 2 колонкам Bootstrap, а блок 1 - всю оставшуюся ширину ряда; если блок 2 будет занимать всю ширину ряда, то разметка будет такая же, как на xs и sm, только 3 блок на 3 линии будет иметь ширину, равную 2 колонкам Bootstrap.

Расположение адаптивных блоков в ряду

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

</div>

Рассмотрим ещё один пример, в котором адаптивные блоки имеют различную ширину на различных контрольных точках:

</div>

Основной принцип верстки макета

Основной принцип верстки макета веб-страницы на сетке Bootstrap 4 заключается во вкладывании одних адаптивных блоков в другие.

При этом ширина адаптивных блоков это всегда относительная величина, которая задаётся в колонках Bootstrap и зависит только от ширины родителя, т.е. ряда.

Размещать контент веб-страницы следует только в адаптивных блоках.

Например, в имеющийся макет, а именно в адаптивный блок col-8 вложим ещё 2 блока:

</div>

Для этого предварительно необходимо в блок col-8 положить ряд (контейнер для адаптивных блоков):

</div>

После этого добавим 2 адаптивных блока в ряд:

</div>

</div>

Выравнивание адаптивных блоков

Выравнивания адаптивных блоков в горизонтальном и вертикальном направлении осуществляется в Bootstrap 4 с помощью служебных flex-классов.

Вертикальное выравнивание адаптивных блоков

Выравнивание адаптивных блоков в пределах линии ряда по вертикали осуществляется посредством одного из следующих классов, который необходимо дополнительно добавить к row:

align-items-start (относительно начала линии);
align-items-center (по центру);
align-items-end (относительно конца).

Например, выровняем все адаптивные блоки по центру линии ряда:

</div>

По умолчанию адаптивные элементы занимают всю высоту линии ряда, в которой они расположены.

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

align-self-start (относительно начала линии);
align-self-center (по центру);
align-self-end (относительно конца).

Данные классы необходимо добавлять к адаптивным блокам, а не к ряду.

Например, выравниваем адаптивный блок 2 по нижнему краю линии:

</div>

Горизонтальное выравнивание адаптивных блоков

Для выравнивания адаптивных блоков в горизонтальном направлении предназначены следующие классы:

justify-content-start (относительно начала линии ряда - по умолчанию);
justify-content-center (по центру);
justify-content-end (относительно конца линии);
justify-content-around (равномерно, с учётом пространства перед первым и последним адаптивным блоком);
justify-content-between (равномерно, с одинаковым пространством между адаптивными блоками).

Например, распределим адаптивные блоки в горизонтальном направлении равномерно:

</div>

Адаптивная разметка без полей

Внутренние поля (padding) адаптивных блоков и внешние отрицательные отступы (margin) рядов можно убрать, если к последним (т.е. к row) добавить класс no-gutters.

</div>

</div>

Обратите внимание, что данный класс (no-gutters) действует только на адаптивные блоки, которые непосредственно размещены в этом ряду. Т.е. на адаптивные блоки, которые не имеют в качестве родителя данный ряд, CSS свойства по убиранию padding не распространятся.

Смещение адаптивных блоков

В Bootstrap 4 смещение адаптивных блоков можно выполнить с помощью:

классов offset (на определённое количество колонок);
служебных (утилитных) margin классов.

Классы offset

Классы offset предназначены для смещения адаптивных блоков вправо на определённое количество колонок.

Данные классы имеют следующий синтаксис:

оffset-{1} или offset-{breakpoint}-{1}

{breakpoint} – контрольная точка, начиная с которой к данному блоку будет применено смещение (если она не указана, то смещение будет применено, начиная с самых крохотных устройств).

{2} – величина смещения, указываемая с помощью количества колонок Bootstrap.

В качестве примера установим смещение адаптивным блокам так, как это показано на рисунке.

</div>

</div>

</div>

Смещение с помощью margin классов

В четвертой версии Bootstrap устанавливать смещение адаптивным блокам также можно с помощью margin отступов (margin-left: auto и (или) margin-right: auto). Эта вариант смещения появился благодаря тому, что сетка в новой версии Bootstrap (4) основывается на CSS Flexbox.

Данный вариант смещения (с помощью margin классов) используют, когда блоки необходимо сместить относительно друг от друга не которую переменную величину.

В Bootstrap 4 для более удобного и адаптивного задания блокам margin отступов (margin-left: auto и (или) margin-right: auto) можно использовать классы ml-auto, mr-auto, ml-{breakpoint}-auto и mr-{breakpoint}-auto.

Bootstrap 4 - Смещение адаптивных блоков

</div>

</div>

</div>

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

По умолчанию адаптивные блоки визуально отображаются в том порядке, в котором они расположены в HTML коде.

Изменить визуальный порядок следования адаптивного блока в Bootstrap 4 выполняется посредством класса order-{visual_number}. Этот класс предназначен для контрольной точки xs. Если порядок элемента нужно определить не для контрольной точки xs, а для sm, md, lg или xl, то используется следующий вариант данного класса:

order-{breakpoint}-{visual_number}

Вместо {visual_number} необходимо указать число от 1 до 12.

Это число и определяет то, как элементы будут визуально следовать на странице. А именно все адаптивные элементы будут визуально следовать в порядке возрастания этих номеров. Если элементу не установлен класс order, то по умолчанию он имеет значение 0.

Например, изменим порядок следования двух адаптивных блоков:

Первый (не упорядоченный, без класса order-)

</div>

Второй, но будет отображаться последним

</div>

Третий, но будет отображаться вторым

</div>

Ещё один пример (с использованием адаптивных классов order):

Первый (на xs, sm будет отображаться вторым)

</div>

Второй (на xs, sm будет отображаться первым)

</div>

Кроме чисел (по умолчанию от 1 до 12) можно ещё использовать слова first и last. Эти классы (order-first, order-{breakpoint}-first, order-last, order-{breakpoint}-last) позволяют соответственно визуально сместить элемент в начало или конец.

Классы order-first и order-{breakpoint}-first оказывают своё действие посредством установки элементу CSS свойства order со значением -1 (order: -1), а классы order-last и order-{breakpoint}-last - CSS свойства order со значением 13 (order: $columns + 1).

Перепишем вышеприведённый пример с использованием классов order, в которых используются ключевые слова first и last:

Первый (на xs, sm будет отображаться последним)

</div>

Последний (на xs, sm будет отображаться первым)

</div>

Пример с использованием классов order как с числом, так и со словами first и last:

<div class="col-3 order-sm-first order-md-8">#8 (XS), #FIRST (SM), #8 (MD, LG и XL)</div>

</div>

Пример адаптивной вёрстки на сетке Boostrap 4

Создадим адаптивную разметку блока веб-страницы, приведённого на рисунке, с помощью сетки Bootstrap 4.

Bootstrap 4 - Пример адаптивной разметки блока

1. Создаём разметку блока для мобильных устройств (xs).

</div>

2. Настраиваем разметку для контрольной точки sm:

</div>

3. Устанавливаем блокам количество колонок, которые они должны иметь на устройствах md и lg:

</div>

4. Создаём разметку для xl:

</div>

Убираем ненужные контрольные точки у адаптивных блоков:

</div>

Кроме этого, изначально в Bootstrap 4 адаптивный блок имеет ширину, равную 100%. Это позволяет при создании адаптивных блоков не указывать количество колонок, если их первоначальная ширина должна быть равна 12 колонок (100%).

</div>

Так же в этом разделе:

MyTetra Share v.0.59