Bootstrap 4 Grid System - сетка
Система сетки Bootstrap 4
Система сетки Bootstrap позволяет до 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 |
Система сетки Bootstrap реагирует, и столбцы будут переупорядочены в зависимости от размера экрана: на большом экране он может выглядеть лучше с содержанием организованы в трех колонках, но на маленьком экране было бы лучше, если содержание элементов были сложены на вершине e другие.
Классы сетки
Система Grid Bootstrap 4 имеет пять классов:
.col-
(дополнительные малые устройства-ширина экрана менее 576пкс).col-sm-
(малые устройства-ширина экрана равна или больше, чем 576пкс).col-md-
(средние устройства-ширина экрана, равная или превышающая 768px).col-lg-
(большие устройства-ширина экрана равна или больше, чем 992пкс).col-xl-
(XLarge устройства-ширина экрана, равная или превышающая 1200px)
Приведенные выше классы можно комбинировать для создания более динамичных и гибких макетов.
Совет: Каждый класс масштабируется вверх, так что если вы хотите установить одинаковую ширину sm
и md
, вы только должны указать sm
.
Системные правила сетки
Некоторые правила системы сетки Bootstrap 4:
- Строки должны быть размещены в пределах
.container
(фиксированной ширины) или.container-fluid
(полная ширина) для правильного выравнивания и заполнения - Использование строк для создания горизонтальных групп столбцов
- Содержимое должно быть помещено в столбцы, и только столбцы могут быть непосредственными потомками строк
- Предопределенные классы
.row
, как и.col-sm-4
доступны для быстрого создания макетов сетки - Столбцы создают водосточные желоба (промежутки между содержимым столбцов) с помощью заполнения. Это заполнение смещение в строках для первого и последнего столбца с помощью отрицательного поля на
.rows
- Столбцы сетки создаются путем указания числа 12 доступных столбцов, которые необходимо охватить. Например, три равных столбца будут использовать три
.col-sm-4
- Ширина столбцов в процентах, поэтому они всегда являются жидкими и имеют размер относительно родительского элемента
- Самая большая разница между Bootstrap 3 и Bootstrap 4 заключается в том, что BootStrap 4 теперь использует Flexbox, а не float. Одним из больших преимуществ с Flexbox является то, что столбцы сетки без заданной ширины будут автоматически раскладки как "столбцы с одинаковой шириной" (и равная высота). Пример: три элемента с
.col-sm
каждым автоматически будет 33,33% шириной от небольшой точки останова и выше. Совет: Если вы хотите узнать больше о Flexbox, вы можете прочитать наш CSS Flexbox учебник.
Обратите внимание, что Flexbox не поддерживается в IE9 и более ранних версиях.
Если вам нужна поддержка IE8-9, используйте Bootstrap 3. Это наиболее стабильная версия Bootstrap, и она по-прежнему поддерживается командой для критических исправлений и изменений в документации. Тем не менее, новые функции не будут добавлены к нему.
Базовая структура сетки 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 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 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
чтобы сделать столбцы реагировать.
Параметры сетки
В следующей таблице приведены сводные сведения о том, как система Grid Bootstrap 4 работает на различных размерах экрана.
Extra small (<576px) | Small (>=576px) | Medium (>=768px) | Large (>=992px) | Extra Large (>=1200px) | |
---|---|---|---|---|---|
Префикс класса | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
Поведение сетки | По горизонтали в любое время | Свернутый для запуска, горизонтальный над точками останова | Свернутый для запуска, горизонтальный над точками останова | Свернутый для запуска, горизонтальный над точками останова | Свернутый для запуска, горизонтальный над точками останова |
Container width | None (auto) | 540px | 720px | 960px | 1140px |
Подходит для | Портретные телефоны | Пейзаж телефонов | Таблетки | Ноутбуки | Ноутбуки и настольные компьютеры |
# of columns | 12 | 12 | 12 | 12 | 12 |
Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
Nestable | Да | Да | Да | Да | Да |
Offsets | Да | Да | Да | Да | Да |
Column ordering | Да | Да | Да | Да | Да |
Примеры
В следующих главах показаны примеры систем сеток для различных устройств и ширины экрана:
- С накоплением по горизонтали
- Автоматическая компоновка
- Малые устройства
- Средние устройства
- Большие устройства
- Очень большие устройства
- Другие примеры сеток