Перайсці да асноўнага зместу Перайсці да навігацыі па дакументах
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
21х9
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
  }
}
4х3, потым 2х1
html
<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%)
);