نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 5213
تاریخ بروزرسانی ۳۰ فروردین ۱۴۰۱

آموزش تصاویر در بوت استرپ

ایجاد عکس واکنش گرا در بوت استرپ

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

تصاویر در بوت استرپ با.img-fluidmax-width: 100%;  وheight: auto;به تصویر اعمال می شود تا با عنصر والد مقیاس شود.

انواع تصاویر

استفاده از تصاویر در سایت به دلیل جذب مخاطبان اهمیت ویژه ای دارد. بوت استرپ کلاس هایی را برای تصاویر در نظر گرفته که با استفاده از این کلاس ها حالت های متفاوتی را برای تصاویر ایجاد می کند. این کلاس ها به شرح زیر می باشد.
کلاس img-rounded باعث گرد شدن گوشه های عکس می شود.
کلاس img-circle عکس را به صورت دایره نمایش می دهد.
کلاس img-thumbnail عکس مورد نظر را به صورت یک عکس بند انگشتی در می آورد.
در کد زیر می توانید با نحوه ی استفاده از این کلاس ها آشنا شوید.

در شکل زیر می توانید انواع تصاویر را که با کد بالا ایجاد می شود را ببینید.

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

ایجاد عکس واکنش گرا در بوت استرپ

عکس واکنش گرا به طور اتوماتیک با تغییر سایز نمایشگر تغییر پیدا می کند. برای ایجاد عکس واکنش گرا در بوت استرپ کافی است کلاس img-responsive را به تگ img اضافه کنید. این کلاس در واقع کد max-width:100%  و height:auto را به عکس اضافه می کند. در کد زیر نحوه ی استفاده از این کلاس نشان داده شده است.

این کد را در ++notepad بنویسید، سپس سایز مرورگرتان را تغییر دهید و نتیجه را مشاهده کنید.

ایجاد گالری تصاویر

برای ایجاد گالری می توان از سیستم شبکه بندی بوت استرپ و کلاس thumbnail استفاده کرد. برای مثال فرض کنید که می خواهیم برای نمونه کارهای سایت وب یار یک گالری تصاویر ایجاد کنیم که در یک سطر، سه نمونه کار نشان داده شود. برای این کار در یک div با کلاس row ، سه div با کلاس col-md-4 قرار می دهیم زیرا می خواهیم در یک سطر سه نمونه کار قرار دهیم. سپس در هر کدام از این سه div یک div با کلاس thumbnail می گذاریم و در آن نمونه کار را قرار می دهیم. به کد زیر دقت کنید.

با استفاده از کلاس caption می توان برای عکس ها یک توضیح ارائه داد. خروجی به صورت زیر است.

 

ایجاد گالری تصاویر در بوت استرپ

 

تصویر

اگر از عنصر <picture> برای تعیین چندین عنصر <source> برای یک <img> خاص استفاده می‌کنید، مطمئن شوید که کلاس‌های .img-* را به <img> و نه به تگ <picture> اضافه می‌کنید.

<picture>
<source srcset=”…” type=”image/svg+xml”>
<img src=”…” class=”img-fluid img-thumbnail” alt=”…”>
</picture>

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

 

مقالات مرتبط

نشانی ایمیل شما منتشر نخواهد شد.