Attiecības
Izmantojiet ģenerētos pseidoelementus, lai elementam saglabātu jūsu izvēlēto malu attiecību. Lieliski piemērots, lai reaģētu uz video vai slaidrādes iegulšanu, pamatojoties uz vecāku platumu.
Par
Izmantojiet attiecību palīgu, lai pārvaldītu ārējā satura, piemēram <iframe>
, s, <embed>
s, <video>
s un <object>
s, malu attiecības. Šos palīgus var izmantot arī jebkuram standarta HTML pakārtotajam elementam (piemēram, a <div>
vai <img>
). Stili tiek piemēroti no vecāku .ratio
klases tieši bērnam.
Malu attiecības tiek deklarētas Sass kartē un iekļautas katrā klasē, izmantojot CSS mainīgo, kas nodrošina arī pielāgotas malu attiecības .
Piemērs
Aptiniet jebkuru iegultu, piemēram <iframe>
, , vecākelementā ar .ratio
un malu attiecības klasi. Pateicoties mūsu universālajam selektoram, tiešā bērna elementa izmēri tiek automātiski pielāgoti .ratio > *
.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
Malu attiecības
Malu attiecības var pielāgot ar modifikatoru klasēm. Pēc noklusējuma tiek nodrošinātas šādas attiecību klases:
<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>
Pielāgotas attiecības
Katrai .ratio-*
klasei atlasītājā ir iekļauts pielāgots CSS rekvizīts (vai CSS mainīgais). Varat ignorēt šo CSS mainīgo, lai izveidotu pielāgotas malu attiecības ar nelielu matemātiku.
Piemēram, lai izveidotu malu attiecību 2x1, iestatiet --bs-aspect-ratio: 50%
uz .ratio
.
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
Šis CSS mainīgais ļauj viegli mainīt malu attiecību starp pārtraukuma punktiem. Tālāk ir 4x3, lai sāktu, bet mainās uz pielāgotu 2x1 vidējā pārtraukuma punktā.
.ratio-4x3 {
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Sass karte
Programmā _variables.scss
, varat mainīt izmantojamās malu attiecības. Šeit ir mūsu noklusējuma $ratio-aspect-ratios
karte. Pārveidojiet karti, kā vēlaties, un pārkompilējiet savu Sass, lai tos izmantotu.
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);