मुख्य सामग्रीमा जानुहोस् कागजात नेभिगेसनमा जानुहोस्
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>

सास

चरहरू

छवि थम्बनेलहरूको लागि चरहरू उपलब्ध छन्।

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