Bootstrap 4 Сеточная система

Bootstrap 4 Сеточная система

Система сетки Bootstrap позволяет использовать до 12 столбцов на странице.

Если вы не хотите использовать все 12 столбцов по отдельности, вы можете сгруппировать столбцы вместе, чтобы создать более широкие столбцы:

Система сетки Bootstrap отзывчива, и столбцы будут перестраиваться в зависимости от размера экрана: на большом экране может лучше выглядеть контент, организованный в три столбца, но на маленьком экране было бы лучше, если бы элементы контента были сложены друг на друга. друг над другом.

Классы сетки

Сеточная система Bootstrap 4 имеет пять классов:

• .col- (очень маленькие устройства - ширина экрана менее 576 пикселей)
• .col-sm- (маленькие устройства - ширина экрана равна или больше 576 пикселей)
• .col-md- (средние устройства - ширина экрана равна или больше 768 пикселей)
• .col-lg- (большие устройства - ширина экрана равна или больше 992 пикселей)
• .col-xl-(устройства xlarge — ширина экрана больше или равна 1200 пикселей)

Приведенные выше классы можно комбинировать для создания более динамичных и гибких макетов.

Совет: Каждый класс масштабируется, поэтому, если вы хотите установить одинаковую ширину для 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 .

Базовая структура сетки Bootstrap 4

Ниже приведена базовая структура сетки Bootstrap 4:

Первый пример: создать строку ( <div class="row">). Затем добавьте нужное количество столбцов (тегов с соответствующими .col-*-*классами). Первая звездочка (*) представляет скорость отклика: sm, md, lg или xl, а вторая звездочка представляет число, которое всегда должно составлять до 12 для каждой строки.

Второй пример: вместо того, чтобы добавлять число к каждому col, пусть загрузчик обрабатывает макет, чтобы создать столбцы одинаковой ширины: два "col"элемента = 50% ширины для каждого столбца. три столбца = 33,33% ширины каждого столбца. четыре столбца = 25% ширины и т. д. Вы также можете использовать .col-sm|md|lg|xl, чтобы сделать столбцы отзывчивыми.

Параметры сетки

В следующей таблице показано, как система сетки Bootstrap 4 работает на разных размерах экрана:

Примеры

В следующих главах показаны примеры систем сетки для различных устройств и ширины экрана:

• Сложенные по горизонтали
• Очень маленький макет
• Маленькие устройства
• Средние устройства
• Большие устройства
• Очень большие устройства
• Еще примеры сетки