Понимание системы Bootstrap 4 Grid

1. Что такое Bootstrap Grid System
2. Создание двух колонных макетов
3. Создание трехколоночных макетов
4. Автозагрузка колонок
5. Поведение обтекания колонны
6. Создание многостолбцовых макетов с помощью Bootstrap
7. Смещение столбцов сетки
8. Вложенность столбцов сетки
9. Выравнивание столбцов сетки
10. Выравнивание столбцов сетки по вертикали
11. Горизонтальное выравнивание столбцов сетки
12. Изменение порядка столбцов сетки
13. Создание компактных столбцов

Система сетки Bootstrap - это самый быстрый и простой способ создания адаптивного макета веб-страницы.

Что такое Bootstrap Grid System

Система сетки Bootstrap обеспечивает быстрый и удобный способ создания адаптивных макетов веб-сайтов. Последняя версия Bootstrap 4 представляет новую мобильную версию Flexbox сеточная система, которая соответствующим образом масштабируется до 12 столбцов по мере увеличения размера устройства или области просмотра.

Bootstrap 4 включает в себя предопределенные классы сетки для быстрого создания макетов сетки для различных типов устройств, таких как мобильные телефоны, планшеты, ноутбуки и настольные компьютеры и т. Д. Например, вы можете использовать классы .col- * для создания столбцов сетки для очень маленьких устройств мобильных телефонов. в портретном режиме вы также можете использовать классы .col-sm- * для создания столбцов сетки для устройств с маленьким экраном, таких как мобильный телефон в ландшафтном режиме, классы .col-md- * для устройств со средним экраном, таких как планшеты, .col-. классы lg- * для больших устройств, таких как настольные компьютеры, и классы .col-xl- * для очень больших настольных экранов.

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

Bootstrap 4 Grid System

<576px

≥576px

≥768px

≥992px

≥1200px

Вышеприведенная таблица демонстрирует одну важную вещь: применение любого класса .col-sm- * к элементу будет влиять не только на его стилизацию на небольших устройствах, но также на средних, больших и очень больших устройствах, имеющих ширину экрана больше или равную 540 пикселей, если класс .col-md- *, .col-lg- * или .col-xl- * отсутствует. Аналогично, класс .col-md- * будет влиять не только на стилизацию элементов на средних устройствах, но также на больших и очень больших устройствах, если класс .col-lg- * или .col-xl- отсутствует.

Теперь возникает вопрос, как создавать строки и столбцы, используя эту 12-столбцовую систему реагирования сетки. Ответ довольно прост: сначала создайте контейнер, который будет выполнять функцию оболочки для ваших строк и столбцов с помощью класса .container, затем создайте строки внутри контейнера с помощью класса .row и создайте столбцы внутри любой строки, которую вы можете использовать. классы .col- *, .col-sm- *, .col-md- *, .col-lg- * и .col-xl- *. Столбцы являются фактической областью контента, где мы будем размещать наш контент. Давайте воплотим все эти вещи в реальные действия. Давайте посмотрим, как это на самом деле работает:

Создание двух колонных макетов

В следующем примере показано, как создать макеты из двух столбцов для средних, больших и очень больших устройств, таких как таблицы, ноутбуки, настольные компьютеры и т. Д. Однако на мобильных телефонах (ширина экрана менее 768 пикселей) столбцы автоматически становятся горизонтальными.

Совет: Откройте вывод всех примеров сетки внутри CodeLab редактор в новой пустой вкладке (просто нажмите ссылку рядом с кнопкой «Показать вывод») и измените размер окна браузера, чтобы понять, как на самом деле работает адаптивная сеточная система Bootstrap.

Поскольку система сетки Bootstrap основана на 12 столбцах, поэтому для того, чтобы столбцы сетки находились в одной строке (т. Е. Горизонтально), сумма номеров столбцов сетки в каждой строке не должна превышать 12. Если вы пройдете В приведенном выше примере тщательно вы найдете номера столбцов сетки (то есть col-md- *), суммирующие до двенадцати (6 + 6, 4 + 8 и 3 + 9) для каждой строки.

Создание трехколоночных макетов

