تصاویر در Bootstrap ورژن 4

تصاویر در بوت استرپ 4

 

گوشه های گرد

کلاس .rounded گوشه های گرد را به یک تصویر اضافه می کند:

تصاویر گوشه های گرد
 <img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre"> 
مشاهده مثال

دایره ای

کلاس .rounded-circle تصویر را به یک شکل دایره تبدیل میکند.

 

تصاویر دایره ای
 <img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre"> 
مشاهده مثال

تصویر بند انگشتی

کلاس .img-thumbnail تصویر را به یک تصویر کوچک شکل می دهد:

تصویر بند انگشتی
 <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre"> 
مشاهده مثال

 

ترتیب تصاویر

برای قرار دادن تصویر به سمت راست از .float-right . برای قراردادن تصاویر در چپ از .float-left: استفاده میکنیم.

bootstrap align

ترتیب تصاویر
 <img src="paris.jpg" class="float-left">
<img src="paris.jpg" class="float-right"> 
مشاهده مثال

 

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

تصاویر در همه اندازه ها وجود دارد بنابر صفحه نمایش ها در هر اندازه ای وجود دارد. تصاویر ریسپانسیو به صورت خودکار به اندازه صفحه نمایش تنظیم می شوند.

با اضافه کردن یک کلاس .img-fluid به تگ <img> ،تصاویر پاسخگو ایجاد کنید. سپس تصویر به سادگی به عنصر اصلی تبدیل می شود.

کلاس.img-fluid حداکثر عرض را اعمال می کند: max-width: 100%; و height: auto;

تصاویر ریسپانسیو
 <img class="img-fluid" src="img_chania.jpg" alt="Chania"> 
مشاهده مثال

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط