مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره آموزش Bootstrap 4 ، را دنبال می کنند. در این بخش از آموزش های این دوره ، قصد داریم به مبحث مهم و پایه تصاویر در Bootstrap 4 و کار با تصاویر در Bootstrap 4 ، بپردازیم. که از پر کاربرد ترین قسمت های طراحی هر وب سایتی ، محسوب می شود. و ایجاد ویژگی responsive در آن از اهمیت ویژه ای برخوردار است.
اگر بخش های قبلی این دوره را مرور کرده باشید، مباحث کاربردی و پایه طراحی وب سایت ، از جمله متن و تایپوگرافی در Bootstrap 4 ، موضوع مهم رنگ ها در Bootstrap 4 و کار با جداول در Bootstrap 4 ، را نیز ارائه کردیم.
در ادامه به سراغ موضوع این بخش ، که کار با تصاویر در Bootstrap 4 ، است. می رویم.
تصاویر در Bootstrap 4
کار با تصاویر در Bootstrap 4
کار با تصاویر در Bootstrap 4
Bootstrap 4 ، داریا کلاس های متعددی برای طراحی و responsive کردن تصاویر در قالب وب سایت است، در ادامه به بررسی آنها خواهیم پرداخت:
گرد کردن گوشه های تصاویر
از کلاس .rounded ، برای ایجاد گردی در گوشه های تصاویر ، استفاده می شود:
مثال:
مثال :
| <img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre"> |
دایره کردن شکل کلی تصاویر
برای دایره کردن تصاویر نیز ، می توانید از کلاس .rounded-circle ، استفاده کنید.
مثال:
مثال :
| <img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre"> |
کوچک کردن قالب کلی تصاویر
برای قرار دادن تصویر در یک قالب کوچک نیز ، می توانید از کلاس .img-thumbnail ، استفاده کنید.
مثال:
مثال :
| <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre"> |
ترازبندی تصاویر
ترازبندی تصاویر
برای تنظیم ، ترازبندی تصاویر ، نیز می توان از کلاس .float-right برای تراز بندی راست و از کلاس .float-left ، برای تراز بندی چپ، استفاده کرد.
مثال:
مثال :
| <img src="paris.jpg" class="float-left"> <img src="paris.jpg" class="float-right"> |
قرار دادن تصویر در مرکز
قرار دادن تصویر در مرکز
برای قرار دادن موقعیت تصویر در مرکز ، می توانید از کلاس .mx-auto و کلاس .d-block ، استفاده کنید.
مثال:
مثال :
| <img src="paris.jpg" class="mx-auto d-block"> |
responsive کردن تصاویر
تصاویر در همه اندازه ها می آیند بنابراین صفحه نمایش را تنظیم کنید. تصاویر responsive ، به صورت خودکار به اندازه صفحه نمایش تنظیم می شوند.
با افزودن کلاس .img-fluid به تگ <img> ، تصاویر responsive ، خواهند شد. سپس اندازه ی تصویر به سادگی با عنصر والدین تنظیم می شود.
کلاس .img-fluid ، در واقع دارای خصوصیات max-width: 100% و height: auto ، برای تصاویر می باشد.
مثال:
مثال :
| <img class="img-fluid" src="img_chania.jpg" alt="Chania"> |
کلام آخر
در این بخش از آموزشها ، به بحث جالب و پر کاربرد ، کار با تصاویر در Bootstrap 4 ، پرداختیم. responsive کردن تصاویر با Bootstrap 4 ، بسیار ساده ، اما از بخش های مهم و پایه در responsive ، قالب وب سایت محسوب می شود.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
