Система сеток Bootstrap4
Bootstrap предоставляет адаптивную, mobile-first, гибкую систему сеток. По мере увеличения размера экрана или области просмотра система автоматически разделяется до 12 столбцов.
Мы также можем определить количество столбцов в соответствии с нашими потребностями:
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 4 | 4 | 4 | |||||||||
| 4 | 8 | ||||||||||
| 6 | 6 | ||||||||||
| 12 | |||||||||||
Система сеток Bootstrap 4 является адаптивной, и столбцы автоматически перестраиваются в зависимости от размера экрана.
Классы сетки
Система сеток Bootstrap 4 имеет следующие 5 классов:
- .col- для всех устройств
- .col-sm- планшеты — ширина экрана равна или больше 576px
- .col-md- настольные мониторы — ширина экрана равна или больше 768px)
- .col-lg- большие настольные мониторы — ширина экрана равна или больше 992px)
- .col-xl- очень большие настольные мониторы — ширина экрана равна или больше 1200px)
Правила системы сеток
Правила системы сеток Bootstrap4:
- Каждый ряд сетки должен быть помещен в контейнер, имеющий
.container(фиксированная ширина) или.container-fluid(ширина во весь экран) класс, чтобы некоторые margin и padding могли устанавливаться автоматически. - Используйте строки для создания горизонтальных групп столбцов.
- Содержимое должно быть помещено в столбцы, и только столбцы могут быть прямыми дочерними элементами строк.
- Предопределенные классы, такие как.rowи.col-sm-4, можно использовать для быстрого создания макетов сетки.
- Столбцы создают промежутки между содержимым столбцов с помощью padding. Этот промежуток задается через.rowsотрицательный margin у класса, чтобы установить смещение первого и последнего столбцов.
- Столбцы сетки создаются путем охвата указанных 12 столбцов. Например, чтобы задать три равных столбца, нужно использовать три.col-sm-4для настройки.
- Самое большое различие между Bootstrap 3 и Bootstrap 4 заключается в том, что Bootstrap 4 теперь использует flexbox (гибкий блок) вместо float. Главное преимущество Flexbox в том, что столбцы сетки без указанной ширины будут автоматически устанавливаться какравные по ширине и высоте столбцы. Если вы хотите узнать больше о Flexbox, вы можете прочитать нашУчебник по CSS Flexbox 。
В следующей таблице показано, как система сетки Bootstrap работает на разных устройствах:
| Сверхмалые устройства <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 4:
Базовая структура сетки Bootstrap4
Первый пример: создайте строку (<div class="row">). Затем добавьте необходимые столбцы (.col-*-*Указывается в классе). Первая звёздочка (*) обозначает адаптивное устройство: sm, md, lg или xl, вторая звёздочка (*) обозначает число, и числа в одной строке в сумме дают 12.
Второй пример: вместо добавленияcolчисел к каждому, позвольте Bootstrap автоматически управлять макетом, каждый столбец в одной строке имеет одинаковую ширину: два"col", каждый будет шириной 50%. Три"col"каждый будет шириной 33.33%, четыре"col"каждый будет шириной 25%, и так далее. Аналогично, вы можете использовать.col-sm|md|lg|xlчтобы задать адаптивные правила для столбцов.
Далее мы можем рассмотреть примеры.
Создайте столбцы одинаковой ширины, автоматическая раскладка Bootstrap
Пример
Попробуйте сами »
Адаптивные колонки одинаковой ширины
В следующем примере показано, как создать адаптивные колонки одинаковой ширины на планшетах и экранах большего размера.На мобильных устройствах, т. е. когда ширина экрана меньше 576px, четыре колонки будут располагаться вертикально друг под другом.:
Пример
Попробуйте сами »
Адаптивные колонки разной ширины
В следующем примере показано, как создать адаптивные колонки разной ширины на планшетах и экранах большего размера.На мобильных устройствах, т. е. когда ширина экрана меньше 576px, две колонки будут располагаться вертикально друг под другом.:
Пример
Попробуйте сами »
Планшет и настольный компьютер
Следующий пример демонстрирует, что на настольных мониторах две колонки занимают по 50% ширины; на планшетах левая колонка — 25%, а правая — 75%; на небольших устройствах, таких как мобильные телефоны, они будут располагаться вертикально друг над другом.
Пример
Попробуйте сами »
Планшет, настольный компьютер, большой настольный монитор, сверхбольшой настольный монитор
Следующий пример показывает соотношения ширины 25%/75%, 50%/50%, 33.33%/66.67% и 16.67%/83.33% на планшетах, настольных компьютерах, больших настольных мониторах и сверхбольших настольных мониторах соответственно. На небольших устройствах, таких как мобильные телефоны, они будут располагаться вертикально друг над другом.
Пример
Попробуйте сами »
Смещённые колонки
Смещённые колонки задаются с помощьюoffset-*-*классов. Первая звёздочка (*) может бытьsm、md、lg、xl, обозначая тип экранного устройства, а вторая звёздочка (*) может быть1до11чисел.
Чтобы использовать смещения на больших экранах, используйте.offset-md-*классы. Эти классы увеличивают левое поле (margin) колонки на*колонок, где*диапазон от1до11。
Например: .offset-md-4 сдвигает .col-md-4 вправо на четыре колонки сетки.
Пример
Попробуйте сами »