Bootstrap 4 Сетки
Bootstrap 4 Сеточная система
Система сетки Bootstrap построена на flexbox и позволяет размещать до 12 столбцов на странице.
Если вы не хотите использовать все 12 столбцов по отдельности, вы можете сгруппировать столбцы вместе, чтобы создать более широкие столбцы:
| диапазон 1 | диапазон 1 | диапазон 1 | диапазон 1 | диапазон 1 | диапазон 1 | диапазон 1 | диапазон 1 | диапазон 1 | диапазон 1 | диапазон 1 | диапазон 1 |
| пролет 4 | пролет 4 | пролет 4 | |||||||||
| пролет 4 | диапазон 8 | ||||||||||
| диапазон 6 | диапазон 6 | ||||||||||
| диапазон 12 | |||||||||||
Система сетки отзывчива, и столбцы автоматически перестраиваются в зависимости от размера экрана.
Убедитесь, что сумма составляет 12 или меньше (не обязательно использовать все 12 доступных столбцов).
Классы сетки
Сеточная система Bootstrap 4 имеет пять классов:
.col-(очень маленькие устройства - ширина экрана менее 576 пикселей).col-sm-(маленькие устройства - ширина экрана равна или больше 576 пикселей).col-md-(средние устройства - ширина экрана равна или больше 768 пикселей).col-lg-(большие устройства - ширина экрана равна или больше 992 пикселей).col-xl-(устройства xlarge — ширина экрана больше или равна 1200 пикселей)
Приведенные выше классы можно комбинировать для создания более динамичных и гибких макетов.
Совет: Каждый класс масштабируется, поэтому, если вы хотите установить одинаковую ширину для
smи md, вам нужно указать только sm.
Базовая структура сетки Bootstrap 4
Ниже приведена базовая структура сетки Bootstrap 4:
<!-- Control the column width, and how they should appear on different
devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Первый пример: создать строку ( <div
class="row">). Затем добавьте нужное количество столбцов (тегов с соответствующими
.col-*-*классами). Первая звездочка (*) представляет скорость отклика: sm, md, lg или xl, а вторая звездочка представляет собой число, которое должно составлять до 12 для каждой строки.
Второй пример: вместо того, чтобы добавлять число к каждому col, пусть загрузчик обрабатывает макет, чтобы создать столбцы одинаковой ширины: два "col"элемента = 50% ширины для каждого столбца. три столбца = 33,33% ширины каждого столбца. четыре столбца = 25% ширины и т. д. Вы также можете использовать .col-sm|md|lg|xl, чтобы сделать столбцы отзывчивыми.
Ниже мы собрали несколько примеров базовых макетов сетки Bootstrap 4.
Три равных столбца
В следующем примере показано, как создать три столбца одинаковой ширины на всех устройствах и экранах любой ширины:
Пример
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Адаптивные столбцы
В следующем примере показано, как создать четыре столбца одинаковой ширины, начиная с планшетов и масштабируя их до очень больших настольных компьютеров. На мобильных телефонах или экранах шириной менее 576 пикселей столбцы будут автоматически располагаться друг над другом :
Пример
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Два неравных отзывчивых столбца
В следующем примере показано, как получить два столбца разной ширины, начиная с планшетов и масштабируя их до больших дополнительных рабочих столов:
Пример
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Совет: вы узнаете больше о сетках Bootstrap 4 позже в этом руководстве.