छविहरू

तस्बिरहरूलाई जवाफदेही व्यवहारमा छनौट गर्नका लागि कागजात र उदाहरणहरू (त्यसैले तिनीहरू आफ्ना अभिभावक तत्वहरूभन्दा कहिल्यै ठूला नहोस्) र तिनीहरूमा हल्का शैलीहरू थप्नुहोस्—सबै कक्षाहरू मार्फत।

उत्तरदायी छविहरू

बुटस्ट्र्यापमा छविहरू सँग उत्तरदायी बनाइन्छ .img-fluid। max-width: 100%;र height: auto;छविमा लागू गरिन्छ ताकि यो अभिभावक तत्वसँग स्केल हुन्छ।

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

SVG छविहरू र IE 10

Internet Explorer 10 मा, SVG छविहरू .img-fluidअसमान आकारका छन्। यसलाई ठीक गर्न, width: 100% \9;आवश्यक भएमा थप्नुहोस्। यो फिक्सले अन्य छवि ढाँचाहरूलाई अनुचित रूपमा आकार दिन्छ, त्यसैले बुटस्ट्र्यापले यसलाई स्वचालित रूपमा लागू गर्दैन।

छवि थम्बनेलहरू

हाम्रो सीमा-त्रिज्य उपयोगिताहरू बाहेक , तपाईंले .img-thumbnailछविलाई गोलाकार 1px किनारा उपस्थिति दिन प्रयोग गर्न सक्नुहुन्छ।

यसको वरिपरि सेतो किनारा भएको एक सामान्य वर्ग प्लेसहोल्डर छवि, यसलाई पुरानो तत्काल क्यामेराले खिचेको फोटोसँग मिल्दोजुल्दो बनाउँछ

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

छविहरू पङ्क्तिबद्ध गर्दै

हेल्पर फ्लोट कक्षाहरू वा पाठ पङ्क्तिबद्ध वर्गहरूसँग छविहरू पङ्क्तिबद्ध गर्नुहोस् । -स्तर छविहरू मार्जिन उपयोगिता वर्ग प्रयोग गरेरblock केन्द्रित गर्न सकिन्छ ।.mx-auto

गोलाकार कुनाहरू भएको सामान्य वर्ग प्लेसहोल्डर छवि

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" 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>