ප්‍රධාන අන්තර්ගතය වෙත යන්න ලේඛන සංචාලනය වෙත යන්න
Check
in English

රූප

ප්‍රතිචාරාත්මක හැසිරීම් වලට රූප තෝරා ගැනීම සඳහා ප්‍රලේඛනය සහ උදාහරණ (එබැවින් ඔවුන් කිසි විටෙකත් ඔවුන්ගේ දෙමාපියන්ට වඩා පුළුල් නොවේ) සහ ඒවාට සැහැල්ලු මෝස්තර එක් කරන්න-සියල්ල පන්ති හරහා.

ප්‍රතිචාරාත්මක රූප

බූට්ස්ට්‍රැප් හි පින්තූර ප්‍රතිචාර දක්වන ලෙස සාදා ඇත .img-fluid. මෙය මාපිය පළල සමග පරිමාණය වන පරිදි රූපයට max-width: 100%;අදාළ වේ.height: auto;

Placeholder Responsive image
html
<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
html
<img src="..." class="img-thumbnail" alt="...">

රූප පෙළගැස්වීම

උපකාරක පාවෙන පන්ති හෝ පෙළ පෙළගැස්වීමේ පන්ති සමඟ පින්තූර පෙළගස්වන්න . - මට්ටමේ රූප ආන්තික උපයෝගිතා පන්තිය භාවිතයෙන්block කේන්ද්‍රගත කළ හැක ..mx-auto

Placeholder 200x200 Placeholder 200x200
html
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
Placeholder 200x200
html
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200
html
<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;