کلاس های image در بوت استرپ
عکس های بوتسترپ
دایره: بندانگشتی: گوشه های گرد شده:
کلاس های تگ <img>
از کلاس های زیر می توان برای استایل بندی کردن هر عکسی استفاده نمود:
| Class | توضیحات | مثال |
|---|---|---|
| img-rounded. |
گوشه های گرد شده را با یک عکس اضافه می کند(در IE8 در دسترس نیست). |
امتحان کنید |
| img-circle. |
عکس را به صورت دایره در می آورد(در IE8 در دسترس نیست). |
امتحان کنید |
| img-thumbnail. |
عکس را به صورت بند انگشتی در می آورد. |
امتحان کنید |
| img-responsive. |
یک عکس را به صورت واکنش گرا در می آورد(نسبت به عنصر والد خود به خوبی مقیاس بندی می شود). |
امتحان کنید |
عکس های واکنش گرا
می توانید با استفاده از کلاس img-responsive. در تگ <img>، عکس های واکنش گرا را ایجاد کنید. بعد از اضافه کردن کلاس مورد نظر، عکس نسبت به عنصر والد خود، به خوبی مقیاس بندی می شود.
کلاس img-responsive. درواقع دستورات max-width:100% و height:auto را به عکس مورد نظر اعمال می کند:
مثال (عکس های css بوتسترپ)
<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">
خودتان امتحان کنید »
- نوشته شده توسط احسان عباسی
- بازدید: 15905
