படங்கள்
பதிலளிக்கக்கூடிய நடத்தையில் படங்களைத் தேர்ந்தெடுப்பதற்கான ஆவணங்கள் மற்றும் எடுத்துக்காட்டுகள் (எனவே அவை ஒருபோதும் பெற்றோரை விட அகலமாக இருக்காது) மற்றும் வகுப்புகள் வழியாக அவர்களுக்கு இலகுரக பாணிகளைச் சேர்க்கவும்.
பதிலளிக்கக்கூடிய படங்கள்
பூட்ஸ்டார்ப்பில் உள்ள படங்கள் உடன் பதிலளிக்கக்கூடியவை .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>
சாஸ்
மாறிகள்
படத்தின் சிறுபடங்களுக்கு மாறிகள் கிடைக்கின்றன.
$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;