TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Как использовать сеточные макеты Bootstrap 5?

932

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

Учебное пособие по разметке сетки в Bootstrap 5

Это руководство содержит следующие темы:

  1. Основы компоновки сетки
  2. Система сетки уровня 5
  3. Простая сетка одинаковой ширины
  4. Ширина одного столбца и изменение размера других столбцов
  5. Содержимое переменной ширины
  6. Сетка из нескольких строк одинаковой ширины
  7. Сложенная горизонтальная сетка
  8. Вертикальное выравнивание
  9. Горизонтальное выравнивание
  10. Сетка без желобов
  11. Обернутая сетка столбцов
  12. Изменение порядка содержимого столбца в сетке
  13. Смещение колонны
  14. Вложение в сетку

1 Основы системы сеток Bootstrap

Система сеток использует три основных класса CSS для создания необходимого макета – .container, .row и .col. Контейнер охватывает весь макет, затем строки, а затем столбцы.

  • Используйте класс .container для центрирования содержимого с фиксированной шириной и .container-fluid для адаптивного макета полной ширины.
  • Вы можете использовать класс .row, чтобы включить все горизонтальные столбцы, разделенные на 12 равных по ширине.
  • Поместите фактическое содержимое в столбцы, используя классы .col или .col- *. Например, строка может содержать два столбца, например .col-8 + .col-4. Столбец должен быть непосредственным потомком класса строки.
  • Все столбцы используют flexbox, что означает, что простое использование класса .col разделит строку на столбцы равной ширины. Например, если вы используете два класса .col в строке, он автоматически разделится на две области по 50%.
  • Вы можете явно определить ширину столбца, например .col-sm-8, которая будет занимать 3/4 (75%) ширины строки.
  • По умолчанию столбцы и строки имеют отступы и поля для лучшей видимости. Вы можете удалить поля и отступы, добавив дополнительный класс «.noglutter» с «.row».
  • Bootstrap 5 предлагает шесть точек останова – очень маленькие (xs), маленькие (sm), средние (md), большие (lg), очень большие (xl) и очень очень большие (xxl).
  • Все уровни точек останова по умолчанию используют класс .col. Любые другие используемые классы будут применяться ко всем устройствам более высокого уровня. Например, .col-sm-4 (small) будет применяться к маленьким, средним, большим и очень большим устройствам.

2-уровневая сеточная система 6

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

Сетка Очень маленький Небольшой Середина Большой Очень большой Очень Очень Большой
Точка останова <576 пикселей ≥576px ≥768px ≥992px ≥1200px ≥1400px
CSS-класс .с- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Максимальная ширина контейнера Нет (авто) 540 пикселей 720 пикселей 960 пикселей 1140 пикселей 1320 пикселей
  • Столбцы – каждая строка делится на 12 столбцов одинаковой ширины.
  • Ширина желоба – 15 пикселей с каждой стороны столбца, всего 30 пикселей.
  • Вложение – Да, столбцы могут быть вложены в другой столбец.
  • Порядок столбцов – Да, содержимое любого столбца в строке можно переупорядочить.

Покажем разные примеры, чтобы лучше понять сетки:

3 Простая сетка равной ширины

Создайте простую сетку с равными столбцами, просто используя классы «.col». При использовании классов «.col» строка будет автоматически разделена на столбцы одинаковой ширины. Например, при использовании двух классов «.col» строка будет разделена на два столбца 1/2 + 1/2. Ниже приведен пример кода для создания 1/2 + 1/2 и 1/3 + 1/3 + 1/3 столбцов с использованием простых классов «.col».

<div class="container"> <div class="row"> <div class="col"> .col </div> <div class="col"> .col </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col"> .col </div> <div class="col"> .col </div> </div> </div>

В браузере будут отображаться одинаковые столбцы, как показано ниже:

Как использовать сеточные макеты Bootstrap 5?

4 Ширина одного столбца и изменение размера других столбцов

Система сетки Bootstrap позволяет вам определять ширину для одного столбца, а остальные столбцы в той же строке будут автоматически настроены. Например, когда вы определяете «col + col-6 + col» в строке, она будет автоматически разделена на столбцы «1/3 + 1/6 + 1/3». Ниже приведены два примера определения одного столбца, а затем оставшиеся два других столбца будут скорректированы соответствующим образом.

Как использовать сеточные макеты Bootstrap 5?

Ниже приведен код для настройки столбцов, окружающих столбец с определенной шириной:

<div class="container"> <div class="row"> <div class="col"> .col </div> <div class="col-6"> .col-6 </div> <div class="col"> .col </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col-5"> .col-5 </div> <div class="col"> .col </div> </div> </div>

5 Содержимое переменной ширины

Ширина столбцов может быть ограничена фактическим содержимым с помощью класса «.col- {breakpoint} -auto», например, «.col-md-auto».

Как использовать сеточные макеты Bootstrap 5?

Средние столбцы в приведенном выше примере автоматически настраиваются по ширине содержимого. Ниже приведен код для приведенного выше макета сетки:

