האָפּקען צו הויפּט אינהאַלט האָפּקען צו דאָקס נאַוויגאַציע
Check
in English

בילדער

דאַקיומענטיישאַן און ביישפילן פֿאַר אַפּטינג בילדער אין אָפּרופיק נאַטור (אַזוי זיי קיינמאָל ווערן ברייט ווי זייער פאָטער) און לייגן לייטווייט סטיילז צו זיי - אַלע דורך קלאסן.

אָפּרופיק בילדער

בילדער אין באָאָצטראַפּ זענען אָפּרופיק מיט .img-fluid. דעם אַפּלייז max-width: 100%;און height: auto;צו די בילד אַזוי אַז עס וואָג מיט די פאָטער ברייט.

Placeholder Responsive image
HTML
<img src="..." class="img-fluid" alt="...">

בילד טהומבנאַילס

אין אַדישאַן צו אונדזער גרענעץ ראַדיוס יוטילאַטיז , איר קענען נוצן .img-thumbnailצו געבן אַ בילד אַ ראַונדיד 1 פּקס גרענעץ אויסזען.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200
HTML
<img src="..." class="img-thumbnail" alt="...">

אַליינינג בילדער

ייַנרייען בילדער מיט די העלפּער פלאָוט קלאסן אָדער טעקסט אַליינמאַנט קלאסן . block-מדרגה בילדער קענען זיין סענטערד מיט די .mx-autoגרענעץ נוצן קלאַס .

Placeholder 200x200 Placeholder 200x200
HTML
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
Placeholder 200x200
HTML
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200
HTML
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

בילד

אויב איר נוצן דעם <picture>עלעמענט צו ספּעציפיצירן קייפל <source>עלעמענטן פֿאַר אַ ספּעציפיש <img>, מאַכן זיכער צו לייגן די .img-*קלאסן צו די <img>און נישט צו די <picture>קוויטל.

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

סאַס

וועריאַבאַלז

וועריאַבאַלז זענען בנימצא פֿאַר בילד טהומבנאַילס.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;