in English

Сітка системи

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

На цій сторінці

приклад

Система сітки Bootstrap використовує серію контейнерів, рядків і стовпців для компонування та вирівнювання вмісту. Він створений за допомогою flexbox і повністю реагує. Нижче наведено приклад і докладне пояснення того, як система сітки поєднується.

Вперше чи не знайомі з flexbox? Ознайомтеся з посібником CSS Tricks flexbox , щоб отримати довідкову інформацію, термінологію, рекомендації та фрагменти коду.

Колонка

<div class="container">
  <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 доступні для всіх точок зупину, з усіма тими самими розмірами, що й наші поля та відступи . Змініть горизонтальні жолоби за допомогою .gx-*класів, вертикальні жолоби за допомогою .gy-*або всі жолоби за допомогою .g-*класів. .g-0також доступний для видалення жолобів.
Змінні, карти та міксини Sass живлять мережу. Якщо ви не хочете використовувати попередньо визначені класи сітки в Bootstrap, ви можете використати джерело Sass нашої сітки, щоб створити свій власний з більшою семантичною розміткою. Ми також включаємо деякі власні властивості CSS для використання цих змінних Sass для ще більшої гнучкості для вас.

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

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

Система сітки Bootstrap може адаптуватися до всіх шести контрольних точок за замовчуванням і будь-яких контрольних точок, які ви налаштовуєте. Шість рівнів сітки за замовчуванням такі:

Дуже малий (xs)
Маленький (см)
Середній (MD)
Великий (lg)
Дуже великий (xl)
Дуже великий (xxl)

Як зазначалося вище, кожна з цих точок зупину має власний контейнер, унікальний префікс класу та модифікатори. Ось як змінюється сітка в цих точках зупину:

	xs <576 пікселів	см ≥576 пікселів	md ≥768 пікселів	lg ≥992 пікселів	xl ≥1200 пікселів	xxl ≥1400 пікселів
Контейнер`max-width`	Немає (авто)	540 пікселів	720 пікселів	960 пікселів	1140 пікселів	1320 пікселів
Префікс класу	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
Кількість стовпців	12
Ширина ринви	1,5 rem (0,75 rem ліворуч і справа)
Водостоки на замовлення	Так
Нестабільний	Так
Упорядкування колонок	Так

Автоматичне розташування колонок

Використовуйте специфічні для точки зупину класи стовпців для легкого визначення розміру стовпця без явного пронумерованого класу, наприклад .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 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 також означає, що ви можете встановити ширину одного стовпця та автоматично змінювати розмір стовпців-сестерів навколо нього. Ви можете використовувати попередньо визначені класи сітки (як показано нижче), міксини сітки або вбудовані ширини. Зауважте, що розмір інших стовпців змінюватиметься незалежно від ширини центрального стовпця.

1 з 3

2 з 3 (ширше)

3 з 3

1 з 3

2 з 3 (ширше)

3 з 3

<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класи для визначення розміру стовпців на основі природної ширини їх вмісту.

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

кол

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

<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

<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">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Колонка

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

Колонка

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">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 доступних стовпців не обов’язково).

Рівень 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">
      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-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);

// 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-breakpointsand $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або %).