प्रतिमा
प्रतिसाद दिवपी वागणूकांत प्रतिमा निवडपा खातीर दस्तावेजीकरण आनी उदाहरणां (म्हणून तीं केन्नाच तांच्या पालक परस रूंद जायनात) आनी तांकां हलके वजनाचीं शैलीं जोडचीं-सगलीं वर्गां वरवीं.
प्रतिसाद दिवपी प्रतिमा
बूटस्ट्रॅपांतली प्रतिमा प्रतिसाद दिवपी केल्यात .img-fluid
. हें लागू जाता max-width: 100%;
आनी height: auto;
प्रतिमेक जेणे करून ती पालक रुंदाये वांगडा स्केल करता.
<img src="..." class="img-fluid" alt="...">
प्रतिमा लघुप्रतिमा
In addition to our border-radius utilities.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;