آموزش ریسپانسیو کردن تصاویر و ایجاد کردن یک گرید 3 ستونه

جلسه ششم - ریسپانسیو کردن تصاویر

تصاویر یکی از اجزای کاربردی در طراحی وب هستند و هر صفحه ممکن است از تصاویر زیادی تشکیل شده باشد. در بوت استرپ از طریق کلاس img-responsive میتوانید تصاویر خود را برای موبایل و تبلت به صورت ریسپانسیو در آورید.

ویدئو آموزشی ریسپانسیو کردن عکس در بوت استرپ 3

ریسپانسیو کردن تصاویر در بوت استرپ 3

در این جلسه قبلی از آموزش بوت استرپ 3  با یکی از مهمترین متا تگ های html به نام متا تگ viewport آشنا شدیم. در این جلسه آموزشی که یکی از مهمترین جلسات آموزشی هست، با مبحث ریسپانسیو کردن تصاویر آشنا می شویم و نکات مهم هنگام استفاده از تصاویر در طراحی ریسپانسیو را آموزش می دهیم.

در بوت استرپ ورژن 3 از کلاس img-responsive برای ریسپانسیو کردن تصاویر استفاده می شود. کافی است این کلاس را به تگ img خود بدهید و با کوچک کردن صفحه میبینید که تصاویر شما نیز کوچک خواهد شد.

ضمن اینکه در این جلسه آموزشی علاوه بر ریسپانسیو کردن تصاویر در بوت استرپ، از یک گرید 3 ستونه برای نمایش محتوا خدمات وب سایت استفاده میکنیم و این سه ستون اصلی را در حالت های تبلت و موبایل به صورت مختلف نمایش میدهیم.

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


ارسال نظر درباره این موضوع


  • تست (پنج شنبه, 27 تیر 1398 ساعت 00:10:08)
    ویدئو جلسه 6 و 7 قابل مشاهده نیست

    • (پنج شنبه, 27 تیر 1398 ساعت 10:25:14)

      لینک های ویدئو اصلاح شد.