ምስሎች

ምስሎችን ወደ ምላሽ ሰጪ ባህሪ የመምረጥ ሰነዶች እና ምሳሌዎች (ስለዚህ ከወላጆቻቸው ንጥረ ነገሮች አይበልጡም) እና ለእነሱ ቀላል ክብደት ያላቸውን ቅጦች - ሁሉም በክፍል።

ምላሽ ሰጪ ምስሎች

በ Bootstrap ውስጥ ያሉ ምስሎች ምላሽ የሚሰጡ ናቸው .img-fluid. max-width: 100%;እና height: auto;ከወላጅ አካል ጋር እንዲመዘን በምስሉ ላይ ይተገበራሉ።

<img src="..." class="img-fluid" alt="Responsive image">

የምስል ድንክዬዎች

ከድንበር-ራዲየስ መገልገያዎቻችን በተጨማሪ .img-thumbnailምስሉን ክብ ባለ 1 ፒክስል የጠረፍ ገጽታ ለመስጠት መጠቀም ይችላሉ ።

<img src="..." alt="..." class="img-thumbnail">

ምስሎችን ማመጣጠን

ምስሎችን ከረዳት ተንሳፋፊ ክፍሎች ወይም የጽሑፍ አሰላለፍ ክፍሎች ጋር አሰልፍ ። block-ደረጃ ምስሎች የኅዳግ መገልገያ ክፍልን በመጠቀም መሃል.mx-auto ላይ ሊገኙ ይችላሉ ።

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