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

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

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

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

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

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

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

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

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

قاب گرد

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

عکس فضا

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

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

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

Beautiful Abstract HD(3)

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

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

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

عکس قطره ابعکس فضا

به کد زیر توجه کنید :

قرار گیری تصویر در وسط صفحه

برای قرار دادن عکس در وسط صفحه کافی است که از کلاس .mx-auto یعنی فاصله از لبه به صورت خودکار و .d-block نمایش به صورت مسدود شده استفاده کنید:

عکس های واکنشگرا

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

با اضافه کردن کلاس .img-fluidبه تگ img شما میتوانید عکس هایی داشته باشید که در هر مرورگر و هر سایزی نمایش داده شوند.

کلاس img-fluid باعث میشود که عکس های شما عرض ۱۰۰% و ارتفاع خودکار داشته باشند، به مثال زیر توجه کنید.

ویدیوی این قسمت

به پایان این قسمت از اموزش بوت استرپ هم رسیدیم امیدوارم این اموزش براتون مفید واقع شده باشد.

برای خواندن مطالب بیشتر میتوانید به سایت getbootstrap مراجعه کنید.

موفق باشید.

برچسب ها : اموزش کامل بوت استرپ، تصاویر در بوت استرپ

دیدگاه تازه ای بنویسید