باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
Check
in English

ڕێژەکان

توخمە ساختە دروستکراوەکان بەکاربهێنە بۆ ئەوەی توخمێک ڕێژەی ڕووکاری هەڵبژاردەکەت بپارێزێت. زۆر گونجاوە بۆ مامەڵەکردنی وەڵامدەرەوەی جێگیرکردنی ڤیدیۆ یان سلایدشۆ بە پشتبەستن بە پانایی دایک و باوک.

دەربارەی

یارمەتیدەری ڕێژە بەکاربهێنە بۆ بەڕێوەبردنی ڕێژەی ڕووکاری ناوەڕۆکی دەرەکی وەک <iframe><embed><video>s، و <object>s. هەروەها دەتوانرێت ئەم یارمەتیدەرانە لەسەر هەر توخمێکی منداڵی HTML ستاندارد بەکاربهێنرێت (بۆ نموونە، a <div>یان <img>). ستایلەکان لە .ratioپۆلی دایک و باوکەوە ڕاستەوخۆ بۆ منداڵەکە جێبەجێ دەکرێن.

ڕێژەی ڕووکار لە نەخشەی ساسدا ڕادەگەیەنرێت و لە هەر پۆلێکدا لە ڕێگەی گۆڕاوەی 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
21x9
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
  }
}
4x3، پاشان 2x1
html
<div class="ratio ratio-4x3">
  <div>4x3, then 2x1</div>
</div>

نەخشەی ساس

لەناو _variables.scss, دەتوانیت ئەو ڕێژەیە ڕووکارانە بگۆڕیت کە دەتەوێت بەکاری بهێنیت. لێرەدا $ratio-aspect-ratiosنەخشەی پێشوەختەمان. نەخشەکە بە ئارەزووی خۆت دەستکاری بکە و ساسەکەت دووبارە کۆبکەرەوە بۆ ئەوەی بیخەیتە سەر بەکارهێنان.

$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%)
);