Bootstrap grid (сетка)

Что такое сетка Bootstrap 5?

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

Как использовать сетку?

Сетка Bootstrap 5 использует серию контейнеров, строк и столбцов для компоновки и выравнивания содержимого. Она построена с использованием Flexbox и полностью адаптивна. Ниже приведен пример и подробное объяснение того, как объединяется сетка.

<div class="container">
  <div class="row">
    <div class="col-sm">
      Один из трех столбцов
    </div>
    <div class="col-sm">
      Один из трех столбцов
    </div>
    <div class="col-sm">
      Один из трех столбцов
    </div>
  </div>
</div>

В приведенном выше примере создаются три столбца одинаковой ширины на всех устройствах и в окнах просмотра с использованием наших предопределенных классов сетки. Эти столбцы центрируются на странице вместе с родительским элементом .container.

Как это устроено

Вот как объединяется сетка:

• Сетка поддерживает шесть чувствительных контрольных точек. Breakpoints основаны на min-width запросах медиа, то есть они влияют на эту контрольную точку и всех тех , кто над ним (например, .col-sm-4 относится к sm, md, lg, xl, и xxl). Это означает, что вы можете управлять размером и поведением контейнера и столбца с помощью каждой точки останова.

• Контейнеры располагаются по центру и выравнивают содержимое по горизонтали. Используйте .containerдля гибкой ширины в пикселях .container-fluid для width: 100% всех окон просмотра и на всех устройствах или для адаптивного контейнера (например, .container-md) с комбинацией ширины жидкости и пикселя.

• Строки - это оболочки для столбцов. У каждой колонки есть горизонталь padding (называемая желобом) для контроля расстояния между ними. Это padding затем нейтрализуются в строках с отрицательными полями , чтобы обеспечить содержание в ваших колонках визуально выровненный вниз с левой стороны. Строки также поддерживают классы-модификаторы для единообразного применения классов размеров столбцов и Gutters для изменения интервала содержимого.

• Столбцы невероятно гибкие. В каждой строке доступно 12 столбцов шаблона, что позволяет создавать различные комбинации элементов, охватывающих любое количество столбцов. Классы столбцов указывают количество охватываемых столбцов шаблона (например, col-4 четыре). width задаются в процентах, поэтому относительный размер всегда один и тот же.

• Желоба также адаптивны и настраиваются. Классы Gutter доступны во всех точках останова с теми же размерами, что и наши поля и отступы . Измените горизонтальные желоба на .gx-* классы, вертикальные желоба на .gy-* или все желоба на .g-* классы. .g-0 также доступен для удаления желобов.

• Переменные, карты и миксины Sass управляют сеткой. Если вы не хотите использовать предопределенные классы сетки в Bootstrap, вы можете использовать исходный Sass нашей сетки, чтобы создать свой собственный с большей семантической разметкой. Мы также включаем некоторые настраиваемые свойства CSS для использования этих переменных Sass для еще большей гибкости для вас.

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

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

Система сеток Bootstrap может адаптироваться ко всем шести точкам останова по умолчанию и любым настраиваемым вами точкам останова. Шесть уровней сетки по умолчанию следующие:

• Очень маленький (xs)
• Маленький (sm)
• Средний (md)
• Большой (lg)
• Очень большой (xl)
• Очень очень большой (xxl)

Как отмечалось выше, каждая из этих точек останова имеет собственный контейнер, уникальный префикс класса и модификаторы. Вот как меняется сетка через эти точки останова:

Столбцы с автоматической компоновкой

Используйте классы столбцов, специфичные для точки останова, для упрощения определения размера столбца без явного нумерованного класса, например .col-sm-6.

Равной ширины

Например, вот два макета сетки, которые применяются к каждому устройству и окну просмотра, от xs до xxl. Добавьте любое количество классов без единиц для каждой нужной точки останова, и каждый столбец будет одинаковой ширины.

<div class="container">
  <div class="row">
    <div class="col">
      1 из 2
    </div>
    <div class="col">
      2 из 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 из 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 из 3
    </div>
  </div>
