Bootstrap 4 — cетка и колонки
В Bootstrap экран делится на 12 колонок, независимо от размера экрана. Даже маленький экран старого телефона Bootstrap разобьёт на 12 колонок и будет ими управлять.
Посмотрим, как действует система сеток Bootstrap на разных устройствах с разным размером. Всего поддерживается 5 уровней размеров.
 Extra small <576px |
 Small ≥576px |
 Medium ≥768px |
 Large ≥992px |
 Extra large ≥1200px |
|
|---|---|---|---|---|---|
| Максимальная ширина контейнера | None (auto) | 540px | 720px | 960px | 1140px |
| Префикс класса | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Число колонок | 12 | ||||
| Ширина отступа | 30px (auto 15px с каждой стороны столбцы) | ||||
И сайт и верстка могут подстроиться под любую ширину экрана. На Bootstrap делаются целые сайты или используем отдельно блоки-контейнеры (container) для вставки в код страницы.
Автоматическое расположение колонок — равная ширина столбца
Чтоб задать равную ширину колонок в контейнере используем базовый класс col-sm
<div class="container">
<div class="row">
<div class="col-sm">
1 из 2
</div>
<div class="col-sm">
2 из 2
</div>
</div>
<div class="row">
<div class="col-sm">
1 из 3
</div>
<div class="col-sm">
2 из 3
</div>
<div class="col-sm">
3 из 3
</div>
</div>
</div>
Когда мы не указываем точных размеров области просмотра, то она делится поровну на все ячейки. Каждый уровень начинается с минимального размера области просмотра (col-sm) и автоматически применяется к более крупным устройствам, если не отменен.
Разный размер столбцов в ряду
В одном ряду 12 колонок. Мы можем сами назначать сколько колонок занимает столбец.
Автоматическое расположение
Три столбца разной ширины будут отображаться на устройствах с экраном 720px и более.
Столбец с адаптивной шириной
<div class="container">
<div class="row">
<div class="col">
1 из 3
</div>
<div class="col-md-auto">
Столбец адаптивной ширины
</div>
<div class="col col-lg-2">
3 из 3
</div>
</div>
</div>
Отображение на разных устройствах: мобильный и настольный
Система сеток Bootstrap v4 имеет пять уровней классов: xs (очень маленький, этот инфикс класса не используется), sm (маленький), md (средний), lg (большой) и xl (очень большой). Вы можете использовать практически любую комбинацию этих классов для создания более динамичных и гибких макетов.
Каждый уровень классов масштабируется, что означает, что если вы планируете установить одинаковую ширину для md, lg и xl, вам нужно только указать md.
В таком варианте разметки на экранах меньше 720px будет 2 колонки равной величины (col-6), а на устройствах с экраном больше 720пкс колонки будут разной величины (col-md-8 и col-md-4)
На экранах меньше 720px в ряду будет отображаться 1 колонка (col-12), а на устройствах с экраном больше 720пкс будет 2 колонки и разной величины (col-md-8 и col-md-4)
В такой разметке колонки на мобильных телефонах (до 720px) занимают 50% ширины экрана (col-6), а на мониторе более 720px будет 3 одинаковые колонки по 33,3% (col-md-4)
В одном ряду 12 колонок. Если в коде используется больше 12-ти колонок, то каждая дополнительная переносится в новую строку.
Отображение на мобильном, планшете и мониторе компьютера
Если мы хотим управлять отображением на каждом устройстве, иметь разный вид на мобильном, на планшете и на большом мониторе компьютера, то необходимо для каждого устройства указать свой размер колонок.
В такой разметке колонки на мобильных и планшетах с экраном до 960px занимают 50% ширины экрана (col-sm-6), а на мониторе более 960px будет 2 разной величины колонки (col-lg-8 и col-lg-4)
Пример «от обратного»:
<div class="col-12 col-sm-12 col-md-4 col-lg-8 col-xl-8">Текст</div>
Ячейка на мобильных до 576 пкс (col-) и 768 пкс (col-sm-) будет занимать 12 колонок, т.е. всю строку — col-12. На устройствах больше 768пкс и до 992 пкс ячейка занимает 4 колонки (col-md-4), а на устройствах больше 992 пкс (col-lg-) и больше 1200 (col-xl-) ячейка займет 8 колонок.
Данный код можно сократить без потери сути до вот такого:
<div class="col-12 col-md-4 col-lg-8">Текст</div>