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

آخرین بروز رسانی: مرداد ۲۹, ۱۳۹۶

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

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

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

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

 
استفاده از تصاویر در سایت به دلیل جذب مخاطبان اهمیت ویژه ای دارد. بوت استرپ کلاس هایی را برای تصاویر در نظر گرفته که با استفاده از این کلاس ها حالت های متفاوتی را برای تصاویر ایجاد می کند. این کلاس ها به شرح زیر می باشد.
کلاس 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 می توان برای عکس ها یک توضیح ارائه داد. خروجی به صورت زیر است.

 

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

 

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

مطالب مرتبط
ارتباط با تیم پشتیبانی وب یار

تمام پشتیبان ها در حال پاسخ به مشتریان هستند. لطفا درخواست خود را ارسال نمایید تا در کوتاه ترین زمان ممکن با شما تماس بگیریم.

چه کمکی از تیم وب یار بر می آید ، با ما در میان بگذارید

برای گفتگو کلید ENTER را بفشارید

کلیه حقوق مادی و معنوی این اثر متعلق به طراحی سایت اصفهان وب یار می باشد CopyRight 2017

بالا