Перейти до основного вмісту Перейти до навігації документами
Check
in English

Коефіцієнти

Використовуйте згенеровані псевдоелементи, щоб змусити елемент підтримувати вибране вами співвідношення сторін. Ідеально підходить для оперативної обробки відео або вставлення слайд-шоу на основі ширини батьківського елемента.

про

Використовуйте помічник співвідношення сторін, щоб керувати співвідношенням сторін зовнішнього вмісту, наприклад <iframe>s, <embed>s, <video>s і <object>s. Ці помічники також можна використовувати для будь-якого стандартного дочірнього елемента HTML (наприклад, <div>або <img>). Стилі застосовуються з батьківського .ratioкласу безпосередньо до дочірнього.

Співвідношення сторін оголошуються в карті Sass і включаються в кожен клас за допомогою змінної CSS, яка також дозволяє користувацькі співвідношення сторін .

Професійна порада! Вам не потрібно frameborder="0"на вашому <iframe>s, оскільки ми замінюємо це для вас у Reboot .

приклад

Оберніть будь-яке вбудовування, наприклад <iframe>, у батьківський елемент за .ratioдопомогою класу співвідношення сторін. Безпосередній дочірній елемент автоматично змінює розмір завдяки нашому універсальному селектору .ratio > *.

html
<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

Співвідношення сторін

Співвідношення сторін можна налаштувати за допомогою класів-модифікаторів. За замовчуванням надаються такі класи коефіцієнтів:

1x1
4x3
16x9
21x9
html
<div class="ratio ratio-1x1">
  <div>1x1</div>
</div>
<div class="ratio ratio-4x3">
  <div>4x3</div>
</div>
<div class="ratio ratio-16x9">
  <div>16x9</div>
</div>
<div class="ratio ratio-21x9">
  <div>21x9</div>
</div>

Спеціальні коефіцієнти

Кожен .ratio-*клас включає спеціальну властивість CSS (або змінну CSS) у селекторі. Ви можете перевизначити цю змінну CSS, щоб створювати власне співвідношення сторін на льоту за допомогою швидкої математики з вашого боку.

Наприклад, щоб створити співвідношення сторін 2x1, установіть --bs-aspect-ratio: 50%на .ratio.

2x1
html
<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>

Ця змінна CSS дозволяє легко змінювати співвідношення сторін у точках зупину. Нижче наведено 4x3 для початку, але змінюється на власний 2x1 на середній точці зупинки.

.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1
  }
}
4x3, потім 2x1
html
<div class="ratio ratio-4x3">
  <div>4x3, then 2x1</div>
</div>

Карта Sass

У межах _variables.scssви можете змінити співвідношення сторін, які ви хочете використовувати. Ось наша типова $ratio-aspect-ratiosкарта. Змініть карту, як вам подобається, і перекомпілюйте свої Sass, щоб використовувати їх.

$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%)
);