</div>

Установка ширины одного столбца

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

<div class="container">
  <div class="row">
    <div class="col">
      1 из 3
    </div>
    <div class="col-6">
      2 из 3 (шире)
    </div>
    <div class="col">
      3 из 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 из 3
    </div>
    <div class="col-5">
      2 из 3 (шире)
    </div>
    <div class="col">
      3 из 3
    </div>
  </div>
</div>

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

Используйте классы col-{ breakpoint }-auto для изменения размера столбцов на основе естественной ширины их содержимого.

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 из 3
    </div>
    <div class="col-md-auto">
      Содержимое переменной ширины
    </div>
    <div class="col col-lg-2">
      3 из 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 из 3
    </div>
    <div class="col-md-auto">
      Содержимое переменной ширины
    </div>
    <div class="col col-lg-2">
      3 из 3
    </div>
  </div>
</div>

Адаптивные классы

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

Breakpoints (контрольные точки)

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

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

Сложено по горизонтали

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

<div class="container">
  <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>
</div>

Смешивать и сочетать

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

<div class="container">
  <!-- Сложите столбцы на мобильном устройстве, сделав один на полную ширину, а другой на половинную ширину. -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Ширина столбцов начинается с 50 % на мобильных устройствах и увеличивается до 33,3 % на настольных компьютерах. -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Ширина столбцов всегда составляет 50 % на мобильных устройствах и компьютерах. -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Рядные столбцы

Используйте адаптивные классы .row-cols-*, чтобы быстро установить количество столбцов, которые лучше всего отображают ваш контент и макет. В то время как обычные классы .col-* применяются к отдельным столбцам (например, .col-md-4), классы столбцов строк устанавливаются для родительского элемента .row как ярлык. С помощью .row-cols-auto вы можете придать столбцам их естественную ширину.

Используйте эти классы столбцов строк, чтобы быстро создавать базовые макеты сетки или управлять макетами карточек.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Столбец 1</div>
    <div class="col">Столбец 2</div>
    <div class="col">Столбец 3</div>
    <div class="col">Столбец 4</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Столбец 1</div>
    <div class="col">Столбец 2</div>
    <div class="col">Столбец 3</div>
    <div class="col">Столбец 4</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Столбец 1</div>
    <div class="col">Столбец 2</div>
    <div class="col">Столбец 3</div>
    <div class="col">Столбец 4</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Столбец 1</div>
    <div class="col">Столбец 2</div>
    <div class="col">Столбец 3</div>
    <div class="col">Столбец 4</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Столбец 1</div>
    <div class="col">Столбец 2</div>
    <div class="col">Столбец 3</div>
    <div class="col">Столбец 4</div>
  </div>
</div>

Вы также можете использовать сопутствующий миксин Sass row-cols():

.element { 
  // Три столбца для начала
  @include row-cols(3);

  // Пять столбцов от средней точки
  @include media-breakpoint-up(md) { 
    @include row-cols(5);
  }
}

Гнездование

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

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Уровень 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Уровень 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Уровень 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Вывод 5 колонок в Bootstrap 5

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

CSS классы

.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%;
}
.row-cols-sm-5 > * {
  flex: 0 0 auto;
  width: 20%;
}
.row-cols-md-5 > * {
  flex: 0 0 auto;
  width: 20%;
}
.row-cols-lg-5 > * {
  flex: 0 0 auto;
  width: 20%;
}
.row-cols-xl-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

Напомню немного классы сетки, для каких размеров экранов:

• xl - min-width: 1200px
• lg - min-width: 992px
• md - min-width: 768px
• sm - min-width: 576px

HTML разметка

А теперь пример самой простой реализации.

<div class="container">
  <div class="row row-cols-5">
    <div class="col">
      Столбец 1
    </div>
    <div class="col">
      Столбец 2
    </div>
    <div class="col">
      Столбец 3
    </div>
    <div class="col">
      Столбец 4
    </div>
    <div class="col">
      Столбец 5
    </div>
  </div>
