Каэфіцыенты

Выкарыстоўвайце згенераваныя псеўдаэлементы, каб прымусіць элемент падтрымліваць абранае вамі суадносіны бакоў. Ідэальна падыходзіць для хуткай апрацоўкі ўбудаваных відэа ці слайд-шоў у залежнасці ад шырыні бацькоўскага элемента.

На гэтай старонцы

Аб

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

Суадносіны бакоў аб'яўлены ў карце Sass і ўключаны ў кожны клас праз зменную CSS, якая таксама дазваляе карыстальніцкія суадносіны бакоў .

Прафесійная парада! Вам не трэба frameborder="0"на вашым <iframe>s, таму што мы адмяняем гэта для вас у Reboot .

Прыклад

Абгарніце любое ўбудаванне, напрыклад <iframe>, у бацькоўскі элемент з .ratioдапамогай класа суадносін бакоў. Памер непасрэднага даччынага элемента вызначаецца аўтаматычна дзякуючы нашаму ўніверсальнаму селектару .ratio > *.

<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

21х9

<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

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

4х3, потым 2х1

<div class="ratio ratio-4x3">
  <div>4x3, then 2x1</div>
</div>

Карта саса

У межах _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%)
);