Razmerja
Uporabite ustvarjene psevdo elemente, da zagotovite, da bo element ohranil razmerje stranic po vaši izbiri. Popoln za odzivno obdelavo vdelanih videoposnetkov ali diaprojekcij glede na širino nadrejenega.
O tem
Uporabite pomočnik za razmerja za upravljanje razmerij stranic zunanje vsebine, kot <iframe>
so s, <embed>
s, <video>
s in <object>
s. Te pomočnike je mogoče uporabiti tudi na katerem koli standardnem podrejenem elementu HTML (npr. a <div>
ali <img>
). Slogi se uporabijo iz nadrejenega .ratio
razreda neposredno na otroka.
Razmerja stranic so deklarirana v zemljevidu Sass in vključena v vsak razred prek spremenljivke CSS, ki omogoča tudi razmerja stranic po meri .
frameborder="0"
na vašem
<iframe>
s, saj ga namesto vas preglasimo v
Reboot .
Primer
Ovijte vsako vdelavo, kot je <iframe>
, v nadrejeni element z .ratio
in razredom razmerja stranic. Neposredni podrejeni element se samodejno prilagodi velikosti zahvaljujoč našemu univerzalnemu izbirniku .ratio > *
.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
Razmerja stranic
Razmerja stranic je mogoče prilagoditi z razredi modifikatorjev. Privzeto so na voljo naslednji razredi razmerij:
<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>
Razmerja po meri
Vsak .ratio-*
razred vključuje lastnost CSS po meri (ali spremenljivko CSS) v izbirniku. To spremenljivko CSS lahko preglasite, da sproti ustvarjate razmerja stranic po meri z nekaj hitre matematike.
Na primer, če želite ustvariti razmerje stranic 2x1, nastavite --bs-aspect-ratio: 50%
na .ratio
.
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
Ta spremenljivka CSS olajša spreminjanje razmerja stranic prek prelomnih točk. Sledi 4x3 za začetek, vendar se na srednji prelomni točki spremeni v 2x1 po meri.
.ratio-4x3 {
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Zemljevid Sass
Znotraj _variables.scss
lahko spremenite razmerja stranic, ki jih želite uporabiti. Tukaj je naš privzeti $ratio-aspect-ratios
zemljevid. Spremenite zemljevid, kot želite, in znova sestavite svoje Sass, da jih uporabite.
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);