تصويرون

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

بوٽ اسٽريپ ۾ تصويرن کي جوابي سان ٺاهيو ويو آهي .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>

ساس

متغير

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

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