Точно так же вы можете создавать другие макеты на основе вышеуказанного принципа. Например, следующий пример, как правило, создает макеты трех столбцов для экранов ноутбуков и рабочих столов. Он также работает на планшетах в ландшафтном режиме, если разрешение экрана больше или равно 992 пикселям (например, Apple iPad). Однако в портретном режиме столбцы сетки, как обычно, будут горизонтальными.

Примечание. Если в одной строке размещено более 12 столбцов сетки, каждая группа дополнительных столбцов в целом переносится на новую строку. Увидеть поведение обтекания столбцов ,

Автозагрузка колонок

Вы также можете создавать столбцы одинаковой ширины для всех устройств (очень маленький, маленький, средний, большой и очень большой), просто используя класс .col, не указывая номер столбца.

Давайте попробуем следующий пример, чтобы понять, как он работает:

Кроме того, вы также можете установить ширину одного столбца и позволить равным размеру столбцов-братьев автоматически изменяться вокруг него. Вы можете использовать предопределенные классы сетки или встроенную ширину.

Если вы попробуете следующий пример, вы найдете столбцы в строке с классом .col равной ширины.

Поведение обтекания колонны

Теперь мы собираемся создать более гибкие макеты, которые изменяют ориентацию столбца в зависимости от размера области просмотра. В следующем примере будет создан макет из трех столбцов на больших устройствах, таких как ноутбуки и настольные компьютеры, а также на планшетах (например, Apple iPad) в альбомном режиме, но на средних устройствах, таких как планшеты в портретном режиме (768 пикселей ≤ ширина экрана <992 пикселей), изменится на макет из двух столбцов, где третий столбец перемещается в нижней части первых двух столбцов.

Как видно из приведенного выше примера, сумма номеров столбцов средней сетки (т. Е. Col-md- *) равна 3 + 9 + 12 = 24> 12, поэтому третье <DIV> элемент с классом .col-md-12, который добавляет дополнительные столбцы сверх максимальных 12 столбцов в .row, переносится на новую строку как один непрерывный элемент на устройствах среднего размера экрана.

Точно так же вы можете создавать еще более адаптируемые макеты для своих сайтов, используя функцию переноса столбцов сетки в Bootstrap. В следующем разделе мы обсудим другой аспект этой функции.

Создание многостолбцовых макетов с помощью Bootstrap

С новой мобильной сеткой Flexbox от Bootstrap 4 вы можете легко управлять тем, как макет вашего сайта будет отображаться на разных типах устройств с разными размерами экрана или области просмотра, таких как мобильные телефоны, планшеты, настольные ПК и т. Д. Давайте рассмотрим следующую иллюстрацию.

На вышеприведенной иллюстрации всего 12 блоков контента на всех устройствах, но их размещение варьируется в зависимости от размера экрана устройства, как в мобильном устройстве макет отображается как сетка с одним столбцом, которая имеет 1 столбец и 12 строк, размещенных друг над другом, в то время как в планшете он представлен в виде сетки с двумя столбцами, которая имеет 2 столбца и 6 строк.

Кроме того, в устройствах с большим экраном, таких как ноутбуки и настольные компьютеры, он отображается в виде сетки с тремя столбцами, которая имеет 3 столбца и 4 строки, и, наконец, в устройствах с очень большим экраном, таких как большие рабочие столы, он отображается в виде сетки с четырьмя столбцами, которая имеет 4 столбца и 3 строк.

Теперь вопрос в том, как мы можем создать такие адаптивные макеты, используя эту новую систему сетки Bootstrap. Начнем с основного целевого устройства. Предположим, что нашим основным целевым устройством является ноутбук или обычный рабочий стол. Так как наш макет ноутбука имеет 3 столбца и 4 строки, то есть макет сетки 3х4, HTML-код для создания такой структуры сетки будет выглядеть примерно так.

Если вы видите результат вышеприведенного примера на ноутбуке или настольном компьютере, у которого ширина экрана или области просмотра больше или равна 992px, но меньше 1200px, вы обнаружите, что макет имеет 4 строки, в каждой строке 3 равных столбца, в результате чего получается сетка 3x4 раскладка.

Теперь пришло время настроить наш макет для других устройств. Для начала давайте настроим его для планшетного устройства. Поскольку внутри планшета наш макет отображается в виде 2х6 сеток (то есть 2 столбца и 6 строк). Итак, добавьте класс .col-md-6 в каждый столбец.

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

