Bootstrap 4



Сетевая система

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

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

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

Новые или незнакомые с flexbox? Прочтите руководство по работе с флексией CSS Tricks для фона, терминологии, руководств и фрагментов кода.

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

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

Разбивая его, вот как это работает:

  • Контейнеры предоставляют средства для центра и горизонтальной обработки содержимого вашего сайта. Используйте .container для чувствительной ширины пикселя или .container-fluid для width: 100% во всех видовых экранах и размерах устройства.
  • Строки - это обертки для столбцов. Каждый столбец имеет горизонтальное padding (называемое желобом) для управления пространством между ними. Это padding затем противодействует строкам с отрицательными полями. Таким образом, весь контент в ваших столбцах визуально выровнен по левой стороне.
  • В макете сетки содержимое должно быть помещено в столбцы, и только столбцы могут быть непосредственными дочерними элементами строк.
  • Благодаря flexbox столбцы сетки без указанной width автоматически будут размещаться как столбцы равной ширины. Например, четыре экземпляра .col-sm будут автоматически шириной 25% от маленькой точки останова и вверх. Подробнее см. Раздел « Колонки автомакетов».
  • Классы столбцов указывают количество столбцов, которые вы хотели бы использовать, из возможных 12 в строке. Итак, если вам нужны три столбца равной ширины, вы можете использовать .col-4 .
  • width столбца s задается в процентах, поэтому они всегда текучие и имеют размер относительно их родительского элемента.
  • Столбцы имеют горизонтальное padding для создания желобов между отдельными столбцами, однако вы можете удалить margin из строк и padding из столбцов с помощью .no-gutters .row на .row .
  • Чтобы сделать сетку чувствительной, существует пять контрольных точек сетки, по одному для каждой отзывчивой точки останова : все точки останова (сверхбольшие), маленькие, средние, большие и очень большие.
  • Контрольные точки решетки основаны на запросах минимальной ширины носителя, то есть они применяются к одной .col-sm-4 останова и всем вышеперечисленным (например, .col-sm-4 применяется к малым, средним, большим и сверхбольшим устройствам, но не к первой xs останова xs ).
  • Вы можете использовать предопределенные классы сетки (например .col-4 ) или Sass mixins для большей семантической разметки.

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

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

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

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

Очень маленький
<576px
Маленький
≥576px
средний
≥768px
большой
≥992px
Очень большой
≥1200px
Максимальная ширина контейнера Нет (авто) 540px 720px 960px 1140px
Префикс класса .col- .col-sm- .col-md- .col-lg- .col-xl-
Количество столбцов 12
Ширина желоба 30px (15px с каждой стороны столбца)
Вкладываемые да
Колонка заказа да

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

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

Равные ширины

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

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

Столбцы равной ширины можно разбить на несколько строк, но была ошибка Safari flexbox, которая помешала этому работать без явной flex-basis или border . Существуют временные решения для старых версий браузера, но они не должны быть необходимы, если вы обновляетесь.

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</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-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>

Множественная многоуровневая ширина

Создайте столбцы равной ширины, которые охватывают несколько строк, вставив .w-100 где вы хотите, чтобы столбцы .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>

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

Используя один набор .col-sm-* , вы можете создать базовую .col-sm-* систему, которая начинает складываться до горизонтального положения с небольшой точкой останова ( 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-12 col-md-8">.col-12 .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>

Нет водосточных желобов

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

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

Нужен дизайн от края до края? Отбросьте родительский .container или .container-fluid .

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

Разрыв колонны

Разбивание столбцов на новую строку в flexbox требует небольшого взлома: добавьте элемент width: 100% где бы вы ни захотели обернуть свои столбцы в новую строку. Обычно это выполняется с помощью нескольких .row s, но не каждый способ реализации может учитывать это.

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

  <!-- Force next columns to break to new line -->
  <div class="w-100"></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-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

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

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

Классы заказов

Используйте .order- классы для управления визуальным порядком вашего контента. Эти классы реагируют, поэтому вы можете установить order по .order-1.order-md-2 останова (например, .order-1.order-md-2 ). Включает поддержку от 1 до 12 во всех пяти ярусах.

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

Также существуют реагирующие .order-first и .order-last которые изменяют order элемента, применяя order: -1 и order: 13 ( order: $columns + 1 ), соответственно. Эти классы также могут быть смешаны с нумерованными .order-* мере необходимости.

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

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

Вы можете компенсировать столбцы сетки двумя способами: нашими .offset- grid-классами и нашими утилитами margin . Сетки классов имеют размер, соответствующий столбцам, тогда как поля более полезны для быстрых макетов, где ширина смещения является переменной.

Смещение классов

Переместите столбцы вправо, используя .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>

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

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

Маржинальные утилиты

С переходом на flexbox в v4 вы можете использовать утилиты margin, такие как .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>

гнездование

Чтобы .row содержимое в сетку по умолчанию, добавьте новый .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 для создания настраиваемых, семантических и гибких макетов страниц. Наши предопределенные классы сетки используют эти же переменные и mixins для предоставления целого набора готовых к использованию классов для быстро реагирующих макетов.

переменные

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

$grid-columns:      12;
$grid-gutter-width: 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
);

Примеси

Микшины используются вместе с переменными сетки для генерации семантического 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();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

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

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

.example-container {
  width: 800px;
  @include make-container();
}

.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-gutter-width которая равномерно распределяется по padding-left и padding-right для желобов столбцов.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !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 или % ).