سلام برنامه | HiProgram

در خدمت شما هستیم با آموزش Bootstrap جلسه هشتم (تصاویر)

آموزش Bootstrap جلسه هشتم (تصاویر) از سری آموزش های تک قسمتی است

سلام برنامه در این جلسه درباره رسپانسیو کردن تصاویر سایت صحبت می کند

معمولا یکی از بزرگ ترین مشکلات در موبایل که باعث بهم ریختگی سایت می شود تصویر است

در این جلسه ساد می گیرید که چطور تصاویر و iframe ها را رسپانسیو کنید

در بوت استرپ برای تصاویر کلاسی تعریف شده است که با قرار دادن آن کلاس تصاویر شما واکنشگرا می شوند

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

بوت استرپ برای نمایش تصاویر هم چاره ای اندیشیه است.تصاویر در حالت عادی واکنشگرا نیستند.
علاوه بر واکنشگرایی تصاویر بوت استرپ کلاس های دیگری هم برای تصاویر تهیه کرده است.
برخی از این کلاسها را برای شما نمایش میدهیم:

• img-rounded : این کلاس گوشه تصاویر را برای شما گرد میکند.
• img-circle : این کلاس تصاویر را به صورت بیضی میکند.
• img-thumbnail : این کلاس تصاویر را به صورت بند انگشتی در می آورد.

همانطور که گفتیم تصاویر در حالت عادی رسپانسیو نیستند مهم ترین کلاسی که بوت استرپ برای تصاویر دارد کلاس زیر است.
img-responsive این کلاس شامل دستوراتی است که برای شما آن ها را مینویسیم این دستورات عکس شما را واکنشگرا میکند.
دستور display: block و max-width: 100% و height: auto در کنار هم کلاس img-responsive را میسازند.

اگر شما نخواهید از کلاس رسپانسیو استفاده کنید میتوانید ۳ دستور بالا را در css تعریف کنید و به تصاویر خود بدهید.
که در این صورت مشابه کلاس رسپانسیو بوت استرپ عمل میکند.

می توانید دیگر قسمت ها را در لینک زیر ببینید

آموزش Bootstrap جلسه هفتم (جداول)

آموزش Bootstrap جلسه نهم(Jumbotron & wells)

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید