Система сеток 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 | |||||||||||
Система сеток адаптивна, а расположение столбцов автоматически меняется в зависимости от размера экрана.
Убедитесь, что сумма в сумме равна 12 или меньше (это не обязательно). использовать все 12 доступных столбцов).
Система сеток Bootstrap 5 имеет шесть классов:
.col- (очень маленькие устройства - ширина экрана менее 576 пикселей)
.col-sm- (маленькие устройства — ширина экрана равна или превышает 576 пикселей)
.col-md- (средние устройства — ширина экрана равна или превышает 768 пикселей)
.col-lg- (большие устройства — ширина экрана равна или превышает 992 пикселя)
.col-xl- (устройства xlarge - ширина экрана равна или превышает 1200 пикселей)
.col-xxl- (устройства xxlarge - ширина экрана равна или превышает 1400 пикселей)
Вышеуказанные классы можно комбинировать для создания более динамичных и гибких макетов.
Совет. Каждый класс масштабируется, поэтому, если вы хотите установить одинаковую ширину для sm и md, вам нужно указать только sm.
Ниже приведена базовая структура сетки Bootstrap 5:
<!-- 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 или xxl, а вторая звездочка представляет собой число, сумма которого должна составлять 12 для каждой строки.
Второй пример: вместо добавления числа к каждому столбцу позвольте начальной загрузке обрабатывать макет, чтобы создать столбцы одинаковой ширины: два " Элементы col"=50% ширины каждого столбца, а три столбца=33,33% ширины каждого столбца. Четыре столбца=ширина 25 % и т. д. Вы также можете использовать .col-sm|md|lg|xl|xxl, чтобы сделать столбцы адаптивными.
Ниже мы собрали несколько примеров базовых макетов сетки Bootstrap 5.
В следующем примере показано, как создать три столбца одинаковой ширины на всех устройства и ширина экрана:
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Three equal width columns</h1>
<p>Note: Try to add a new div with class="col" inside the row class - this will create four equal-width columns.</p>
<div class="row">
<div class="col p-3 bg-primary text-white">.col</div>
<div class="col p-3 bg-dark text-white">.col</div>
<div class="col p-3 bg-primary text-white">.col</div>
</div>
</div>
</body>
</html>
В следующем примере показано, как создать четыре столбца одинаковой ширины, начиная с планшетов и масштабируя их до очень большие рабочие столы. На мобильных телефонах или экранах шириной менее 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>Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-sm-3 p-3 bg-primary text-white">.col</div>
<div class="col-sm-3 p-3 bg-dark text-white">.col</div>
<div class="col-sm-3 p-3 bg-primary text-white">.col</div>
<div class="col-sm-3 p-3 bg-dark text-white">.col</div>
</div>
</div>
</body>
</html>
В следующем примере показано, как получить два столбца различной ширины, начиная с планшеты и масштабирование до больших дополнительных настольных компьютеров:
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Two Unequal Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-sm-4 p-3 bg-primary text-white">.col</div>
<div class="col-sm-8 p-3 bg-dark text-white">.col</div>
</div>
</div>
</body>
</html>
Совет. Подробнее о системе сеток вы узнаете позже в этом руководстве.