نمادها

شما اینجا هستید

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

در خدمت شما هستیم با آموزش 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)

 

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

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید
اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (1 رای, میانگین: 5٫00 امتیاز از 5)
Loading...

این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap جلسه هشتم (تصاویر): نوع فایل:mp4 حجم فایل:49.08 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.