படங்கள்

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

பூட்ஸ்டார்ப்பில் உள்ள படங்கள் உடன் பதிலளிக்கக்கூடியவை .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:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;