قسمت ششم bootstrap : استایل دادن به عکس ها در بوت استرپ

سلام ، در این قسمت از اموزش بوت استرپ به ظاهر دادن به انواع عکس خواهیم پرداخت ، سایت ها از تصاویر زیادی استفاده میکنند بهتر است در هر جای سایت یک ظاهر خاص و یک طرح خاص و یک کادر خاص برای تصاویر سایت خود انتخاب کنیم.

پیشنهاد میکنم قسمت های پیشین دوره ی بوت استرپ را مطالعه کنید.

تا انتهای این مقاله با ما همراه باشید تا به شما اموزش دهیم چگونه انواع قاب عکس و طرح برای تصاویر در بوت استرپ 4 پیاده سازی کنید.

تصاویر با حاشیه گرد

نمونه عکس هایی که با حاشیه گرد ایجاد میشوند را در زیر قرار دادیم.

اگر به تصیور بالا دقت کنید متوجه میشوید که حاشیه ی عکس گرد شده است برای استفاده از این طرح میتوانید کلاس .rounded را اضافه کنید، به مثال زیر توجه کنید :

در قسمت src نام عکس ، در قسمت class ویژگی یا خصوصیت تصویر و در قسمت alt توضیحات مربوط به تصویر را قرار دهید.

قاب گرد

در زیر یک تصویر در قاب گرد قرار دادیم.

همانطور که میبینید یک عکس با قاب گرد ایجاد کردیم برای این کار نیاز هست کلاس .rounded-circle استفاده کنید، به مثال زیر توجه کنید:

عکس بند انگشتی

تصویر بند انگشتی به صورت زیر تعریف میشود :

عکس های بند انگشتی به ظاهر بالا میباشند برای استفاده از این قاب کافی است کلاس .img-thumbnail را اضافه کنید ، به مثال زیر توجه کنید :

تراز بندی عکس ها

برای چینش و تراز بندی ها نیاز است از کلاس های .float-right برای قرار دادن عکس در سمت راست و .float-left برای چینش در سمت چپ استفاده کنید به تصویر زیر توجه کنید:

مرتضی افضلی

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