سبد (0)

کلاس های 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">

خودتان امتحان کنید »

آموزش صوتی Bootstrap

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه