in English
ምስሎች
ምስሎችን ወደ ምላሽ ሰጪ ባህሪ የመምረጥ ሰነዶች እና ምሳሌዎች (ስለዚህ ከወላጆቻቸው ንጥረ ነገሮች አይበልጡም) እና ለእነሱ ቀላል ክብደት ያላቸውን ቅጦች - ሁሉም በክፍል።
ምላሽ ሰጪ ምስሎች
በ Bootstrap ውስጥ ያሉ ምስሎች ምላሽ የሚሰጡ ናቸው .img-fluid
. max-width: 100%;
እና height: auto;
ከወላጅ አካል ጋር እንዲመዘን በምስሉ ላይ ይተገበራሉ።
<img src="..." class="img-fluid" alt="...">
SVG ምስሎች እና ኢንተርኔት ኤክስፕሎረር
በኢንተርኔት ኤክስፕሎረር 10 እና 11፣ የSVG ምስሎች .img-fluid
ያላቸው ያልተመጣጠነ መጠን አላቸው። ይህንን ለመጠገን, መጨመር width: 100%;
ወይም .w-100
አስፈላጊ ከሆነ. ይህ አስተካክል ሌሎች የምስል ቅርጸቶችን አላግባብ ያስተካክላል፣ ስለዚህ Bootstrap በራስ ሰር አይተገበርም።
የምስል ድንክዬዎች
ከድንበር-ራዲየስ መገልገያዎች በተጨማሪ .img-thumbnail
ምስሉን ክብ ባለ 1 ፒክስል የጠረፍ ገጽታ ለመስጠት መጠቀም ይችላሉ ።
<img src="..." class="img-thumbnail" alt="...">
ምስሎችን ማመጣጠን
ምስሎችን ከረዳት ተንሳፋፊ ክፍሎች ወይም የጽሑፍ አሰላለፍ ክፍሎች ጋር ያስተካክሉ ። 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>