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

приклад

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

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

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

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

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

Рівноширокі

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

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

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

<div class="container text-center">
  <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).

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

Змішуйте та поєднуйте

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

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

Ви також можете використовувати супровідний міксин 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 доступних стовпців не обов’язково).

<div class="container text-center">
  <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-row-columns:  6;

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

// Offset with margins
@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-row-columnsвикористовується для встановлення максимальної кількості стовпців .row-cols-*, будь-яке число, що перевищує це обмеження, ігнорується.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !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або %).