Система сеток позволяют создавать продвинутые макеты с использованием рядов и колонок. Сетка Bootstrap может содержать до 12 колонок, и вы можете указать, как эти колонки будут масштабироваться для разных размеров области просмотра.
Вот пример сетки Bootstrap.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
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 (от слова small — маленький) означает, что колонка применяется к небольшим устройствам и всему выше. Вы также можете использовать md (от medium — средний), lg (large — большой) и xl (extra large — очень большой) для средних, больших и очень больших размеров.
Для сверхмалых устройств средняя часть в имени опускается. Например, .col-8 занимает восемь колонок на очень маленьких устройствах и выше (другими словами, на всех устройствах).
Размещение по горизонтали
В следующем примере используется та же самая разметка, но в этот раз мы используем md для «средних». Это означает, что если область просмотра меньше «среднего» (то есть меньше 768 пикселей), то ячейки в сетке будут располагаться друг под другом, а каждая ячейка будет занимать всю ширину.
Если вы просматриваете пример на широком экране, то пример может не отличаться от предыдущего. Однако, если вы уменьшите размер своего браузера, ячейки в конечном итоге разместятся друг под другом (предыдущий пример останется без изменений).
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
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>
Размеры сетки
В следующей таблице показано, как различные параметры сетки работают с разными размерами области просмотра.
|
Сверхмалая <576px |
Малая ≥576px |
Средняя ≥768px |
Большая ≥992px |
Сверхбольшая ≥1200px |
| Максимальная ширина контейнера |
Нет (auto) |
540px |
720px |
960px |
1140px |
| Префикс класса |
.col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Число колонок |
12 |
| Межколоночный интервал |
30px (по 15px с каждой стороны колонки) |
| Вложенность |
Да |
| Порядок колонок |
Да |
Обратите внимание, что Bootstrap 4 теперь использует пятиуровневую систему сетки (в отличие от четырёхуровневой в Bootstrap 3).
Что надо знать про сетки
Контейнеры
Сетки должны размещаться в контейнере (с помощью класса .container или .container-fluid) для правильных отступов и выравнивания.
Ряды и колонки
Ряды содержат один или несколько колонок, в колонах хранится содержимое. Только колонки могут быть непосредственными потомками рядов.
padding
Колонки содержат padding, однако для первой и последней колонок padding компенсируется отрицательным margin для ряда. Вот почему вышеприведённые примеры содержат изъян — содержимое внутри сетки выравнивается с содержимым вне сетки.
Более 12 колонок на строку?
Если в ряду размещается более 12 колонок, то они переносятся на новую строку, при этом колонки переносятся группой. Например, если ряд содержит col-md-10 и col-md-3, то весь col-md-3 будет перенесён на новую строку.
Менее 12 столбцов на строку?
Вам не нужно задействовать все 12 столбцов, можете использовать любое количество колонок, вплоть до 12. К примеру, у вас может быть ряд, в которой общее число колонок равно трём.
Классы сетки
Классы сетки применяются к устройствам с шириной экрана, больше или равной размерам точек останова, и переопределяют классы сетки, предназначенных для небольших устройств. Поэтому использование любого класса .col-sm- * повлияет не только на маленькие области просмотра, но и на средние, большие и очень большие (кроме случаев, когда также присутствует col-md-*, col-lg-*, col-xl-*).
Несколько классов
Вы можете включить несколько классов размера для данного элемента. Например, вы можете использовать class="col-sm-10 col-md-6", тем самым указать 10 колонок для маленьких экранов и 6 колонок для средних и больших экранов.