مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
in English

تصويرون

تصويرن کي جوابي رويي ۾ چونڊڻ لاءِ دستاويز ۽ مثال (انهي ڪري اهي ڪڏهن به پنهنجي والدين جي عنصرن کان وڏا نه ٿين) ۽ انهن ۾ هلڪو وزن وارو انداز شامل ڪريو- سڀ ڪلاسن ذريعي.

جوابي تصويرون

بوٽ اسٽريپ ۾ تصويرن کي جوابي سان ٺاهيو ويو آهي .img-fluid. اهو لاڳو ٿئي ٿو max-width: 100%;۽ height: auto;تصوير تي ته جيئن اهو ماپيندڙ عنصر سان گڏ.

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

تصوير ٿمبنيلس

اسان جي بارڊر -ريڊيس يوٽيلٽيز کان علاوه ، توهان استعمال ڪري سگهو ٿا .img-thumbnailهڪ تصوير کي هڪ گول 1px بارڊر ظاهر ڪرڻ لاءِ.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200
<img src="..." class="img-thumbnail" alt="...">

ترتيب ڏيڻ واريون تصويرون

مدد ڪندڙ فلوٽ ڪلاس يا ٽيڪسٽ الائنمينٽ ڪلاس سان تصويرن کي ترتيب ڏيو . block-سطح تصويرون مارجن يوٽيلٽي ڪلاس استعمال ڪندي.mx-auto مرڪز ٿي سگهن ٿيون .

Placeholder 200x200 Placeholder 200x200
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
Placeholder 200x200
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200
<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>

ساس

متغير

variables موجود آهن تصوير thumbnails لاء.

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