تصاویر

تصاویر واکنش گرا

تصاویر در بوت استرپ با استفاده از .img-fluid. این برای تصویر اعمال می شود max-width: 100%;تا height: auto;با عرض والد مقیاس شود.

<img src="..." class="img-fluid" alt="...">

ریز عکسها

علاوه بر ابزارهای حاشیه شعاع ما ، می‌توانید .img-thumbnailبرای دادن ظاهری گرد ۱ پیکسلی به تصویر استفاده کنید.

<img src="..." class="img-thumbnail" alt="...">

تراز کردن تصاویر

تصاویر را با کلاس های شناور کمکی یا کلاس های تراز متن تراز کنید . blockتصاویر سطح را می توان با استفاده از .mx-autoکلاس ابزار margin در مرکز قرار داد .

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