Каэфіцыенты
Выкарыстоўвайце згенераваныя псеўдаэлементы, каб прымусіць элемент падтрымліваць абранае вамі суадносіны бакоў. Ідэальна падыходзіць для хуткай апрацоўкі ўбудаваных відэа ці слайд-шоў у залежнасці ад шырыні бацькоўскага элемента.
Аб
Выкарыстоўвайце памочнік па прапорцыях, каб кіраваць прапорцыямі знешняга кантэнту, напрыклад <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>
Суадносіны бакоў
Суадносіны бакоў можна наладзіць з дапамогай класаў-мадыфікатараў. Па змаўчанні прадастаўляюцца наступныя класы суадносін:
<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
<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
}
}
<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%)
);