בילדער
דאַקיומענטיישאַן און ביישפילן פֿאַר אַפּטינג בילדער אין אָפּרופיק נאַטור (אַזוי זיי קיינמאָל ווערן ברייט ווי זייער פאָטער) און לייגן לייטווייט סטיילז צו זיי - אַלע דורך קלאסן.
אָפּרופיק בילדער
בילדער אין באָאָצטראַפּ זענען אָפּרופיק מיט .img-fluid
. דעם אַפּלייז max-width: 100%;
און height: auto;
צו די בילד אַזוי אַז עס וואָג מיט די פאָטער ברייט.
<img src="..." class="img-fluid" alt="...">
בילד טהומבנאַילס
אין אַדישאַן צו אונדזער גרענעץ ראַדיוס יוטילאַטיז , איר קענען נוצן .img-thumbnail
צו געבן אַ בילד אַ ראַונדיד 1 פּקס גרענעץ אויסזען.
<img src="..." class="img-thumbnail" alt="...">
אַליינינג בילדער
ייַנרייען בילדער מיט די העלפּער פלאָוט קלאסן אָדער טעקסט אַליינמאַנט קלאסן . block
-מדרגה בילדער קענען זיין סענטערד מיט די .mx-auto
גרענעץ נוצן קלאַס .
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">
<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;