انځورونه
د عکسونو غوره کولو لپاره اسناد او مثالونه ځواب ورکوونکي چلند ته (له دې امله دوی هیڅکله د خپلو اصلي عناصرو څخه لوی نه کیږي) او دوی ته لږ وزن لرونکي سټایلونه اضافه کړئ - ټول د ټولګیو له لارې.
ځواب ورکوونکي انځورونه
په بوټسټریپ کې عکسونه د ځواب ویونکي سره جوړ شوي .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: $gray-300;
$thumbnail-border-radius: $border-radius;
$thumbnail-box-shadow: $box-shadow-sm;