Система сеток позволяет создавать сложные макеты с использованием строк и колонок. В системе сетки Bootstrap может быть до 12 колонок и вы можете указать, как эти колонки будут масштабироваться для разных размеров области просмотра.
Вот пример сетки Bootstrap:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
.bs-example div[class^="col"] {
border: 1px solid white;
background: #f5f5f5;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
</style>
<div class="bs-example">
<!-- Сетка Bootstrap -->
<div class="row">
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
</div>
<div class="row">
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-7">.col-sm-7</div>
</div>
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
<div class="row">
<div class="col-sm-5">.col-sm-5</div>
<div class="col-sm-7">.col-sm-7</div>
</div>
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
<div class="row">
<div class="col-sm-12">.col-sm-12</div>
</div>
</div>
На небольших экранах каждая ячейка сетки будет располагаться друг под другом. На больших экранах сетка работает в полную силу, как и предполагалось.
Цифры в конце названия каждого класса означают количество колонок, которые он охватывает. Так, .col-sm-1 охватывает одну колонку, а .col-sm-8 — восемь. Символ sm означает, что колонки применяются к маленьким устройствам и всем выше.
Размеры сетки
Ниже приведены шесть уровней сетки по умолчанию:
| Контрольная точка |
Размер |
| xs |
Очень маленький |
| sm |
Маленький |
| md |
Средний |
| lg |
Большой |
| xl |
Очень большой |
| xxl |
Огромный |
В следующей таблице показано, как различные варианты сетки работают с разными размерами области просмотра.
|
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1200px |
| Поведение сетки |
Всегда горизонтальна |
Сперва свёрнута, горизонтальна выше контрольных точек |
| Максимальная ширина контейнера |
Нет (auto) |
540px |
720px |
960px |
1140px |
1320px |
| Префикс класса |
.col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| Число колонок |
12 |
| Ширина промежутка |
1.5rem (.75rem слева и справа) |
| Индивидуальные промежутки? |
Да |
| Вкладывается? |
Да |
| Порядок колонок? |
Да |
Другой пример
Следующий пример использует ту же разметку, что и в первом примере, но на этот раз мы применим md для среднего размера.
В зависимости от ширины области просмотра этот пример может ничем не отличаться от предыдущего. Однако если вы измените размер браузера в меньшую сторону, ячейки в конечном итоге сместятся в положение «друг под другом» (а предыдущий пример останется прежним).
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
.bs-example div[class^="col"] {
border: 1px solid white;
background: #f5f5f5;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
</style>
<div class="bs-example">
<!-- Сетка Bootstrap -->
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-7">.col-md-7</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-5">.col-md-5</div>
<div class="col-md-7">.col-md-7</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<div class="row">
<div class="col-md-12">.col-md-12</div>
</div>
</div>