آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

تصاویر ریسپانسیو 

تصاویر در بوت استرپ با img-fluid. واکنش نشان می دهند. حداکثر عرض: 100٪؛ و ارتفاع: خودکار؛ به تصویر اعمال می شود به طوری که با عنصر والدین مقیاس می شود.

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

 

ریز عکس ها

علاوه بر سرویسهای مرزی-شعاع، می توانید از تصویر img-thumbnail. استفاده کنید تا تصویر یک ظاهر مرز 1 پیکسل گرد داشته باشد.

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

 

هماهنگ کردن تصاویر 

تصاویر را با استفاده از کلاس های شناور کمکی یا کلاس های هماهنگ متن تنظیم کنید. تصاویر سطح بلوک را می توان با استفاده از کلاس ابزار margin margin. در محور مرکزی قرار داد.

 <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>