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.

Šajā lapā

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 .ratioklases 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 .

Pro-Padoms! Jums nav nepieciešama frameborder="0"s <iframe>, jo mēs to ignorējam funkcijā Reboot .

Piemērs

Aptiniet jebkuru iegultu, piemēram <iframe>, , vecākelementā ar .ratioun 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:

1x1

4x3

16x9

21x9

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

2x1

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

4x3, tad 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-ratioskarte. 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%)
);