Bootstrap 4 Grids - блоки сетка
Система сетки Bootstrap 4
Система сетки Bootstrap построена с Flexbox и позволяет до 12 столбцов на странице.
Если вы не хотите использовать все 12 столбцов по отдельности, можно сгруппировать столбцы для создания более широких столбцов:
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
Система Grid реагирует, и столбцы будут переупорядочиваться автоматически в зависимости от размера экрана.
Убедитесь, что сумма добавляет до 12 или меньше (не требуется использовать все 12 доступных столбцов).
Классы сетки
Система Grid Bootstrap 4 имеет пять классов:
.col-(дополнительные малые устройства-ширина экрана менее 576пкс).col-sm-(малые устройства-ширина экрана равна или больше, чем 576пкс).col-md-(средние устройства-ширина экрана, равная или превышающая 768px).col-lg-(большие устройства-ширина экрана равна или больше, чем 992пкс).col-xl-(XLarge устройства-ширина экрана, равная или превышающая 1200px)
Приведенные выше классы можно комбинировать для создания более динамичных и гибких макетов.
Совет: Каждый класс масштабируется вверх, так что если вы хотите установить одинаковую ширину 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, пусть Bootstrap обрабатывает макет, чтобы создать одинаковые столбцы ширины: два "col" элемента = 50% ширины для каждого Col. три Cols = 33,33% ширины для каждого Col. четыре Cols = 25% ширины и т.д. Можно также использовать, .col-sm|md|lg|xl чтобы сделать столбцы реагировать.
Ниже мы собрали несколько примеров базовых схем Bootstrap 4 Grid.
Три равные колонки
В следующем примере показано, как создать три столбца одинаковой ширины на всех устройствах и ширине экрана:
Пример
<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>
Tip: You will learn more about Bootstrap 4 grids later in this tutorial.