Сетка

Bootstrap включает в себя мощную мобильную систему сетки для построения макетов всех форм и размеров. Он основан на макете из 12 столбцов и имеет несколько уровней, по одному для каждого media query range. Вы можете использовать его с Sass mixins или с нашими предопределенными классами.

Содержание

• Содержание
• Как это работает
• Параметры сетки
• Столбцы автоматического макета
  • Равная ширина
  • Установка ширины одного столбца
  • Содержание переменной ширины
  • Равноширинный многострочный
• Адаптивные классы
  • Все точки останова
  • Складывается по горизонтали
  • Смешивать и сочетать
• Выравнивание
  • Вертикальное выравнивание
  • Горизонтальное выравнивание
  • No gutters
  • Обертка столбца
  • Сброс столбцов
• Изменение порядка
  • Гибкий порядок
  • Смещение столбцов
  • Push and pull
• Вложенность
• Sass mixins
  • Переменные
  • Mixins
  • Пример использования
• Настройка сетки
  • Столбцы и желоба
  • Уровни сетки

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

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

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

Dот как это работает:

• Контейнеры обеспечивают средства для центрирования содержимого вашего сайта. Используйте .container для фиксированной ширины или .container-fluid для полной ширины.
• Строки представляют собой горизонтальные группы столбцов, которые обеспечивают правильное расположение столбцов. Мы используем negative margin метод .row, чтобы гарантировать, что весь ваш контент правильно выровнен по левому краю.
• Содержимое должно размещаться в столбцах, и только столбцы могут быть непосредственными потомками строк.
• Благодаря flexbox, столбцы сетки без заданной ширины будут автоматически размещаться с равной шириной. Например, каждый из четырех экземпляров .col-sm автоматически будет иметь ширину 25% для небольших точек останова.
• В классах столбцов указывается количество столбцов, которые вы хотите использовать, из возможных 12 на строку. Итак, если вам нужны три столбца равной ширины, вы можете использовать .col-sm-4.
• width столбцов устанавливается в процентах, поэтому они всегда изменчивы, и размер устанавливается относительно их родительского элемента.
• Столбцы имеют горизонтальный padding для создания желобов между отдельными столбцами, однако вы можете удалить margin из строк и padding из столбцов с помощью .no-gutters на .row.
• Существует пять уровней сетки, по одному для каждой responsive breakpoint: все точки останова (очень маленькие), маленькие, средние, большие и очень большие.
• Уровни сетки основаны на минимальной ширине, то есть они применяются к одному уровню и всем выше него (например, .col-sm-4 применяется к малым, средним, большим и очень большим устройствам).
• Вы можете использовать предопределенные классы сетки или миксы Sass для более семантической разметки.

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

Звучит хорошо? Отлично, давайте перейдем к рассмотрению всего этого в примере.

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

В то время как Bootstrap использует ems или rems для определения большинства размеров, pxs используются для точек останова сетки и ширины контейнера. Это связано с тем, что ширина окна просмотра находится в пикселях и не изменяется с размером шрифта.

Посмотрите, как аспекты сетки Bootstrap работают на нескольких устройствах с помощью удобной таблицы.

Столбцы автоматического макета

Используйте breakpoint-specific column классы для столбцов равной ширины. Добавьте любое количество классов без элементов для каждой требуемой точки останова, и каждый столбец будет иметь одинаковую ширину.

Равная ширина

Например, здесь два макета сетки применимы к каждому устройству и окну просмотра, от xs до xl.

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

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

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

<div class="container">
  <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">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-12 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-12 col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Равноширинный многострочный

Создайте столбцы равной ширины, которые охватывают несколько строк, вставив .w-100 там, где вы хотите, чтобы столбцы разбивались на новую строку. Сделайте перерывы реагирующими, смешивая .w-100 с некоторыми responsive display utilities.

<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>

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

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

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

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

<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>

Stacked по горизонтали

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

<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>

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

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

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col col-md-8">.col .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>

Выравнивание

Используйте утилиты выравнивания flexbox для вертикального и горизонтального выравнивания столбцов.

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

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

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

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Нет gutters

Gutters между столбцами в наших предопределенных классах сетки можно удалить с помощью .no-gutters. Это удаляет отрицательные margins из .row горизонтальный padding из всех непосредственных дочерних столбцов.

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

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

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

<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>

Обертка столбца

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

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

Сброс столбцов

