Перейти к основному содержанию

Бутстрап сетка | grid

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

Содержание

Пример

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

Новичок в Flexbox или незнаком с ним? Прочтите это руководство по Flexbox уловок CSS, чтобы узнать об исходной информации, терминологии, рекомендациях и фрагментах кода.
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
<div class="container">
  <div class="row">
    <div class="col-sm">
      Один из трех столбцов
    </div>
    <div class="col-sm">
      Один из трех столбцов
    </div>
    <div class="col-sm">
      Один из трех столбцов
    </div>
  </div>
</div>

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

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

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

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

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

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

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

xs
<576 px
sm
≥576 px
md
≥768 px
lg
≥992 px
xl
≥1200 px
XXL
≥1400px
Контейнер max-width Нет (авто) 540 px 720 px 960 px 1140 px 1320 px
Префикс класса .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
# столбцов 12
Ширина желоба 1,5 бэр (0,75 бэр слева и справа)
Индивидуальные gutters да
Nesting да
Порядок столбцов да

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

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

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

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

1 из 2
2 из 2
1 из 3
2 из 3
3 из 3
<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 также означает, что вы можете установить ширину одного столбца и автоматически изменять размер столбцов-братьев вокруг него. Вы можете использовать предопределенные классы сетки (как показано ниже), миксины сетки или встроенную ширину. Обратите внимание, что размер других столбцов будет изменяться независимо от ширины центрального столбца.

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

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

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

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

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

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

Breakpoints

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

Col
Col
Col
Col
col-8
col-4
<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).

col-sm-8
col-sm-4
col-sm
col-sm
col-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>

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

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

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
<div class="container">
  <!-- 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">
  <div class="row row-cols-2">
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
  </div>
</div>
Столбец
Столбец
Столбец
Столбец
<div class="container">
  <div class="row row-cols-3">
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
  </div>
</div>
Столбец
Столбец
Столбец
Столбец
<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
  </div>
</div>
Столбец
Столбец
Столбец
Столбец
<div class="container">
  <div class="row row-cols-4">
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
  </div>
</div>
Столбец
Столбец
Столбец
Столбец
<div class="container">
  <div class="row row-cols-4">
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
    <div class="col-6">Столбец</div>
    <div class="col">Столбец</div>
  </div>
</div>
Столбец
Столбец
Столбец
Столбец
<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
    <div class="col">Столбец</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 доступных столбцов).

Уровень 1: .col-sm-3
Уровень 2: .col-8 .col-sm-6
Уровень 2: .col-4 .col-sm-6
<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>

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

// 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);

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

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

.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-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 или %).

Комментарии для сайта Cackle