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

برای ایجاد درج تصویر در بوت استرپ و ایجاد تغیرات خاص در آن تصویر باید از کلاس های مختص به آن استفاده کرد در این فسمت با انواع آنها آشنا میشویم

1-rounded:

برای اینکه چهارگوش عکس مورد نظر انحنا بگیرد باید از کلاس rounded استفاده شود :

<img src = " address-image" class = "rounded">

2-circle :

برای اینکه عکس مورد نظر به حالت گرد و دایره ای شکل مانند تبدیل شود از کلاس rounded-circle استفاده میشود

3-Thumbnail :

برای ایجاد حاشیه و انحنا به عکس مورد نظر باید از کلاس Thumbnail استفاده شود.

با 3 کلاس Thumbnail , circle , rounded آشنا شدیم نکته مهمی که وجود دارد این است که میتوان هر 3 این کلاس را باهم ترکیب و استفاده کرد.

4-Aligning Images :

برای اینکه موقعیت عکس در صفحه مشخص شود باید از کلاس Aligning Images استفاده شود به گونه ای که برای قرار گرفتن در سمت راست صفحه از کلاس float-right و برای قرار گرفتن در سمت چپ باید از کلاس float-left استفاده شود.

<img src="paris.jpg" class="float-left">
<img src="paris.jpg" class="float-right">

5-Responsive Images:

برای حالت رسپانسیو تصاویر به گونه ای که با بزرگ و کوچک شدن صفحه تصویر هم به همان نسبت تغییر کند باید از کلاس img-fluid استفاده شود:

<img src="paris.jpg class="img-fluid">

بیشتر بخوانید:kimialearning.ir