Source

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

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

Як це працює

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

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

Одна з трьох колон

<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встановлюються у відсотках, тому вони завжди плавні та мають розмір відносно батьківського елемента.
Стовпці є горизонтальними padding, щоб створювати жолоби між окремими стовпцями, однак ви можете видалити marginз рядків і paddingзі стовпців за допомогою .no-guttersна .row.
Щоб зробити сітку адаптивною, існує п’ять точок розриву сітки, по одній для кожної відповідної точки розриву : усі точки розриву (дуже маленькі), малі, середні, великі та дуже великі.
Точки розриву сітки базуються на медіа-запитах мінімальної ширини, тобто вони застосовуються до цієї однієї точки розриву та всіх, що знаходяться над нею (наприклад, .col-sm-4застосовуються до малих, середніх, великих і дуже великих пристроїв, але не до першої xsточки розриву).
Ви можете використовувати попередньо визначені класи сітки (наприклад, .col-4) або міксини Sass для більшої семантичної розмітки.

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

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

Хоча Bootstrap використовує ems або rems для визначення більшості розмірів, pxs використовуються для точок розриву сітки та ширини контейнера. Це пояснюється тим, що ширина вікна перегляду визначається в пікселях і не змінюється разом із розміром шрифту .

Подивіться, як аспекти сіткової системи Bootstrap працюють на кількох пристроях за допомогою зручної таблиці.

	Дуже малий <576 пікселів	Малий ≥576 пікселів	Середній ≥768 пікселів	Великий ≥992 пікселів	Дуже великий ≥1200 пікселів
Максимальна ширина контейнера	Немає (авто)	540 пікселів	720 пікселів	960 пікселів	1140 пікселів
Префікс класу	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
Кількість стовпців	12
Ширина ринви	30 пікселів (15 пікселів з кожного боку стовпця)
Нестабільний	Так
Упорядкування колонок	Так

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

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

Рівноширокі

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

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>

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

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>

Рівноширокі багаторядні

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

кол

col-8

col-4

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

col-sm-8

col-sm-4

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

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

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

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- 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. Це видаляє мінус margins .rowі горизонталь paddingз усіх безпосередніх дочірніх стовпців.

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

Потрібен дизайн від краю до краю? Відкинути батьківський .containerабо .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

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

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<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 стовпців, кожна група додаткових стовпців буде перенесена на новий рядок як єдине ціле.

.col-9

.col-4
Оскільки 9 + 4 = 13 > 12, цей div із 4 стовпцями переноситься на новий рядок як один безперервний блок.

.col-6
Наступні стовпці продовжуються вздовж нового рядка.

<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%, де ви хочете перенести свої стовпці на новий рядок. Зазвичай це досягається за допомогою кількох .rows, але не кожен метод реалізації може це врахувати.

.col-6 .col-sm-3

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

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

.col-6 .col-sm-4

<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). 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-класами сітки та нашими утилітами margin . Розмір класів сітки відповідає стовпцям, тоді як поля більш корисні для швидких макетів, де ширина зсуву є змінною.

Залікові класи

Перемістіть стовпці вправо за допомогою .offset-md-*класів. Ці класи збільшують ліве поле стовпця за *стовпцями. Наприклад, .offset-md-4переміщається .col-md-4по чотирьох колонках.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

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

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

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<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 у версії 4 ви можете використовувати утиліти маржин, як-от .mr-autoпримусове віддалення однорідних стовпців один від одного.

.col-md-4

.col-md-4 .ml-авто

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-авто

<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і набір .col-sm-*стовпців у наявний .col-sm-*стовпець. Вкладені рядки мають включати набір стовпців, у сумі яких 12 або менше (використовувати всі 12 доступних стовпців не обов’язково).

Рівень 1: .col-sm-9

Рівень 2: .col-8 .col-sm-6

Рівень 2: .col-4 .col-sm-6

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

Змінні

Змінні та карти визначають кількість стовпців, ширину межі та точку медіа-запиту, з якої починаються плаваючі стовпці. Ми використовуємо їх для генерації попередньо визначених класів сітки, задокументованих вище, а також для настроюваних міксинів, перелічених нижче.

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

Приклад використання

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

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