رفتن به محتوای اصلی به پیمایش اسناد بروید
Check
in English

تصاویر

مستندات و مثال‌هایی برای انتخاب تصاویر در رفتار واکنش‌گرا (بنابراین هرگز گسترده‌تر از والدین خود نمی‌شوند) و سبک‌های سبک وزن را به آنها اضافه کنید - همه از طریق کلاس‌ها.

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

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

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

ریز عکسها

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

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کلاس ابزار margin در مرکز قرار داد .

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;