Сетка

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

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

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

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

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

• Контейнеры обеспечивают средства для центрирования содержимого вашего сайта. Используйте .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 из 2
    </div>
    <div class="col">
      1 из 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 из 3
    </div>
    <div class="col">
      1 из 3
    </div>
    <div class="col">
      1 из 3
    </div>
  </div>
</div>

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

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

<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-12 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-12 col-md-auto">
      Ширина переменной контента
    </div>
    <div class="col col-lg-2">
      3 из 3
    </div>
  </div>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      Один из двух столбцов
    </div>
    <div class="col-4">
      Один из двух столбцов
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      Один из двух столбцов
    </div>
    <div class="col-4">
      Один из двух столбцов
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      Один из двух столбцов
    </div>
    <div class="col-4">
      Один из двух столбцов
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      Один из двух столбцов
    </div>
    <div class="col-4">
      Один из двух столбцов
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      Один из двух столбцов
    </div>
    <div class="col-4">
      Один из двух столбцов
    </div>
  </div>
</div>