نمادها

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

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

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

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

 

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

در این جلسه از آموزش بوت استرپ ۴ میپردازیم به مبحث تصاویر. تقریبا میشه گفت تصاویر یکی از مهمترین موارد در سایت هستند و همچنین یکی از بزرگترین مشکل ها در دستگاه های مختلف اگر سایت شما رسپانسیو نباشد. بوت استرپ ۴ علاوه بر رسپانسیو کردن تصاویر چند کلاس دیگر نیز برای راحتی کاربران به وجود آورده است. به واسطه این کلاس ها هم میتوانید در ظاهر تصاویر تغییر به وجود آورید و هم موقعیت آنها را در صفحه تعیین کنید.

 

ظاهر تصاویر 

بوت استرپ برای ظاهر تصاویر چند کلاس ایجاد کرده است که به واسطه این کلاس ها میتوانید تصاویر زیباتری برای وسایت خود بسازید این کلاس هارا برای شما لیست میکنیم و هر کدام را توضیح میدهیم:

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

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

در کد بالا ما از کلاس rounded استفاده کردیم که گوشه تصاویر را نرم میکند.

 

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

قرار دادن تصاویر در موقعیت های مختلف اگر شما از cms استفاده نکنید نیازمند تعریف css است اما بوت استرپ خود این css را تعریف کرده است کافیست شما از کلاس های آن استفاده کنید و تصاویر خود را راست چین و یا چپ چین کنید در حالت عادی در css این کار با استایل float انجام میشود و میتوانید به آن مقدار right یا left بدهید و موقعیت تصاویر خود را مشخص کنید بوت استرپ هم از همین قاعده استفاده کرده و کلاس های float-right و float-left را تعریف کرده است کافیست شما بنا به نیاز هر کدام از کلاس هارا به تگ Img خود اضافه کنید.

 

وسط قرار گرفتن تصاویر به صورت اتوماتیک

گاهی اوقات اینکه تصویر کاملا وسط صفحه قرار بگیرد دردسر ساز است مخصوصا اگر بحث قرار گرفتن این حالت در دستگاه های مختلف مطرح باشد چرا که دیگر نمیتوان از دستورات margin و padding به صورت پیکسلی و عددی استفاده کرد بوت استرپ برای این حالت نیز چاره ای دارد کلاس وسط چین کردن تصاویر که به صورت اتوماتیک این کار را برای شما انجام میدهد و تصاویر شما را در وسط صفحه قرار میدهد. در حالت عادی شما باید از ۲ استایل استفاده کنید که این کار برای شما انجام شود یکی کلاس margin :auto و دیگری کلاس display : block بوت استرپ خود این استایل ها را ایجاد کرده و کلاس های آن را با نام های mx-auto و d-block برای شما آماده کرده است تا از آن ها استفاده کنید. برای واضح شدن موضوع از کد زیر کمک بگیرید:

 

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

رسیدیم به مهم ترین کلاس مربوط به تصاویر که برای رسپانسیو بودن تصاویر از آن استفاده میکنیم بوت استرپ کلاسی را آماده کرده که تشکیل شده از ۲ استایل است با قرار دادن این کلاس در تگ Img خود تصاویرتان برای تمام دستگاه ها به اندازه قابل قبول و داخل کادر قابل نمایش است . بوت استرپ برای ساخت این کلاس از استایل های max-width:100% و height:auto استفاده کرده است و با این دو استایل کلاسی با نام img-fluid را ساخته است برای آگاهی از نحوه استفاده از این کلاس میتوانید از کد زیر کمک بگیرید:

دوستانی که با بوت استرپ ۳ کار کرده اند میدانند که کلاس رسپانسیو تصاویر در نسخه ۳ Img-responsive بوده است که در نسخه ۴ به img-fluid تغییر پیدا کرده است.

 

برای راحتی شما عزیزان تمامی موارد آموزش این جلسه را در کد زیر قرار داده ایم:

 

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

آموزش Bootstrap 4 جلسه ششم (table)

آموزش Bootstrap 4 جلسه هشتم (alert)

 

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

 

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید

اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (3 رای, میانگین: 4٫67 امتیاز از 5)
Loading...

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

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

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

پاسخی بگذارید

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

*

code

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