Сеточная система

Пример

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

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

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

Как это работает

Разбивая это, вот как сетка объединяется:

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

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

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

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

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

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

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

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

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

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

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

Автомакет столбцов

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

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

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

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

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

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

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

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

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

<div class="container text-center">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Отзывчивые классы

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

Все точки останова

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

<div class="container text-center">
  <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 text-center">
  <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 text-center">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <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>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <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>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <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 text-center">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container text-center">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container text-center">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

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

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Вложение

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

<div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="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>
</div>

Сасс

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

Переменные

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

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

$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 для отдельных столбцов сетки.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@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);
  }
}

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

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

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

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

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

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !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или %).