Имея несколько доступных уровней сетки, вы столкнетесь с проблемами, когда в определенных точках останова ваши столбцы не очищаются совершенно правильно, так как один из них выше другого. Чтобы исправить это, используйте комбинацию .clearfix и наших responsive utility классов.

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix hidden-sm-up"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

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

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col.col-sm-6.col-md-5.col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

Изменение порядка

Flex order

Используйте утилиты flexbox для управления визуальным порядком вашего контента.

<div class="container">
  <div class="row">
    <div class="col flex-unordered">
      First, but unordered
    </div>
    <div class="col flex-last">
      Second, but last
    </div>
    <div class="col flex-first">
      Third, but first
    </div>
  </div>
</div>

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

Переместите столбцы вправо с помощью классов .offset-md-*. Эти классы увеличивают левое поле столбца по * столбцам . Например, .offset-md-4 перемещает .col-md-4 по четырем столбцам.

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

Push and pull

Простое изменение порядка наших встроенных столбцов сетки с классами .push-md-* и .pull-md-*.

<div class="row">
  <div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
  <div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
</div>

Вложенность

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

<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>

Sass mixins

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

Переменные

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

$grid-columns:      12;
$grid-gutter-width-base: 30px;

$grid-gutter-widths: (
  xs: $grid-gutter-width-base, // 30px
  sm: $grid-gutter-width-base, // 30px
  md: $grid-gutter-width-base, // 30px
  lg: $grid-gutter-width-base, // 30px
  xl: $grid-gutter-width-base  // 30px
)

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

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

Mixins

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

// Creates a wrapper for a series of columns
@mixin make-row($gutters: $grid-gutter-widths) {
  display: flex;
  flex-wrap: wrap;

  @each $breakpoint in map-keys($gutters) {
    @include media-breakpoint-up($breakpoint) {
      $gutter: map-get($gutters, $breakpoint);
      margin-right: ($gutter / -2);
      margin-left:  ($gutter / -2);
    }
  }
}

// Make the element grid-ready (applying everything but the width)
@mixin make-col-ready($gutters: $grid-gutter-widths) {
  position: relative;
  // Prevent columns from becoming too narrow when at smaller grid tiers by
  // always setting `width: 100%;`. This works because we use `flex` values
  // later on to override this initial width.
  width: 100%;
  min-height: 1px; // Prevent collapsing

  @each $breakpoint in map-keys($gutters) {
    @include media-breakpoint-up($breakpoint) {
      $gutter: map-get($gutters, $breakpoint);
      padding-right: ($gutter / 2);
      padding-left:  ($gutter / 2);
    }
  }
}

@mixin make-col($size, $columns: $grid-columns) {
  flex: 0 0 percentage($size / $columns);
  width: percentage($size / $columns);
  // Add a `max-width` to ensure content within each column does not blow out
  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
  // do not appear to require this.
  max-width: percentage($size / $columns);
}

// Get fancy by offsetting, or changing the sort order
@mixin make-col-offset($size, $columns: $grid-columns) {
  margin-left: percentage($size / $columns);
}

@mixin make-col-push($size, $columns: $grid-columns) {
  left: if($size > 0, percentage($size / $columns), auto);
}

@mixin make-col-pull($size, $columns: $grid-columns) {
  right: if($size > 0, percentage($size / $columns), auto);
}

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

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

Посмотрите его в действии в приведенном примере.

.container {
  max-width: 60em;
  @include make-container();
}
.row {
  @include make-row();
}
.content-main {
  @include make-col-ready();

  @media (max-width: 32em) {
    @include make-col(6);
  }
  @media (min-width: 32.1em) {
    @include make-col(8);
  }
}
.content-secondary {
  @include make-col-ready();

  @media (max-width: 32em) {
    @include make-col(6);
  }
  @media (min-width: 32.1em) {
    @include make-col(4);
  }
}

<div class="container">
  <div class="row">
    <div class="content-main">...</div>
    <div class="content-secondary">...</div>
  </div>
</div>

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

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

Столбцы и gutters

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

$grid-columns:               12 !default;
$grid-gutter-width-base:     30px !default;
$grid-gutter-widths: (
  xs: $grid-gutter-width-base,
  sm: $grid-gutter-width-base,
  md: $grid-gutter-width-base,
  lg: $grid-gutter-width-base,
  xl: $grid-gutter-width-base
) !default;

Уровни сетки

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

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

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

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