</div> 

Более сложная реализация 5 колонок

Задача: Нужно на экранах более 992px (lg) вывести 5 колонок, на расширении экрана от 768 до 992 px, чтобы это складывалось в 3 колонки, а на экранах менее 768px складывалось в 2. 

Решение - сама разметка.

<div class="row row-cols-lg-5">
    <div class="col col-md-4 col-6">
        содержимое
    </div>
    <div class="col col-md-4 col-6">
        содержимое
    </div>
    <div class="col col-md-4 col-6">
        содержимое
    </div>
    <div class="col col-md-4 col-6">
        содержимое
    </div>
    <div class="col col-md-4 col-6">
        содержимое
    </div>
</div>

Вот так легко и просто сделать пяти колончатый макет. Если у вас что то не получается спрашивайте.

Какие преимущества предоставляет сетка Bootstrap 5?

Сетка Bootstrap 5 предоставляет множество преимуществ, включая:

• Адаптивность: сетка Bootstrap 5 полностью адаптивна и может использоваться на любых устройствах.
• Гибкость: сетка Bootstrap 5 очень гибкая и может использоваться для создания макетов всех форм и размеров.
• Простота использования: сетка Bootstrap 5 легко использовать благодаря десяткам предопределенных классов.
• Совместимость: сетка Bootstrap 5 совместима со многими браузерами и устройствами.

Sass

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

Переменные

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

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Миксины

Миксины используются вместе с переменными сетки для генерации семантического CSS для отдельных столбцов сетки.

// Создает оболочку для серии столбцов.
@include make-row();

// Подготовьте элемент к сетке (применив все, кроме ширины)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Проявите фантазию, сместив или изменив порядок сортировки.
@include make-col-offset($size, $columns: $grid-columns);

Пример использования

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

.example-container { 
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row { 
  @include make-row();
}

.example-content-main { 
  @include make-col-ready();

  @include media-breakpoint-up(sm) { 
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) { 
    @include make-col(8);
  }
}

.example-content-secondary { 
  @include make-col-ready();

  @include media-breakpoint-up(sm) { 
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) { 
    @include make-col(4);
  }
}

Настройка сетки

Используя наши встроенные сеточные переменные и карты Sass, можно полностью настроить предопределенные классы сеток. Измените количество уровней, размеры медиа-запроса и ширину контейнера, а затем перекомпилируйте.

Колонны и желоба

Количество столбцов сетки можно изменить с помощью переменных Sass. $grid-columns используется для генерации ширины (в процентах) каждого отдельного столбца, а также $grid-gutter-width устанавливает ширину промежутков между столбцами.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

Уровни сетки

Выходя за рамки самих столбцов, вы также можете настроить количество уровней сетки. Если бы вам нужно было всего четыре уровня сетки, вы бы обновили $grid-breakpoints и $container-max-widths примерно так:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

При внесении любых изменений в переменные или карты Sass вам необходимо сохранить изменения и перекомпилировать. В результате будет выведен новый набор предопределенных классов сетки для ширины столбцов, смещений и порядка. Утилиты адаптивной видимости также будут обновлены для использования настраиваемых точек останова. Убедитесь , что установленные значения сетки в px (не rem, em или %).

FAQ (ответы на часто задаваемые вопросы)

$grid-columns: 16;
                
                // Импортируйте сетку Bootstrap 5
                @import "bootstrap/scss/grid";

@mixin col-8 {
                  flex: 0 0 calc((100% / 12) * 8);
                  max-width: calc((100% / 12) * 8);
                }
                
                .col-8 {
                  @include col-8;
                }

<div class="container">
                  <div class="row row-cols-3">
                    <div class="col">Колонка 1</div>
                    <div class="col">Колонка 2</div>
                    <div class="col">Колонка 3</div>
                    <div class="col">Колонка 4</div>
                    <div class="col">Колонка 5</div>
                    <div class="col">Колонка 6</div>
                  </div>
                </div>

Заключение

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