<div class="container"> <div class="row justify-content-md-center"> <div class="col col-lg-2"> .col .col-lg-2 </div> <div class="col-md-auto"> .col-md-auto (variable width) </div> <div class="col col-lg-2"> .col .col-lg-2 </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col-md-auto"> .col-md-auto (variable width) </div> <div class="col col-lg-2"> .col .col-lg-2 </div> </div> </div>

6 сетка из нескольких строк одинаковой ширины

Просто создайте макет из нескольких столбцов в строке, непрерывно используя классы «.col». Вам просто нужно вставить класс «.w-100» там, где требуется точка останова.

Как использовать сеточные макеты Bootstrap 5?

Ниже приведен код для создания нескольких строк одинаковой ширины с использованием одного класса «строка».

<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="w-100"></div> <div class="col">.col</div> <div class="col">.col</div> <div class="w-100"></div> <div class="col">.col</div> <div class="col">.col</div> </div>

7 составная горизонтальная сетка

Вы можете создать сетку с накоплением, используя классы «.col-sm-», которые будут расширены до горизонтальной сетки на рабочем столе.

Как использовать сеточные макеты Bootstrap 5?

Ниже приведен код для создания разметки горизонтальной сетки с накоплением, как показано выше.

<div class="row"> <div class="col-sm-8">.col-sm-8</div> <div class="col-sm-4">.col-sm-4</div> </div> <div class="row"> <div class="col-sm">.col-sm</div> <div class="col-sm">.col-sm</div> <div class="col-sm">.col-sm</div> </div>

8 Вертикальное выравнивание

Вертикальное выравнивание содержимого внутри столбца можно настроить, добавив один из следующих трех классов с классом «.row», как показано ниже:

<div class="row align-items-start"> - Align content vertical top <div class="row align-items-center"> - Align content vertical middle <div class="row align-items-end"> - Align content vertical bottom

9 Горизонтальное выравнивание

Подобно вертикальному выравниванию, вы также можете настроить горизонтальное выравнивание столбцов, как показано ниже:

<div class="container"> <div class="row justify-content-start"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-center"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-end"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-around"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-between"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> </div>

Это приведет к следующему результату в браузере:

Как использовать сеточные макеты Bootstrap 5?

10 сетка без желобов

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

<div class="row no-gutters"> <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div>

Это даст следующий результат:

Как использовать сеточные макеты Bootstrap 5?

11 Сетка столбцов с оберткой

Если у вас более 12 столбцов в строке, столбцы будут автоматически перенесены на следующую строку. Например, в приведенном ниже примере первые два столбца поместятся в первую строку (9 + 2 = 11), а третий и четвертый столбцы будут перенесены в новую строку.

<div class="row"> <div class="col-9">.col-9 (Row 1)</div> <div class="col-2">.col-2 (Row 1)</div> <div class="col-4">.col-4 (Row 1)</div> <div class="col-5">.col-5 (Row 1)</div> </div>

Обернутые столбцы будут выглядеть следующим образом:

Как использовать сеточные макеты Bootstrap 5?

12 Переупорядочивание содержимого столбца в сетке

Bootstrap позволяет вам изменить порядок содержимого столбца независимо от позиции в строке. Например, в приведенном ниже макете сетки используются три столбца.

<div class="container"> <div class="row"> <div class="col"> First .col No order </div> <div class="col order-12"> Second .col .order-12 moved to last </div> <div class="col order-1"> Third .col .order-1 moved to first </div> </div> </div>

Результат выглядит так, как показано ниже, без упорядоченного столбца, будет иметь приоритет над всеми другими упорядоченными столбцами и показан в первом столбце. Контент в столбце с использованием класса «порядок-12» будет перемещен на последнюю позицию. И содержимое в столбце с использованием «порядок-1» будет перемещено в центральную (первую) позицию.

Как использовать сеточные макеты Bootstrap 5?

13 Смещение колонны

Из Bootstrap 4 они отказались от функции смещения столбцов из-за использования макета сетки flexbox. Но вы можете переместить столбцы, используя служебные классы маржи, такие как «ml-auto», «mr-auto» и т.д.

<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div> </div> <div class="row"> <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> </div> <div class="row"> <div class="col-auto mr-auto">.col-auto .mr-auto</div> <div class="col-auto">.col-auto</div> </div>

Ниже приведен результат смещения столбца с использованием классов маржи:

Как использовать сеточные макеты Bootstrap 5?

14 Вложение в сетку

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

<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-8 col-sm-6"> Level 2: .col-8 .col-sm-6 </div> <div class="col-4 col-sm-6"> Level 2: .col-4 .col-sm-6 </div> </div> </div> </div>

Это даст следующий результат:

Как использовать сеточные макеты Bootstrap 5?

Заключение

Как видите, существует множество макетов по умолчанию, которые вы можете создать с помощью системы макетов сетки Bootstrap 5. Также можно создать собственный CSS для создания настраиваемых макетов или изменения одного из макетов по умолчанию. Прочная сетка flexbox и компоненты многократного использования делают Bootstrap 5 более сильным, чем предыдущая версия.


Изучите Bootstrap 5 (индекс )


Источник записи: www.webnots.com
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее