English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Сеточная система Bootstrap 4 является одним из самых быстрых и простых способов создания адаптивных веб-макетов.
Bootstrap предоставляет набор адаптивных, приоритетных для мобильных устройств потоковых сеточных систем, которые автоматически делятся на до 12 столбцов по мере увеличения размера экрана или видоэлемента (viewport).
Мы также можем определить количество столбцов в зависимости от наших потребностей:
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 4 | 4 | 4 | |||||||||
| 4 | 8 | ||||||||||
| 6 | 6 | ||||||||||
| 12 | |||||||||||
Сеточная система Bootstrap 4 является адаптивной, столбцы автоматически перераспределяются в зависимости от размера экрана.
Bootstrap 4 включает в себя предварительно определённые классы сетки, которые позволяют быстро создавать сеточные макеты для различных типов устройств (например, телефоны, планшеты, ноутбуки и стационарные компьютеры и т.д.). Например, вы можете использовать эти классы .col-* для создания столбцов сетки для сверхмалых устройств в вертикальном режиме, а также использовать эти классы .col-sm-* для устройств с маленьким экраном (например, мобильных телефонов в горизонтальном режиме), .col-md-* для устройств среднего размера (например, планшетов), .col-lg-* для больших устройств (например, стационарных компьютеров) и .col-xl-* для超大屏幕 устройства (например, стационарных компьютеров).
Система сетки Bootstrap 4 имеет следующие 5 классов:
.col- для всех устройств
.col-sm- для планшетов - ширина экрана равна или больше 576px
.col-md- для桌面显示器 - ширина экрана равна или больше 768px)
.col-lg- для больших桌面显示器 - ширина экрана равна или больше 992px)
.col-xl- для超大桌面显示器 - ширина экрана равна или больше 1200px)
Правила системы сетки Bootstrap4:
Каждая строка сетки должна быть помешена в контейнер, установленный классом .container (фиксированная ширина) или .container-fluid (полная ширина экрана), чтобы автоматически установить некоторые отступы и внутренние отступы.
Используйте строки для создания горизонтальных групп столбцов.
Содержимое должно быть помещено в столбцы, и только столбцы могут быть прямыми детьми строки.
Предопределенные классы, такие как .row и .col-sm-4, могут быть использованы для быстрого создания сеточной компоновки.
Столбцы создаются, заполнением пространства между содержимым столбцов. Этот интервал устанавливается отрицательным отступом в классе .rows, что создает смещение для первого и последнего столбца.
Столбцы сетки создаются, пересекая указанные 12 столбцовНапример, чтобы установить три одинаковых столбца, нужно использовать три .col-sm-4.
Самое большое различие между Bootstrap 3 и Bootstrap 4 заключается в том, что Bootstrap 4 теперь использует flexbox (эластичный ящик) вместо плавающих. Одним из больших преимуществ Flexbox является то, что столбцы без указанной ширины автоматически устанавливаются какСтолбцы одинаковой ширины и высоты Если вы хотите узнать больше о Flexbox, читайте наш учебник CSS Flexbox.
В таблице ниже summarized, как Bootstrap сетка системы работает на различных устройствах:
| Ультрамаленькие устройства <576px | Планшеты ≥576px | Экраны桌面显示器 ≥768px | Экраны大桌面显示器 ≥992px | Экраны超大桌面显示器 ≥1200px | |
|---|---|---|---|---|---|
| Максимальная ширина контейнера | None (auto) | 540px | 720px | 960px | 1140px |
| Префикс класса | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| Количество столбцов и | 12 | ||||
| Ширина интервала | 30px (по бокам каждого столбца 15px) | ||||
| Вложенность | Да | ||||
| Сортировка столбцов | Да | ||||
Эти классы можно использовать вместе, чтобы создать более гибкую страницу.
Данный код представляет собой базовую структуру сетки Bootstrap 4:
<!-- Первый пример: контролировать ширину колонок и способ их отображения на различных устройствах --> <div class="row"> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <!-- Второй пример: или позвольте Bootstrap автоматически обрабатывать компоновку --> <div class="row"> <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"Каждая колонка имеет ширину 33.33%, четыре "col"Каждая колонка имеет ширину 25%, и так далее. Также вы можете использовать .col-sm|md|lg|xl Установите правила адаптивности колонок.
Давайте посмотрим на пример.
<!DOCTYPE html> <html> <head> <title>Пример Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Hello World!</h1> <p>Создайте три колонки с одинаковой шириной! Попробуйте добавить новый div с классом "col" в div с классом "row", и будут видны четыре колонки с одинаковой шириной.</p> <div class="row"> <div class="col" style="background-color:lavender;">.col</div> <div class="col" style="background-color:orange;">.col</div> <div class="col" style="background-color:lavender;">.col</div> </div> </div> </body> </html>Проверьте это ‹/›
Следующий пример демонстрирует, как создать колонки с одинаковой шириной на планшетах и больших экранах. На мобильных устройствах, когда ширина экрана меньше 576px, четыре колонки будут расположены вертикально друг над другом:
<!DOCTYPE html> <html> <head> <title>Пример Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Hello World!</h1> <p>Измените размер окна браузера, чтобы увидеть эффект.</p> <p>На мобильных устройствах, когда ширина экрана меньше 576px, четыре колонки будут расположены вертикально друг над другом.</p> <div class="row"> <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div> <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div> <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div> <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div> </div> </div> </body> </html>Проверьте это ‹/›
Следующий пример демонстрирует создание нешироких колонок с адаптивной шириной на планшетах и больших экранах. На мобильных устройствах, когда ширина экрана меньше 576px, два столбца будут выстраиваться друг над другом.:
<!DOCTYPE html> <html> <head> <title>Пример Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Hello World!</h1> <p>Измените размер окна браузера, чтобы увидеть эффект.</p> <p>На мобильных устройствах, когда ширина экрана меньше 576px, четыре столбца будут выстраиваться друг над другом.</p> <div class="row"> <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div> </div> </div> </body> </html>Проверьте это ‹/›
В данном примере показано, что ширина двух столбцов на экране компьютера составляет 50%, если на планшете, то левый столбец составляет 25%, правый столбец 75%, на мобильных устройствах и других малогабаритных устройствах элементы будут показываться друг над другом.
<!DOCTYPE html> <html> <head> <title>Пример Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Масштабная сетка для планшетов и компьютеров</h1> <p>В данном примере показано, что ширина двух столбцов на экране компьютера составляет 50%, если на планшете, то левый столбец составляет 25%, правый столбец 75%, на мобильных устройствах и других малогабаритных устройствах элементы будут показываться друг над другом.</p> </p> <p>Измените размер окна браузера, чтобы увидеть эффект.</p> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-6 bg-success"> w3codebox </div> <div class="col-sm-9 col-md-6 bg-warning"> базовый учебник </div> </div> </div> </div> </body> </html>Проверьте это ‹/›
В данном примере ширина比例为: 25%/75%, 50%/50%, 33.33%/66.67%, 16.67/83.33% для планшетов, компьютеров, больших компьютерных мониторов и超大ных компьютерных мониторов, на мобильных устройствах и других малогабаритных устройствах элементы будут показываться друг над другом.
<!DOCTYPE html> <html> <head> <title>Пример Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Планшеты, компьютеры, большие компьютерные мониторы,超大ные компьютерные мониторы</h1> <p>В данном примере ширина比例为: 25%/75%, 50%/50%, 33.33%/66.67%, 16.67/83.33% для планшетов, компьютеров, больших компьютерных мониторов и超大ных компьютерных мониторов, на мобильных устройствах и других малогабаритных устройствах элементы будут показываться друг над другом.</p> <p>Измените размер окна браузера, чтобы увидеть эффект.</p> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 bg-success"> w3codebox </div> <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 bg-warning"> базовый учебник </div> </div> </div> </div> </body> </html>Проверьте это ‹/›
Смещение колонок устанавливается через классы offset-*-* . Первый знак (*) может быть sm, md, lg, xl，что означает тип устройства экрана, вторая звезда (*) может быть 1 до 11 числа.
Для использования смещения на больших экранах, пожалуйста, используйте .offset-md-* классы добавляют левый внешнюю отступ (margin) для колонки. * колонок, где * Область варьируется от 1 до 11.
Например: .offset-md-4 — это смещение .col-md-4 вправо на четыре колонки.
<!DOCTYPE html> <html> <head> <title>Пример Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Смещение колонок</h1> <p>.offset-md-4 — это смещение .col-md-4 вправо на четыре колонки.</p> <div class="container-fluid"> <div class="row"> <div class="col-md-4 bg-success">.col-md-4</div> <div class="col-md-4 offset-md-4 bg-warning">.col-md-4 .offset-md-4</div> </div> <div class="row"> <div class="col-md-3 offset-md-3 bg-success">.col-md-3 .offset-md-3</div> <div class="col-md-3 offset-md-3 bg-warning">.col-md-3 .offset-md-3</div> </div> <div class="row"> <div class="col-md-6 offset-md-3 bg-success">.col-md-6 .offset-md-3</div> </div> </div> </div> </body> </html>Проверьте это ‹/›
Надеемся, что вы уже熟悉了 основы новой грид-системы Bootstrap 4. В следующих главах вы узнаете, как использовать этот флексбокс-грид для создания базовых веб-дизайнов.