Source

படங்கள்

பதிலளிப்பு நடத்தையில் படங்களைத் தேர்ந்தெடுப்பதற்கான ஆவணங்கள் மற்றும் எடுத்துக்காட்டுகள் (எனவே அவை அவற்றின் பெற்றோர் கூறுகளை விட பெரியதாக இருக்காது) மற்றும் வகுப்புகள் வழியாக அவர்களுக்கு இலகுரக பாணிகளைச் சேர்க்கவும்.

பதிலளிக்கக்கூடிய படங்கள்

பூட்ஸ்டார்ப்பில் உள்ள படங்கள் உடன் பதிலளிக்கக்கூடியவை .img-fluid. max-width: 100%;மேலும் height: auto;அவை படத்தின் மூலப்பொருளுடன் செதில்களாகப் பயன்படுத்தப்படும்.

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
SVG படங்கள் மற்றும் IE 10

இன்டர்நெட் எக்ஸ்புளோரர் 10 இல், எஸ்விஜி படங்கள் .img-fluidவிகிதாச்சார அளவில் உள்ளன. இதை சரிசெய்ய, width: 100% \9;தேவையான இடங்களில் சேர்க்கவும். இந்த பிழைத்திருத்தமானது மற்ற பட வடிவங்களை தவறாக அளவிடுகிறது, எனவே பூட்ஸ்டார்ப் தானாக பொருந்தாது.

பட சிறுபடங்கள்

எங்கள் பார்டர்-ரேடியஸ் பயன்பாடுகளுக்கு கூடுதலாக , நீங்கள் .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="..." alt="..." class="img-thumbnail">

படங்களை சீரமைத்தல்

உதவி ஃப்ளோட் வகுப்புகள் அல்லது உரை சீரமைப்பு வகுப்புகளுடன் படங்களை சீரமைக்கவும் . -நிலைப் படங்களை விளிம்பு பயன்பாட்டு வகுப்பைப்block பயன்படுத்தி மையப்படுத்தலாம்.mx-auto .

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