Система сеток Bootstrap 4

Система сеток позволяют создавать продвинутые макеты с использованием рядов и колонок. Сетка Bootstrap может содержать до 12 колонок, и вы можете указать, как эти колонки будут масштабироваться для разных размеров области просмотра.

Вот пример сетки Bootstrap.

Числа в конце каждого имени класса означают количество занимаемых колонок. Так, .col-sm-1 занимает одну колонку, а .col-sm-8 — восемь. sm (от слова small — маленький) означает, что колонка применяется к небольшим устройствам и всему выше. Вы также можете использовать md (от medium — средний), lg (large — большой) и xl (extra large — очень большой) для средних, больших и очень больших размеров.

Для сверхмалых устройств средняя часть в имени опускается. Например, .col-8 занимает восемь колонок на очень маленьких устройствах и выше (другими словами, на всех устройствах).

Размещение по горизонтали

В следующем примере используется та же самая разметка, но в этот раз мы используем md для «средних». Это означает, что если область просмотра меньше «среднего» (то есть меньше 768 пикселей), то ячейки в сетке будут располагаться друг под другом, а каждая ячейка будет занимать всю ширину.

Если вы просматриваете пример на широком экране, то пример может не отличаться от предыдущего. Однако, если вы уменьшите размер своего браузера, ячейки в конечном итоге разместятся друг под другом (предыдущий пример останется без изменений).

Размеры сетки

В следующей таблице показано, как различные параметры сетки работают с разными размерами области просмотра.

Обратите внимание, что 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 колонок для средних и больших экранов.