Точно так же вы можете настроить макет для очень больших устройств, таких как большой экран рабочего стола, добавив класс .col-xl-3 в каждый столбец, поскольку каждая строка в нашем очень большом макете устройства содержит 4 столбца. Вот окончательный код после объединения всего процесса.

Совет: согласно приведенному выше рисунку нет необходимости настраивать макет для мобильных телефонов; поскольку столбцы на очень маленьких устройствах автоматически становятся горизонтальными и отображаются в виде сетки столбцов 1x12 в отсутствие классов .col- * или .col-sm- *.

Смещение столбцов сетки

Вы также можете перемещать столбцы сетки вправо для выравнивания, используя классы смещения столбцов, такие как .offset-sm- *, .offset-md- *, .offset-lg- * и так далее.

Эти классы смещают столбцы, просто увеличивая их левое поле на указанное количество столбцов. Например, класс .offset-md-4 в столбце .col-md-8 перемещает его вправо на четыре столбца из исходного положения. Попробуйте следующий пример, чтобы увидеть, как это работает:

Вы также можете смещать столбцы с помощью служебных классов margin. Эти классы полезны в ситуациях, когда ширина смещения не фиксирована. Вот пример:

Примечание. Вы можете использовать класс .col-auto для создания столбцов, которые занимают столько места, сколько необходимо, то есть сами размеры столбцов в зависимости от содержимого.

Вложенность столбцов сетки

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

Выравнивание столбцов сетки

Вы можете использовать утилиты выравнивания flexbox для вертикального и горизонтального выравнивания столбцов сетки внутри контейнера. Попробуйте следующие примеры, чтобы понять, как это работает:

Выравнивание столбцов сетки по вертикали

Вы можете использовать классы .align-items-start, .align-items-center и .align-items-end, чтобы выровнять столбцы сетки по вертикали в верхней, средней и нижней частях контейнера соответственно.

Отдельные столбцы внутри строки также могут быть выровнены по вертикали. Вот пример:

Примечание: Вы можете пропустить число в классе сетки .col- * и просто использовать класс .col для создания столбцов одинакового размера для всех устройств (очень маленький, маленький, средний, большой и очень большой).

Горизонтальное выравнивание столбцов сетки

Вы можете использовать классы .justify-content-start, .justify-content-center и .justify-content-end для выравнивания столбцов сетки по горизонтали слева, в центре и справа контейнера, соответственно. Давайте посмотрим на следующий пример, чтобы увидеть, как это работает:

В качестве альтернативы вы можете использовать класс .justify-content-around, чтобы равномерно распределить столбцы сетки с пробелами половинного размера на обоих концах, тогда как вы можете использовать класс .justify-content -ween, чтобы равномерно распределить столбцы сетки там, где размещен первый столбец. в начале и последний столбец в конце. Попробуйте следующий пример, чтобы увидеть, как это на самом деле работает:

Пожалуйста, проверьте tutoiral на css3 flexbox узнать больше о выравнивании гибких элементов.

Изменение порядка столбцов сетки

Вы даже можете изменить визуальный порядок столбцов сетки, не меняя их в фактической разметке. Используйте класс .order-last, чтобы упорядочить столбец последним, тогда как используйте класс .order-first, чтобы упорядочить столбец первым. Давайте рассмотрим пример:

Вы также можете использовать классы .order- * для упорядочивания столбцов сетки в зависимости от номеров заказа. Столбец сетки с номером более высокого порядка следует за столбцом сетки с номером более низкого порядка или столбцом сетки без классов порядка. Включает поддержку от 1 до 12 на всех пяти уровнях сетки.

Создание компактных столбцов

Вы можете удалить желоба по умолчанию между столбцами, чтобы создать компактные макеты, добавив класс .no-gutters в .row. Этот класс удаляет отрицательные поля из строки и горизонтальное заполнение из всех непосредственных дочерних столбцов. Вот пример:

Мы надеемся, что вы поняли основы новой системы сетки Bootstrap 4. В следующих нескольких главах вы узнаете, как создавать базовые макеты веб-страниц с помощью этой грид-системы.

Похожие

Комментарии