ചിത്രങ്ങൾ

പ്രതികരിക്കുന്ന ചിത്രങ്ങൾ

ബൂട്ട്‌സ്‌ട്രാപ്പിലെ ചിത്രങ്ങൾ ഉപയോഗിച്ച് പ്രതികരിക്കുന്നതാണ് .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;