عکس در بوت استرپ 4 (Bootstrap 4 Images) :
امروز می خواهیم به شما استفاده از عکس در بوت استرپ 4 را آموزش بدهیم.
بوت استرپ ۴ کلاس های مختلفی را برای زیباسازی و واکنش گرا کردن عکس ها به شما پیشنهاد می دهد. واکنش گرا کردن عکس ها به این معنی است که با تغییر اندازه صفحه نمایش اندازه عکس ها نیز تغییر می کند. در زیر به شما کلاس های تصاویر در بوت استرپ ۴ را با مثال کاربردی نمایش می دهیم :
1تصویر با گوشه های گرد (Rounded Corners Image) :
از کلاس rounded. برای گرد کردن گوشه های تصاویر استفاده می کنیم.
2تصویر به شکل دایره (Circle Image) :
از کلاس rounded-circle. برای دایره کردن تصاویر استفاده می کنیم.
3تصویر بندانگشتی (Thumbnail Image) :
از کلاس img-thumbnail. برای تبدیل تصاویر به حالت بند انگشتی استفاده می کنیم.
4ترازکردن تصویر (Aligning Image) :
برای قرارگرفتن تصویر در سمت راست صفحه از کلاس float-right. و برای قرارگرفتن تصویر در سمت چپ آن از کلاس float-left. استفاده می کنیم.
5قرار دادن تصویر در وسط (Centered Image) :
از کلاس های margin:auto) .mx-auto) و display:block) .d-block) برای قرار دادن تصویر در وسط صفحه استفاده می شود.
6واکنش گرا کردن تصویر (Responsive Images) :
صفحه های نمایش مانند تصاویر سایزهای مختلفی دارند، به همین دلیل از کلاس های زیر برای هماهنگ کردن سایز تصویر با صفحه مورد نظر استفاده می کنیم.برای واکنش گرا کردن یک تصویر به تگ <img> آن یک کلاس img-fluid. می دهیم. کلاس img-fluid. اندازه ;mas-width:100% و ;height:auto را به عکس می دهد.
به مثال های زیر توجه کنید :
See the Pen
Lwbawg by Farazgar (@Rezash)
on CodePen.
از اینکه فرازگر را در این مقاله همرایی کردید از شما سپاسگذاریم.
سایت بوت استرپ ۴ : www.getbootstrap.com
