امیجز

قبول تصاویر

بوٹسٹریپ میں امیجز کو اس کے ساتھ جوابدہ بنایا جاتا .img-fluidہے۔ یہ تصویر پر لاگو ہوتا ہے max-width: 100%;تاکہ height: auto;یہ پیرنٹ کی چوڑائی کے ساتھ پیمانہ ہو۔

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

تصویری تھمب نیلز

ہماری سرحدی رداس کی افادیت.img-thumbnail کے علاوہ، آپ کسی تصویر کو گول 1px بارڈر کی شکل دینے کے لیے استعمال کر سکتے ہیں ۔

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