امیجز
جوابی رویے میں تصاویر کو منتخب کرنے کے لیے دستاویزات اور مثالیں (تاکہ وہ کبھی بھی اپنے والدین سے زیادہ وسیع نہ ہوں) اور ان میں ہلکے پھلکے انداز شامل کریں—سب کچھ کلاسز کے ذریعے۔
قبول تصاویر
بوٹسٹریپ میں امیجز کو اس کے ساتھ جوابدہ بنایا جاتا .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: $gray-300;
$thumbnail-border-radius: $border-radius;
$thumbnail-box-shadow: $box-shadow-sm;