تصاویر
مستندات و مثالهایی برای انتخاب تصاویر در رفتار واکنشگرا (بنابراین آنها هرگز گستردهتر از والدین خود نمیشوند) و سبکهای سبک وزن را به آنها اضافه کنید - همه از طریق کلاسها.
تصاویر واکنش گرا
تصاویر در بوت استرپ با استفاده از .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: $gray-300;
$thumbnail-border-radius: $border-radius;
$thumbnail-box-shadow: $box-shadow-sm;